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

How to make flexbox items the same size?

提问by Chet

I want to use flexbox that has some number of items that are all the same width. I've noticed that flexbox distributes the space around evenly, rather than the space itself.

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

For example:

例如：

.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>

The first item is a lot bigger than the second. If I have 3 items, 4 items, or n items, I want them all to appear on the same line with an equal amount of space per item.

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

Any ideas?

有任何想法吗？

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

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

回答by Adam

Set them so that their flex-basisis 0(so all elements have the same starting point), and allow them to grow:

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

flex: 1 1 0px

Your IDE or linter might mention that the unit of measure 'px' is redundant. If you leave it out (like: flex: 1 1 0), IE will not render this correctly. So the pxis required to support Internet Explorer, as mentioned in the comments by @fabb;

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

回答by Josh Crozier

You could add flex-basis: 100%to achieve this.

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

Updated Example

更新示例

.header {
  display: flex;
}

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

For what it's worth, you could also use flex: 1for the same results as well.

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

The shorthand of flex: 1is the same as flex: 1 1 0, which is equivalent to:

的简写flex: 1与 相同flex: 1 1 0，相当于：

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

回答by Jason Song

You need to add width: 0to make columns equal if contents of the items make it grow bigger.

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

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

回答by Brett Donald

The accepted answer by Adam (flex: 1 1 0) works perfectly for flexbox containers whose width is either fixed, or determined by an ancestor. Situations where you want the children to fit the container.

Adam ( flex: 1 1 0)接受的答案非常适用于宽度固定或由祖先确定的 flexbox 容器。您希望孩子适合容器的情况。

However, you may have a situation where you want the container to fit the children, with the children equally sized based on the largest child. You can make a flexbox container fit its children by either:

但是，您可能会遇到这样的情况：您希望容器适合子项，子项的大小与最大的子项相同。您可以通过以下任一方式使 flexbox 容器适合其子项：

• setting position: absoluteand not setting widthor right, or
• place it inside a wrapper with display: inline-block

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

For such flexbox containers, the accepted answer does NOTwork, the children are not sized equally. I presume that this is a limitation of flexbox, since it behaves the same in Chrome, Firefox and Safari.

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

The solution is to use a grid instead of a flexbox.

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

Demo: https://codepen.io/brettdonald/pen/oRpORG

演示：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;
}

回答by Steve

Im no expert with flex but I got there by setting the basis to 50% for the two items i was dealing with. Grow to 1 and shrink to 0.

我不是 flex 方面的专家，但我是通过将我正在处理的两个项目的基础设置为 50% 来实现的。增长到 1 并收缩到 0。

Inline styling: flex: '1 0 50%',

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