专项答疑 ​

flex布局有什么用，怎么正确使用 ​

一、适用场景 ​

适用情况：

1. 当一个容器不论多大时，里面的元素都应通过一定规则进行空间拆分最终撑满该容器时
2. 当需要多个子元素横向排列时
3. 进行自适应布局时

不适用情况：

1. 容器内子元素纵向排序且都具有固定的高度时
2. 容器内子元素横向排序且容器横向会出现横向滚动条时
3. 容器内子元素纵向排序且容器纵向会出现纵向滚动条时
4. 子元素不支持尺寸自适应时，比如内部卡片宽高是固定值，不支持适应，那单纯地修改容器尺寸并不会达到一个令人满意的自适应结果，一般来说图表、表格能够低成本地适配更多尺寸，文字类卡片难以进行广泛适配。

布局原理： 以横向布局为例，为了实现左右布局，目标是左侧宽度500px，右侧自适应撑满屏幕，则设置容器display: flex;，左侧子元素width: 500px;，右侧元素flex: 1;。如上操作即可达成左侧固定宽度，右侧自适应撑满的目的。

同样的，如果目标是实现宽度1:2:2的横向比例布局，容器宽度为1000px，此时可以设置容器display: flex;，三个元素分别设置flex: 1; flex: 2; flex: 2;，最终元素就会以1:2:2的尺寸比例进行分配。

在进行以上布局之后，如果容器尺寸发生变化，则会重新计算内部子元素的尺寸并马上更新。

二、使用方法 ​

1. 按照需要计算布局规则（怎么拆分空间，上下左右如何划分，每个空间的尺寸是怎么计算的，当容器尺寸变化时，哪些尺寸应该发生变化，哪些尺寸不能发生变化）
2. 按层级划分左右/上下布局，如上图可以先划分左右，再在左侧、右侧中分别划分上下，以达到布局的目的，为了四周边距的一致性，可以将边距设置在最外层的容器的内边距上。
3. 在布局基础上加入内容，再检查布局是否发生异常，应当合理控制内容和容器尺寸存在差异时的适配情况。

三、固定尺寸元素的大小被放大比例为1的元素压缩 ​

以左右布局为例，如果容器宽度为1000px，左侧固定宽度为400px，右侧放大比例为1，但是右侧元素内部设置了宽度为800px，此时页面基础所需宽度为400+800=1200px，但是容器宽度不足1200px，则会压缩左侧400px的尺寸，导致左侧内容宽度不足，可能引发样式错乱的问题。

解决方法：

1. 给左侧元素添加最小宽度min-width: 400px;
2. 给右侧元素添加宽度width:0;

四、放大比例的值并非只能是1 ​

放大比例的值是一个比例值，当有多个子元素同时设置了放大比例时，会将布局的剩余空间按照比例情况进行拆分，按比例将剩余空间分配给每个元素，比如： 左中右三个元素，左侧200px固定宽度，中间放大比例为1 且内部元素宽度500px，右侧放大比例为2 且内部元素宽度200px，此时容器宽度假设为1200px，扣除基础宽度（1200-200-500-200=300px），即剩余300px宽度可以被分配，则按照0:1:2的比例分配给三个元素，最终展示效果宽度为：200px、600px、400px。