flex布局之align-items属性详解

1. 介绍

align-items类似于justify-content可以设置子元素的显示的位置，不同的是justify-content设置的是子元素在主轴方向上的，而align-items则是设置子元素在侧轴中的位置，相对justify-content属性了解的可参考flex布局之justify-content属性详解，那么接下来就让我来介绍align-items的值。（注：align-items生效的前提示flex容器不换行，以下演示均已侧轴为从上到下方向）

• flex-start（默认）

即默认状态下的在侧轴的上边位置，页面代码如下：



  
  
  


  

    
1
    
2
    
1
    
2
  

其效果如下：

align-items: flex-start效果

• flex-end
  其flex-end则是在侧轴的下边位置，效果如下图所示：

  
  
  align-items: flex-end效果

• center
  设置为center值之后，其子元素整体的位置则是在侧的中心位置，其效果如下：

  
  
  align-items: center效果

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