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

Answer 1

对其进行设置，使它们flex-basis成为0（因此所有元素都具有相同的起点），并允许它们增长：

flex: 1 1 0px

您的IDE或linter可能会提到这一点the unit of measure 'px' is redundant。如果将其省略（如flex: 1 1 0：），则IE将无法正确呈现此内容。因此px，如@fabb的评论中所述，支持Internet Explorer是必需的。