align-content

align-content属性规定弹性内容的侧轴方向上右额外的空间时，如何排布每一行。当弹性容器只有一行时无作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch

HTML

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

CSS

.box{
  display:-webkit-flex;
  display:flex;
  -webkit-flex-wrap:wrap;
  flex-direction:wrap;
  width:200px;
  height:200px;
  margin:0;
  padding:0;
  border-radius:5px;
  list-style:none;
  background-color:#eee;
}
.box li{
  margin:5px;
  padding:10px;
  border-radius:5px;
  background:tomato;
  text-align:center;
  color:#fff;
}
#box{
  align-content:flex-start;//所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
}
#box2{
  align-content:flex-end;//所有行从垂直轴终点开始填充。第一行的垂直轴终点边和容器的垂直轴终点边对齐。接下来的每一行紧跟前一行。
}
#box3{
  align-content:center;//所有行朝向容器中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点和最后一行的距离。
}
#box4{
  align-content:space-between;//所有行在容器中平均分布。相邻两行间距相等容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。
}
#box5{
  align-content:space-around;//各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
}
#box6{
  align-content:strecth;//拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行。
}

执行结果

align-content:flex-start

• a
• b
• c
• d
• e
• f

align-content:flex-end

• a
• b
• c
• d
• e
• f

align-content:center

• a
• b
• c
• d
• e
• f

align-content:space-between

• a
• b
• c
• d
• e
• f

align-content:space-around

• a
• b
• c
• d
• e
• f

align-content:strecth

• a
• b
• c
• d
• e
• f