如何使 flexbox 项目的大小相同？

Question

我想使用具有一些宽度相同的项目的 flexbox。我注意到 flexbox 是均匀地分配空间，而不是空间本身。

例如：

 .header {
  display: flex;
}

.item {
  flex-grow: 1;
  text-align: center;
  border: 1px solid black;
}

 <div class="header">
  <div class="item">asdfasdfasdfasdfasdfasdf</div>
  <div class="item">z</div>
</div>

第一项比第二项大很多。如果我有 3 个项目、4 个项目或 n 个项目，我希望它们都出现在同一行，每个项目的空间量相等。

有任何想法吗？

http://codepen.io/anon/pen/gbJBqM

原文由 Chet 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

设置它们，使它们的 flex-basis 是 0 （所以所有元素都有相同的起点），并允许它们增长：

 flex: 1 1 0px

您的 IDE 或 linter 可能会提到 the unit of measure 'px' is redundant 。如果你忽略它（如： flex: 1 1 0 ），IE 将无法正确呈现它。所以 px 需要支持 Internet Explorer，正如@fabb 的评论中提到的那样；

原文由 Adam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果项目的内容使其变大，您需要添加 width: 0 以使列相等。

 .item {
  flex: 1 1 0;
  width: 0;
}

详细信息： flex: 1 1 0 与 flex-grow: 1; flex-shrink: 1; flex-basis: 0; 相同，如果父容器不能为每个项目加在一起的原生大小提供足够的空间（没有空间增长），我们需要使 width: 0 为每个项目提供相同的成长起点。

原文由 Jason Song 发布，翻译遵循 CC BY-SA 4.0 许可协议