一.改变主轴方向为垂直fd
flex-direction: column;
这个值作用:主轴方向变为垂直,侧轴方向变为水平
注意点: 现在主轴和侧轴仅仅只是方向调换了而已,
主轴依然还是用jc改变对齐方式,侧轴还是用ai改变对齐方式
二 弹性盒子换行显示
1.控制多行的侧轴对齐方式
align-content属性出现是有前提条件:
必须要先设置flex-wrap:wrap;
align-content取值和jc一样的
align-content:flex-start; 多行从头开始排列
align-content:flex-end ; 多行从尾开始排列
align-content:center ; 多行居中排列
align-content:space-around; 主轴均排,空白间距在两侧
align-content:space-between; 主轴均排,空白间距在相邻盒子之间 (一左一右排列)
align-content:space-evenly ; 主轴均排,弹性盒子与容器之间间距相等
align-self:center; 设置单个盒子的对齐方式
2.控制单行的侧轴排列方式
align-item: flex-start
flex-end
center
sh
