<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex弹性布局justify-content</title>
</head>
<style type="text/css">
.container1{
margin: 10px auto;
background-color: pink;
border: 4px solid aqua;
border-radius: 8px;
width: 1000px;
height: 100px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.container2{
margin: 10px auto;
background-color: pink;
border: 4px solid aqua;
border-radius: 8px;
width: 1000px;
height: 100px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.container3{
margin: 10px auto;
background-color: pink;
border: 4px solid aqua;
border-radius: 8px;
width: 1000px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.container4{
margin: 10px auto;
background-color: pink;
border: 4px solid aqua;
border-radius: 8px;
width: 1000px;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container5{
margin: 10px auto;
background-color: pink;
border: 4px solid aqua;
border-radius: 8px;
width: 1000px;
height: 100px;
display: flex;
justify-content: space-around;
align-items: center;
}
.container6{
margin: 10px auto;
background-color: pink;
border: 4px solid aqua;
border-radius: 8px;
width: 1000px;
height: 100px;
display: flex;
justify-content: center;
align-items: flex-start;
}
.container7{
margin: 10px auto;
background-color: pink;
border: 4px solid aqua;
border-radius: 8px;
width: 1000px;
height: 100px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.container8{
margin: 10px auto;
background-color: pink;
border: 4px solid aqua;
border-radius: 8px;
width: 1000px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.container9{
margin: 10px auto;
background-color: pink;
border: 4px solid aqua;
border-radius: 8px;
width: 1000px;
height: 100px;
display: flex;
justify-content: center;
align-items: baseline;
}
.container10{
margin: 10px auto;
background-color: pink;
border: 4px solid aqua;
border-radius: 8px;
width: 1000px;
height: 100px;
display: flex;
justify-content: center;
align-items: stretch;
}
div[class^=item]{
background-color: lightgreen;
border: 4px solid lightskyblue;
border-radius: 4px;
margin-right: 10px;
height: 50px;
}
.item1{
width: 100px;
}
.item2{
width: 50px;
}
.item3{
width: 150px;
}
</style>
<body>
<h1>flex-start</h1>
<div class="container1">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>flex-end</h1>
<div class="container2">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>center</h1>
<div class="container3">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>space-between</h1>
<div class="container4">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>space-around</h1>
<div class="container5">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>flex-start</h1>
<div class="container6">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>flex-end</h1>
<div class="container7">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>center</h1>
<div class="container8">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>baseline</h1>
<div class="container9">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>stretch</h1>
<div class="container10">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
</html>
![image-20260707083844933]()
浙公网安备 33010602011771号