我正试图弄清楚flexbox在以下情况下是如何工作的:

jsfiddle here

问题是，当有足够的空间来容纳元素时，我会得到一个很好的紧身儿童，两者之间的间距均匀。（第一个，顶部div块）

但是，当没有足够的空间，并且子块中的文本开始换行时，这一切就会朝着一个奇怪的方向发展--子块不再紧密匹配，即使在换行之后，flex子块周围有足够的空间，因为不再适当匹配，space-around实际上也没有机会工作（第二个div块）

然而，如果我在出现自动换行符的地方添加手动换行符，所有内容都会按“应该”的方式布局…（底部，第三块）

我希望孩子们总是紧紧地装在他们的盒子里（黑色边框），无论剩下的空间是什么，都将均匀地分布在他们之间，而我不必添加手动换行符（在我的情况下这不是一种选择）

有可能吗？…

---

顺晟科技：

如果您正在寻找一个仅限于CSS的解决方案，可以使用类似于设置子级的最小宽度的方法，以便使其增长。

示例:https://jsfiddle.net/ncvp7gzs/1

（注意这只在Chrome上测试）

在CSS中，父容器不知道其子容器何时换行。因此，它继续缩放其大小，而忽略了内部发生的事情。

换句话说，浏览器在初始级联上呈现容器。当子文档换行时，它不会重新流动文档。

这就是容器不收缩的原因--包装较窄的布局。它只是继续进行，就像没有任何东西被包装一样，右边的保留空间就证明了这一点。

水平空白的最大长度是容器期望所在的元素的长度。

在下面的演示中，可以看到空格随着窗口的水平调整大小而来来去去:demo

您需要一个JavaScript解决方案（请参见此处和此处)...或CSS媒体查询（请参阅此处)。

处理换行文本时，在某些情况下在容器上可能会有帮助。

请仔细查看我的fiddle更改的内容:

• 到（在类中）
• 将修改为及其子级
• 添加了另外2个类，以提高清晰度
• 已删除
• 和最重要的添加到

FlexBox几乎总是需要设置，它比。 根据您需要ren的行为方式，修改and以满足您的需要。（结果看起来也不错）

...不需要Javascript...

更新Codrops Flexbox引用确实帮助我很好地理解了FBL...

块出现这种行为的原因是因为CSS呈现。

在第一种情况下，浏览器不知道块何时变得太小，无法容纳内容。所以它一直拉伸直到达到最大值，然后呈现文本。

在最后一个例子中，您告诉浏览器在哪里中断，以便它知道元素不应该变得更宽。

您可以轻松解决这个问题的唯一方法是自己设置断点。