就业班移动web到四天 弹性盒子主轴方向 4.6

71 阅读1分钟

主轴方向

使用flex-direction改变元素排列方向

改变主轴方向为垂直方向 fd flex-direction: column; 把主轴方向变成了垂直方向,还是用jc控制主轴方向的对齐方式 把侧轴方向变成了水平方向,还是用ai控制侧轴方向的对齐方式

注意:主轴和侧轴仅仅只是调换了方向而已

image.png

弹性盒子换行

使用flex-wrap实现弹性盒子多行排列效果

弹性盒子换行显示 : flex-wrap: wrap; l 调整行对齐方式 :align-content Ø 取值与justify-content基本相同

弹性盒子换行显示 fwp

flex-wrap: wrap 弹性容器高度被换行的弹性盒子均等分

align-content 取值和jc取值是一样的 针对于多行弹性盒子的侧轴设置的 出现的前提条件,必须要先换行 flex-wrap: wrap;

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