解决flex布局导致子元素的宽度无效的问题

Posted 2023-04-02

参考技术A 在日常开发中可能会遇到父元素设置flex布局，子元素再去设置宽度无效的问题

当子元素的宽度总和小于父元素的宽度的时候，是有效的。但是当子元素宽度总和大于父元素宽度的时候。子元素的宽度就自适应了。
造成此问题的原因是因为，felx布局下有一个属性flex-shrink

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。0代表不会收缩

解决办法
1.子元素设置

2.子元素使用min-width代替width (此方法一般起不到很大的作用，只能解决宽度失效的问题，但会带来很多副作用：比如当子元素内容超出长度是，子元素的宽度就不再固定)

3.子元素设置

完美解决：flex布局中设置宽度被压缩的问题

问题描述：

在父级中设置了display:flex;父元素宽度不够的时候，子元素就算设置的宽度，也会被压缩；

产生原因：

当子元素设置固定宽度，如果整体宽度不足时，会把固定宽度给压缩

解决方法: 给固定宽度的元素添加flex-shrink:0

flex-shrink:0;

实例解析：

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

本例中A、B、C 显式定义了 flex-shrink 为 1，D、E 定义了 flex-shrink 为 2，所以计算出来总共将剩余空间分成了 7 份，其中 A、B、C 占 1 份，D、E 占 2 份，即1:1:1:2:2

我们可以看到父容器定义为 500px，子项被定义为 120px，子项相加之后即为 600 px，超出父容器 100px。那么超出的 100px 需要被 A、B、C、D、E 消化 通过收缩因子，所以加权综合可得 100*1+100*1+100*1+100*2+100*2=700px。

于是我们可以计算 A、B、C、D、E 将被移除的溢出量是多少：

A 被移除溢出量：(100*1/700)*100，即约等于14px
B 被移除溢出量：(100*1/700)*100，即约等于14px
C 被移除溢出量：(100*1/700)*100，即约等于14px
D 被移除溢出量：(100*2/700)*100，即约等于28px
E 被移除溢出量：(100*2/700)*100，即约等于28px

最后A、B、C、D、E的实际宽度分别为：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px，此外，这个宽度是包含边框的。

<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>