Html Flexbox没有为元素提供相同的宽度

尝试一个flexbox导航，最多有5个项目，只有3个，但它没有在所有元素之间平均划分宽度

我在后面建模的教程是

无礼

*{
字体大小：16px；
}
.标签{
最大宽度：1010px；
宽度：100%；
身高：5雷姆；
边框底部：实心1px灰色；
保证金：06.5雷姆；
显示：表格；
表布局：固定；
}
.tabs ul{
保证金：0；
显示器：flex；
弯曲方向：行；
}
李先生{
柔性生长：1；
列表样式：无；
文本对齐：居中；
字体大小：1.313rem；
背景：蓝色；
颜色：白色；
身高：继承；
左：自动；
垂直对齐：顶部；
文本对齐：左对齐；
填充：20px 20px 20px 70px；
边框左上半径：20px；
边框：纯色1px蓝色；
光标：指针；
}
.tabs ul li.active{
背景：白色；
颜色：蓝色；
}
李：以前{
内容：“；
}

鸡肉面汤
花生酱
鱼

您链接到的文章中没有提到一个重要的部分，那就是

flex basis

。默认情况下，

flex-basis

是

auto

发件人：

如果指定的弹性基准是自动的，则使用的弹性基准是弹性项目的主尺寸属性的值。（这本身可以是关键字auto，它根据flex项目的内容调整其大小。）

每个弹性项目都有一个

弹性基础

，这有点像其初始大小。然后，所有剩余的可用空间按比例（基于

flex-grow

）分布在项目之间。对于

auto

，该基础是内容大小（或使用

宽度定义的大小，等等）。因此，在您的示例中，文本较大的项目总体上被赋予了更多的空间

如果希望元素完全均匀，可以设置
flex-basis:0
。这会将flex basis设置为0，然后任何剩余空间（由于所有Basise均为0，因此将为所有空间）将基于
flex grow
按比例分布

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

很好地说明了这一点

并使用您的小提琴。
要使用
Flex
创建宽度相等的元素，您应该设置为您的子元素（Flex元素）：

它将为行中的所有元素提供25%的宽度。它们不会一个接一个地增长和移动。
给你的桌子留出一个最小宽度，并用vw单位设置填充可能会有所帮助：放下flex grow，只做flex:1；它将为另外两个属性使用defaut值。这可能是一个相当尴尬的重复，因为它完全削弱了flex的好处。如果你要硬编码你的列大小，有更简单的方法来解决问题。这一点都没错。。若你们想拥有同样长度的盒子，当这一排的人都满了的时候，这些盒子就会被拆开。。你可以很容易地做到这一点。如果需要最小宽度，也可以设置最小宽度width@Kloar你是说这是FlexBox的唯一好处。。。当您需要相同的宽度时，它们当然仍然是有益的，例如响应性。而且，这并不是说FlexBox不容易？这对我在Safari上来说是一个废墟。关于这个答案，令人敬畏的是，你用这个例子解释flex的基础比整个互联网上的任何其他地方都好。我将联系麻省理工学院，向你推荐一个荣誉教授职位

是flex grow:1，

flex basis:0

组合的简写。如果有人想深入了解，我在网上看到了这篇很棒的文章：如果这对你不起作用，检查一个项目是否有不同的水平填充，那么这个解决方案不会使它们具有相同的宽度。

flex-basis: 25%;
flex-grow: 0;