目录

align-content

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

 

语法

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

描述
flex-start所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
flex-end所有行从垂直轴终点开始填充。第一行的垂直轴终点边和容器的垂直轴终点边对齐。接下来的每一行紧跟前一行。
center所有行朝向容器中心填充。每行互相紧挨,相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点和最后一行的距离。
space-between所有行在容器中平均分布。相邻两行间距相等容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。
space-around各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'center'。在其它情况下,各行会按一定方式在弹性盒容器中排列,以保持两两之间的空间相等,同时第一行前面及最后一行后面的空间是其他空间的一半。
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

align-content:flex-end

align-content:center

align-content:space-between

align-content:space-around

align-content:strecth