Flexbox没有给元素相等的宽度

Flexbox没有给元素相等的宽度

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

flex-basis

。默认

flex-basis

为

auto

。

如果指定的flex-basis是auto，则使用的flex基础是flex项目的main
size属性的值。（它本身可以是关键字auto，它会根据其内容来调整d性项目的大小。）

每个伸缩项目都有一个

flex-basis

类似于其初始大小的。然后，从那里开始，所有剩余的可用空间将按比例（基于

flex-grow

）分配在项目之间。使用时

auto

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

width

等）。因此，示例中总体上包含较大文本的项目将获得更大的空间。

如果希望元素完全均匀，可以设置

flex-basis:0

。这会将flex基础设置为0，然后将基于比例分配所有剩余空间（由于所有基础均为0，因此将为所有空间）

flex-grow

。

li {    flex-grow: 1;    flex-basis: 0;    }

规范中的这张图很好地说明了这一点。