flex布局中侧轴对齐方式

侧轴对齐方式也是添加在父元素上哦 控制父元素中所有子元素的垂直对齐方式简单理解为Y轴垂直方向从上至下

侧轴居对齐语法align-items：方向；

为了大家方便理解Y轴评论方式可以参考以下图片

 

 /* 侧轴居中 垂直方向 盒子距离上下有一定距离实现居中 */
           align-items: center;

 

  /* 侧轴居中 垂直方向 起点开始排列 */
           align-items:flex-start;

 

注意⚠️：Y轴是上下对齐哦 以上展示方式有的小伙伴会认为是和X轴水平方向的从左往右排列的默认值   justify-content: flex-start;一样

其实并不是哦 盒子此时是从上至下排列 

大家可以手动操作一下看看效果

 

 

 /* 侧轴对齐 垂直方向 终点开始排列 */
           align-items:flex-end;

 

 /* 侧轴默认值  stretch拉伸*/
           align-items:stretch;