css - 如何使 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>

第一项比第二项大很多。如果我有三个元素、四个元素或 n 个元素，我希望它们都出现在同一行上，并且每个元素的空间量相等。

有什么想法吗？

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

Answer 1

设置它们，使它们的 flex-basis 为 0(因此所有元素都有相同的起点)，并允许它们增长:

flex: 1 1 0px;

您的 IDE 或 linter 可能会提到度量单位“px”是多余的。如果您将其遗漏(例如:flex: 1 1 0)，IE 将无法正确呈现它。所以需要 px 来支持 Internet Explorer，正如@fabb 在评论中提到的那样；