justify-content属性定义了项目在主轴上的对齐方式(左中右)
.box{justify-content: flex-start | flex-end | center | space-between | space-around}
flex-start:默认值 左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,项目之间间隔都相等
space-around:每个项目两侧的间隔相等,所以,项目之间的间隔比项目与边框的间隔大一倍
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>justify-content属性</title>
</head>
<body>
<style>
.myflex{
display: flex;
display: -webkit-flex;
width: 400px;
height: 200px;
background: #CCC;
justify-content: flex-start;
}
.myflex2{
display: flex;
display: -webkit-flex;
width: 400px;
height: 200px;
background: #CCC;
justify-content: flex-end;
}
.myflex3{
display: flex;
display: -webkit-flex;
width: 400px;
height: 200px;
background: #CCC;
justify-content: center;
}
.myflex4{
display: flex;
display: -webkit-flex;
width: 400px;
height: 200px;
background: #CCC;
justify-content: space-between;
}
.myflex5{
display: flex;
display: -webkit-flex;
width: 400px;
height: 200px;
background: #CCC;
justify-content: space-around;
}
.flex-item{
background-color: #F93;
width: 70px;
height: 70px;
margin: 10px;
}
</style>
<p>justify-content: flex-start</p>
<div class="myflex">
<div class="flex-item">01</div>
<div class="flex-item">02</div>
<div class="flex-item">03</div>
</div>
<p>justify-content: flex-end</p>
<div class="myflex2">
<div class="flex-item">01</div>
<div class="flex-item">02</div>
<div class="flex-item">03</div>
</div>
<p>justify-content: flex-center</p>
<div class="myflex3">
<div class="flex-item">01</div>
<div class="flex-item">02</div>
<div class="flex-item">03</div>
</div>
<p>justify-content: space-between</p>
<div class="myflex4">
<div class="flex-item">01</div>
<div class="flex-item">02</div>
<div class="flex-item">03</div>
</div>
<p>justify-content: space-around</p>
<div class="myflex5">
<div class="flex-item">01</div>
<div class="flex-item">02</div>
<div class="flex-item">03</div>
</div>
</body>
</html>