我需要一些关于 flexbox 的基本帮助.可能有人问过这个问题，但我找不到任何地方。
我有一个容器 div设置为 display: flex;有未知数量的 child ，像这样:
<div class="container">
<div class="child">First child</div>
<div class="child">Second child</div>
...
<div class="child">Nth child</div>
</div>
现在，我需要每个 child 都具有相同的宽度。为此，我想使用 flex: 0 0 ? .我的问题是我应该替换什么 ?和 ？在理想的世界中，我会设置:
flex: 0 0 calc(100/n)%;
哪里n将是 child 的数量。问题是，我不知道n (<div class="container"> 有多少 child )提前。
PS:我正在用 ReactJS 开发一个界面。为了更好的可读性，我只展示了 HTML 代码。欢迎所有解决方案，但仅 CSS 比 ReactJS 更受欢迎。
这个怎么样:
#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 使它们扩展到相同的宽度，而不管内容如何。