justify-content

justify-content 属性规定浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。

justify-content: flex-start | flex-end | center | space-between | space-around

HTML

<h4>justify-content:flex-start</h4>
<ul id="box" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<h4>justify-content:flex-end</h4>
<ul id="box2" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<h4>justify-content:center</h4>
<ul id="box3" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<h4>justify-content:space-between</h4>
<ul id="box4" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<h4>justify-content:space-around</h4>
<ul id="box5" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

CSS

.box{
  display:-webkit-flex;
  display:flex;
  width:400px;
  height:100px;
  margin:0;
  padding:0;
  border-radius:5px;
  list-style:none;
  background-color:#333;
}
.box li{
  margin:5px;
  padding:10px;
  border-radius:5px;
  background:tomato;
  text-align:center;
  color:#fff;
}
#box{
  -webkit-justify-content:flex-start;
  justify-content:flex-start;  //从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。
}
#box2{
  -webkit-justify-content:flex-end;
  justify-content:flex-end;  //从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。
}
#box3{
  -webkit-justify-content:center;
  justify-content:center;  //伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
}
#box4{
  -webkit-justify-content:space-between;
  justify-content:space-between;  //在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
}
#box5{
  -webkit-justify-content:space-around;
  justify-content:space-around;  //在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
}

执行结果

justify-content:flex-start

• a
• b
• c

justify-content:flex-end

• a
• b
• c

justify-content:center

• a
• b
• c

justify-content:space-between

• a
• b
• c

justify-content:space-around

• a
• b
• c