在容器包装时使容器缩小到适合的子元素

Question

我想弄清楚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 &amp; 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 &amp; 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 &amp;
    <br>documents</div>
</div>

JSFiddle在这里

问题是,当有足够的空间来容纳元素时,我会得到一个很好的紧身儿童,两者之间的距离均匀.(首先,顶部div块)

然而,当没有足够的空间和儿童内部的文字开始包装时,这一切都在一个奇怪的方向 - 儿童不再紧密贴合,即使在包装后,柔性儿童周围有足够的空间,因为不再适合,空间也没有机会工作(第二个div块)

但是,如果我在自动换行发生的地方添加手动换行符,那么所有内容都会按"应该"排列...(底部,第三个块)

我想要的是始终将孩子紧紧地装在他们的盒子里(黑色边框),无论剩下什么空间,都会在它们之间均匀分布,而不必添加手动换行符(在我的情况下不是一个选项) )

有可能吗？...

Answer 1

在CSS中,父容器不知道其子项何时换行.因此,它继续扩大其规模,无视内部正在发生的事情.

换句话说,浏览器在初始级联上呈现容器.当孩子包裹时,它不会回流文件.

这就是为什么容器不收缩包装较窄的布局.它只是继续,似乎没有任何包裹,正如右边的保留空间所证明的那样.

水平空白区域的最大长度是容器期望在那里的元素的长度.

在下面的演示中,当窗口水平重新调整大小时,可以看到空白进出:DEMO

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

在处理包装文本时,text-align: right在某些情况下,容器可能会有所帮助.

Answer 2

好好看看我改变的小提琴：

• .holder width到max-width（在.v课堂上）
• 修改.holder为wrap和space-around它的孩子
• .v为清晰起见，增加了 2 个类
• 删除了 <br>'s
• 并且，最重要的是，添加flex: 0 0到.child

Flexbox 几乎总是需要max-width设置，比width. 根据您需要.children 的行为方式，修改flex-grow和flex-shrinkinflex: 0 0以满足您的需要。（结果flex: 1 0看起来也不错）

...不需要Javascript...

UPDATE的Codrops Flexbox的参考真的帮了我很多理解FBL ...