如何使flexbox物品的尺寸相同？

我想使用具有一些相同宽度的项目的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

对其进行设置，使它们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是必需的。

您可以添加flex-basis: 100%以实现此目的。

更新示例

.header {
  display: flex;
}

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

对于它的价值，您也可以使用flex: 1相同的结果。

的简写flex: 1形式与相同flex: 1 1 0，等同于：

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

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

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

Adam（flex: 1 1 0）接受的答案非常适合宽度固定或由祖先确定的flexbox容器。您希望孩子们装满容器的情况。

但是，在某些情况下，您可能希望容器适合孩子，并且孩子的大小与最大孩子相同。您可以通过以下任一方法使flexbox容器适合其子容器：

• 设置position: absolute，而不设置width或right，或
• 把它放在一个包装里 display: inline-block

对于这样的Flexbox的容器，接受的答案确实不工作，孩子们不是同等大小。我认为这是flexbox的局限性，因为它在Chrome，Firefox和Safari中的行为相同。

解决方案是使用网格而不是flexbox。

演示：https : //codepen.io/brettdonald/pen/oRpORG

<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>

<div id="div0">
  <div>
    Flexbox
  </div>
  <div>
    Width determined by viewport
  </div>
  <div>
    All child elements are equal size with {flex: 1 1 0}
  </div>
</div>

<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>

<div class="wrap-inline-block">
<div id="div1">
  <div>
    Flexbox
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div2">
  <div>
    Flexbox
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>

<div class="wrap-inline-block">
<div id="div3">
  <div>
    Grid
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div4">
  <div>
    Grid
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

body {
  margin: 1em;
}

.wrap-inline-block {
  display: inline-block;
}

#div0, #div1, #div2, #div3, #div4 {
  border: 1px solid #888;
  padding: 0.5em;
  text-align: center;
  white-space: nowrap;
}

#div2, #div4 {
  position: absolute;
  left: 1em;
}

#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
  margin: 0.5em;
  color: white;
  background-color: navy;
  padding: 0.5em;
}

#div0, #div1, #div2 {
  display: flex;
}

#div0>*, #div1>*, #div2>* {
  flex: 1 1 0;
}

#div0 {
  margin-bottom: 1em;
}

#div2 {
  top: 15.5em;
}

#div3, #div4 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

#div4 {
  top: 28.5em;
}

我不是flex的专家，但是我通过将我正在处理的两个项目的基准设置为50％达到了目标。增长到1并缩小到0。

内联样式： flex: '1 0 50%',