如何修复 Flexbox 导航中的不等宽度？

针对元素宽度不等的 Flexbox 进行故障排除

创建 Flexbox 导航布局时，在元素之间实现宽度的均匀分布至关重要。但是，有时您可能会遇到元素大小不同的问题。这可能是由于 flex-basis 的影响而出现的，该属性定义了 Flex 项目的初始大小。

默认 Flex-Basis

默认情况下，flex-basis 设置为 auto，这意味着弹性项目的初始大小由其内容大小决定。在您的示例中，文本内容较多的元素将获得更多空间，因为它们的 flex-basis 较大。

将 Flex-Basis 设置为零

为了确保等宽分布，您可以设置 flex-所有元素的基础为 0。这将重置它们的初始大小，允许根据 flex-grow 按比例划分任何剩余空间，默认设置为 1。以下是更新后的代码：

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

示例小提琴

此代码调整可实现所需的结果，其中 Flexbox 导航中的所有元素都具有相同的宽度：

[已更新Fiddle](https://fiddle.jshell.net/h2db4yxw/11/)

可视化

来自flexbox规范的下图说明了flex-basis的概念及其对元素的影响调整大小：

[flexbox 中的 flex-basis 示意图规范](https://www.w3.org/TR/css-flexbox-1/#flex-basis-property)

以上是如何修复 Flexbox 导航中的不等宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！