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

Question

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

例如：

css lang-css prettyprint-override">.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

Answer 1

如果项目的内容使列变大，则需要添加宽： 0以使列相等。

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

Answer 2

您可以添加flex-basis:100%来实现这一点。

更新示例

.header {
  display: flex;
}

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

为了获得更好的效果，您还可以使用flex:1获得相同的结果。

flex:1的简写形式与flex:1 10相同，相当于：

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

Answer 3

设置它们，使它们的flex基础为0（因此所有元素具有相同的起点），并允许它们增长：

flex: 1 1 0px

您的IDE或linter可能会提到度量单位“px”是冗余的。如果不使用它（如：flex:11 0），IE将无法正确呈现此内容。因此，@fabb的评论中提到，px需要支持Internet Explorer；