为何Flexbox布局中首个按钮无法占满容器全部宽度？

这是因为Flexbox的布局规则优先级高于普通的width设置，flex容器的子项（flex item）尺寸由Flex的核心属性（flex-grow/flex-shrink/flex-basis）主导，而非传统的块级元素宽度规则。

你的代码具体问题分析 #

先看你的代码：

<div style="display:flex;">
  <button style="width:100%;"> </button>
  <button style="flex-shrink: 0;"> </button>
  <button> </button>
</div>

这里三个按钮都是flex item，各自的行为如下：

• 第一个按钮的width:100%会被Flex解析为flex-basis: 100%（行布局下，width等价于flex-basis），表示它的初始基准宽度是容器的100%。
• 第二个按钮设置了flex-shrink:0，意味着它完全不会被压缩，会固定占用自身的固有宽度（由按钮默认样式或内容决定）。
• 第三个按钮是默认状态，flex-shrink:1，可以被压缩，但本身也有固有宽度。

当容器总宽度固定时，三个子项的总需求宽度（100%容器宽 + 第二个按钮宽度 + 第三个按钮宽度）已经超过了容器的可用空间。此时Flex会触发压缩逻辑：由于第二个按钮不能被压缩，第三个和第一个按钮（默认flex-shrink:1）会被按比例压缩，导致第一个按钮的实际宽度远小于100%容器宽。

解决办法 #

如果想让第一个按钮占满容器剩余的所有空间，别用width:100%，改用flex-grow:1即可：

<div style="display:flex;">
  <button style="flex-grow:1;"> </button>
  <button style="flex-shrink: 0;"> </button>
  <button> </button>
</div>

flex-grow:1的作用是让该子项占据容器中所有未被其他子项占用的剩余空间，自动适配其他按钮的宽度，完美实现“占满容器”的需求。

要是硬要保留width:100%，就得给第一个按钮也加flex-shrink:0，但这样会导致容器内容溢出，显然不是合理的布局方案。

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