flex布局主轴测轴的使用与对齐方式

473 阅读1分钟

更换flex主轴方向

flex-direction: row; 默认值

设置了column之后

主轴方向变成了从上到下 侧轴从左到右

flex-direction: column;

弹性盒子换行显示

display: flex;

强制让所有的子元素强制一行显示

超出父元素也不会换行(打死不换行)

flex-wrap: wrap;

让子元素换行显示

多行侧轴对齐方式

单行侧轴的对齐方式

align-items:

stretch 拉伸

flex-start 从轴线开始对齐

flex-end 从轴线结束对齐

center 居中

align-content: 多行侧轴的对齐方式 是和 flex-wrap: wrap; 一起使用

stretch 拉伸 默认

center

justify-content的对齐方式一样

space-between

space-around

space-evenly