web第四天--Flex布局

主轴方向

flex-direction

主轴默认是水平方向, 侧轴默认是垂直方向

修改主轴方向属性:
flex-direction: column列, 垂直（最常用）
row 行, 水平
row-reverse 行, 从右向左
column-reverse 列, 从下向上

1.改变主轴方向为垂直方向
2.把主轴方向变成了垂直方向，还是用jc控制主轴方向的对齐方式
3.把侧轴方向变成了水平方向，还是用ai控制侧轴方向的对齐方式
注意：主轴和侧轴仅仅只是调换了方向而已

微信截图_20220406194040.png

弹性盒子换行

弹性盒子换行显示flex-wrap: wrap

弹性容器高度被换行的弹性盒子均等分

align-content 取值和justify-content取值是一样的
针对于多行弹性盒子的侧轴设置的
出现的前提条件，必须要先换行 flex-wrap: wrap;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
align-content: space-evenly;

微信截图_20220406194028.png

align-items 针对于单行弹性盒子的侧轴对齐方式