Bootstrap中display:flex如何管控100%与50%宽度的flex子项

Flex子项宽度管控逻辑 #

你给出的示例里，flex布局对两个子项的宽度管控遵循以下规则：

• Flex子项的宽度计算默认先以flex-basis作为基准，默认flex-basis: auto时，会优先读取你给元素设置的width属性作为初始宽度基准，所以你给两个子项分别设置的width:100%、width:50%会作为初始计算的基准值。
• 两个子项的初始基准宽度总和（100%父容器宽度 + 50%父容器宽度 + 两个右外边距）已经超过了flex父容器的总宽度，这时候flex子项默认的flex-shrink: 1属性会生效，两个子项会按各自初始基准宽度的占比分配需要压缩的宽度，最终总宽度刚好撑满父容器。

举个具体的计算示例：假设父容器宽度为1000px，mr-3对应的边距为16px：

1. 两个子项初始总宽度 = 1000px + 500px + 16px * 2 = 1532px，超出父容器宽度 532px
2. 第一个子项（基准宽度1000px）压缩宽度 = 532px * (1000 / (1000+500)) ≈ 354.7px，最终宽度≈ 645.3px
3. 第二个子项（基准宽度500px）压缩宽度 = 532px * (500 / (1000+500)) ≈ 177.3px，最终宽度≈ 322.7px
4. 最终总宽度 = 645.3px + 322.7px + 32px = 1000px，刚好匹配父容器宽度

如果你希望子项严格按照你设置的width展示不被压缩，只需要给对应子项添加flex-shrink: 0属性即可，超出父容器的内容会默认溢出。

你提供的测试代码如下：

<div class="container mx-auto">
       <div class="d-flex">
           <div class="bg-red-300  w-100 mr-3">halo</div>
           <div class="bg-red-300  w-50 mr-3">halo</div>
       </div>
   </div>

场景示意图：

内容的提问来源于stack exchange，提问作者Denny Sugianto