flex伸缩布局

Posted 2022-11-20 zhaodz

一.在父盒子上设置样式

1.display:flex;让盒子变成一个伸缩盒子

2.flex-direction  控制主轴方向

flex-direction:row 水平往右；

flex-direction:column  垂直往右；

3.justify-content  主轴对齐方式

justify-content:flex-start ;往主轴开始位置对齐

justify-content:flex-end ;往主轴结束位置对齐

justify-content:center ;居中对齐

justify-content:space-between;让盒子在主轴方向平均分布

justify-content:space-around;让盒子在主轴方向平均分布，两端不留空隙

4.align-items 侧轴单行对齐方式

align-items:flex-start;往侧轴开始位置对齐

align-items:flex-end;往侧轴结束位置对齐

align-items:center;往侧轴方向垂直对齐

align-items:stretch;往侧轴方向拉伸，盒子不能设置高度

5.flex-wrap    控制盒子换行

6.align-content 侧轴多行对齐方式

align-content:flex-start ;  往侧轴开始位置对齐

align-content:flex-end;往侧轴结束位置对齐

align-content:center;往侧轴方向垂直对齐

align-content:space-between;让盒子在侧轴方向平均分布

align-content:space-around;让盒子在侧轴方向平均分布，两端不留空隙

align-content:stretch;往侧轴方向拉伸，盒子不能设置高度

 二.在子元素设置样式

1.flex 可以分数分配主轴的剩余空间，在排布完设置了宽高的盒子之后，再分配空间

2.order:控制子元素的排布顺序，数值越小，越靠前。

3.align-self 控制自己在侧轴的对齐方式

align-self::flex-start;;往侧轴开始位置对齐

align-self:flex-end;往侧轴结束位置对齐

align-self::center;往侧轴方向垂直对齐

align-self::stretch;往侧轴方向拉伸，盒子不能设置高度