Flex布局

2022-05-19 160 阅读2分钟

布局效果：

1652880921(1).png

如果不使用flex布局（使用传统方式布局）

1652881012(1).png

1652881056(1).png

布局效果

1652881580(1).png

使用flex布局

1652881607(1).png

1652881628(1).png

与传统方式相比，Flex布局更加方便简洁

传统方式布局微信客户端界面

1652923994(1).png

1652924050(1).png

呈现效果

1652924176(1).png

使用flex布局微信客户端界面

1652925375(1).png

1652925406(1).png

呈现效果

1652925295(1).png

使用flex布局此时如果底部再加一个div，也可以呈现居中效果，其它写法均不需更改

1652925775(1).png

呈现效果

1652925829(1).png

因此使用弹性盒模型是很方便的，尤其是在移动端

改变弹性元素方向：flex-direction

1652929901(1).png

1652929929(1).png

呈现效果

1652929982(1).png

控制弹性元素溢出换行处理

flex-wrap:wrap表示当父盒子放不下所有子元素时，不会压缩子元素，而是进行换行，wrap表示从左到右（或从上到下）换行

1652936144(1).png

1652936182(1).png

1652936261(1).png

1652936106(1).png

1652936299(1).png

1652936328(1).png

flex-flow属性是将flex-direction和flex-wrap属性结合在一起写

1652944005(1).png

表示垂直排列，如果高度溢出则向右扩展

jusitify-content属性：控制主轴元素排列的方式

主轴是水平方向时：flex-direction:row

1

1652945218(1).png

1652945256(1).png

2

1652945311(1).png

1652945331(1).png

3

1652945369(1).png

1652945388(1).png

4

1652945433(1).png

1652945453(1).png

5

1652945506(1).png

1652945527(1).png

6

1652945559(1).png

1652945579(1).png

主轴是垂直方向时：flex-direction:column

flex-direction:column-reverse表示主轴为垂直方向并且是从下往上排列

1652945706(1).png

1652945916(1).png

交叉轴的对齐方式：align-items

1

1652947102(1).png

1652947129(1).png

2

1652947987(1).png

1652948019(1).png 宽度、高度的优先级是高于align-items:stretch的

3

1652949264(1).png

1652949308(1).png

对单个元素交叉轴的控制：align-self

1652950558(1).png

1652950593(1).png

1652950613(1).png

元素可用空间分配：flex-grow

当不设置flex-grow时：

1652951599(1).png

呈现效果

1652951679(1).png

当设置flex-grow时：将主轴可用空间分成三等份，给三个孩子补上

1652951762(1).png

1652951853(1).png

如果是这样呢？应该怎么分？

1652952130(1).png

呈现效果

1652952198(1).png

布局小米移动端布局结构

1652953037(1).png

1652953076(1).png

呈现效果

1652953111(1).png

flex-shrink:设置弹性盒子的缩小比率

当父元素宽度或高度不够时（子元素放不下），如果不使用flex-wrap,则会默认缩小，如果使用flex-shrink可以调节缩小比率

1652953939(1).png

1652953960(1).png

弹性元素的主轴基准尺寸：flex-basis

优先级大小：从大到小依次为max-height(min-height)->flex-basis->height(width)

flex组合属性

flex组合属性可以将flex-grow(放大） flex-shrink(缩小） flex-basis(基准尺寸）三个属性一起写在flex属性中

1652954776(1).png

控制弹性元素的顺序：order数值

初始设置

1652955344(1).png

1652955374(1).png

1652955393(1).png

1652955412(1).png

现在改变元素排列顺序

1652955623(1).png

1652955644(1).png