flex布局之align-content属性详解

1.介绍

align-content属性与align-items属性作用类似，其中区别是align-items作用于flex容器中子项目不换行的情况，而align-content则是作用于flex容器换行的情况，对于align-items的用法可参考flex布局之align-items属性详解，其中常用的值会比align-items中多一点，功能与justify-content中的值类似，对于justify-content的用法可参考flex布局之justify-content属性详解，algin-content作用于align-items作用一样，均是改变flex容器中子项目在侧轴的位置，其中常用的值有一下几个：（注：以下演示均以侧轴为从上到下的方向）

• flex-start
  即在侧轴的开始位置（上），html代码如下：

  
  
  


  

    
1
    
2
    
3
    
4
    
5
  

其效果如图所示：

align-content：flex-start效果

• flex-end
  即在侧轴的末尾位置（下），效果如下图所示:

  
  
  algin-content: flex-end效果

• center
  即在侧轴的中间位置，效果如下图所示：

  
  
  align-content: center效果

• space-around
  剩余空间被平均的分配在侧轴方向上的每个子项目，效果如下图所示：

  
  
  align-content: space-around效果
• space-between
  与space-around类似,不同的是最开始和最末尾的子项目分别在其上边和下边没用空间，效果如下图所示：
  
  align-content: space-between效果
  
  （注：图中最上边的空间是由于设置了margin-top：10px所导致）

自己先给自己点个赞，冲啊！咱是最棒的！嘿嘿！观看的小可爱一起点个赞呗，求求了！