我正在尝试弄清楚 flexbox 如何在以下情况下工作（应该如何工作？...）： .holder { width: 500px; background: lightgray; display: flex; flex-direction: row; justify-content:
我正在尝试弄清楚 flexbox 在以下情况下如何工作（应该如何工作？...）：
.holder {
width: 500px;
background: lightgray;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
}
.v2 {
width: 320px;
}
.child {
display: inline-block;
border: 1px solid black;
padding: 30px 0px;
text-align: center;
}<div class="holder">
<div class="child">At a glance</div>
<div class="child">After coverage ends</div>
<div class="child">Forms & documents</div>
</div>
<br>
<br>
<div class="holder v2">
<div class="child">At a glance</div>
<div class="child">After coverage ends</div>
<div class="child">Forms & documents</div>
</div>
<br>
<br>
<div class="holder v2">
<div class="child">At a
<br>glance</div>
<div class="child">After coverage
<br>ends</div>
<div class="child">Forms &
<br>documents</div>
</div>JSFiddle 在这里
问题是，当有足够的空间容纳元素时，我会得到一个紧密贴合的子元素，并且它们之间的间距均匀。（第一个，顶部 div 块）
但是，当没有足够的空间并且子元素内的文本开始换行时，一切都会朝着奇怪的方向发展 - 子元素不再紧密贴合，尽管换行之后，弹性子元素周围有足够的空间，但由于不再合适，周围的空间实际上也没有机会发挥作用（第二个 div 块）
但是，如果我在自动换行符出现的地方添加手动换行符，那么所有内容都会按照“应该”的方式布局……（底部，第三个块）
我希望的是让孩子们紧紧地呆在他们的盒子（黑色边框）里，剩下的空间会均匀分布在他们之间，而我不需要添加手动换行符（在我的情况下这不是一个选项）
这可能吗？
仔细看看 我修改过的 Fiddle
.holder width 至 max-width （在 .v 类中）
.holder 为 wrap 及其 space-around 子项
添加了 2 个 .v
<br>'s
flex: 0 0 到 .child
Flexbox 几乎总是需要 max-width 设置的，这比 更灵活 width 。根据您需要 .child ren 的行为方式，修改 flex-grow 和 flex-shr以k in flex: 0 0 满足您的需求。（ 的结果 flex: 1 0 看起来也不错）
...不需要 Javascript...
Codrops Flexbox 参考 对于理解灵活框布局非常有用。