弹性盒子

Image

Image

Image

Image

注意:
1.父控制子
2.主轴与交叉轴

主轴与交叉轴对齐

Image

Image

改变主轴方向

Image

需要注意: 注意:1.必须给父元素设置 2.对齐也需要注意:主轴改变了,交叉轴也改变了

是否换行

Image

多行对齐

Image

子项目flex伸缩与gap间隙

flex
Image

Image

间隙

Image

多行伸缩布局

1.设置百分比

Image

2.设置最大最小百分比

Image