如何设置flexbox中所有项目的初始宽度为相同值？

在实际项目中，很多开发者会遇到以下痛点：

• Flex 容器里的子项宽度不统一。导致页面布局出现“缝隙”或“溢出”。
• 即使给了 width子项仍然被 flex-grow/flex-shrink 冲掉，视觉效果不可控。
• 浏览器默认的 min-width/min-height:auto 会强行保留内容最小尺寸，使得想让所有子项起始宽度相同的设定失效。
• 调试时常常找不到是哪一个属性在“抢走”了宽度。

从主要概念来看，flex-basis

flex-basis 定义了 Flex 项目在主轴方向上的「初始大小」。老实说，它只在 Flex 容器中生效。而且是后续 flex-grow/flex-shrink 的基准。

如果希望所有子项一开始拥有相同的宽度。只需要把这个基准统一设为相同的值，再配合适当的伸缩比例即可。