Flexbox - 根据项目总数设置弹性项目的大小

Question

我需要一些与flexbox相关的基础帮助。可能已经有人问过这个问题，但我在任何地方都没有找到。

我有一个容器div，设置为display: flex;，其具有未知数量的子元素，如下所示:

<div class="container">
 <div class="child">First child</div>
 <div class="child">Second child</div>
     ...
 <div class="child">Nth child</div>
</div>

现在，我需要每个子元素拥有相同的宽度。为了实现这个目标，我考虑使用 flex: 0 0 ?。我的问题是应该用什么替换?？在理想情况下，我会设置：

flex: 0 0 calc(100/n)%;

这里的n代表子元素数量。问题是，我事先不知道<div class="container">有多少子元素。

PS：我正在开发一个ReactJS的界面。出于更好地可读性，我只展示了HTML代码。欢迎提供所有解决方案，CSS-only的方案可优先考虑。

- sleepydrmike

Answer 1

这样怎么样？

#container {
  display: flex;
  border: 4px solid black;
  padding: 3px;
  width: 600px;
}

.box {
  flex: 1 1 0px;
  border: 2px solid grey;
  padding: 2px;
}

<div id="container">
  <div class="box">We choose to go to the Moon...We choose to go to the Moon in this decade and do the other things, not because they are easy, but because they are hard.</div>
  <div class="box">Hello World</div>
  <div class="box"></div>
  <div class="box">Never Gonna Give You Up, Never Gonna Let You Down</div>
 </div>

flex: 1 1 0px是以下简写形式：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0px;

flex-basis 会将所有元素的初始宽度设置为零，然后通过 flex-grow 和 flex-shrink 的等量扩展使它们达到相同的宽度，而不考虑内容。

- Robson

---

非常感谢。它可以工作，但我真的说不清为什么... ¯_(ツ)_/¯ - sleepydrmike

这真是魔法。我在答案末尾添加了一点解释。 - Robson

Answer 2

我认为 flex-grow: 1 就足以让所有子元素平等地增长以占用可用空间。

如果您想使用简写的 flex:，可以跳过最后一个属性（basis）。这将使其具有值 auto，并且只要 flex-grow 设置为 1，它就具有相同的效果。

.parent{
display:flex;
flex-direction: row;
background: green;
}
.parent div{
background: yellow;
flex-grow: 1;

/*flex:1 0;*/
}

<div class="parent">
<div>A</div>
<div>A</div>
<div>A</div>
<div>A</div>
<div>A</div>
<div>A</div>
<div>A</div>
<div>A</div>
<div>A</div>
<div>A</div>
</div>

- Tushar Shahi

---

我尝试过这个，但它不起作用。将所有的 A 替换为不同长度的单词。flex-grow 属性将分配“剩余空间”，而不是子元素的实际宽度。至少在我尝试时是这样的。 - sleepydrmike