在容器包装时使容器收缩以适合其子元素。

Question

在容器包装时使容器收缩以适合其子元素。

我正在努力弄清楚柔性盒是如何工作的(应该工作吗？…)对于以下情况：

.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中，父容器不知道其子容器何时包装。因此，它继续缩小它的大小，而忽略了里面发生的事情。换句话说，浏览器在初始级联上呈现容器。当子包时，它不会重新弹出文档。这就是为什么容器不收缩-包装狭窄的布局。它只会继续下去，就好像什么都没有包装一样，右边保留的空间就证明了这一点。水平空白的最大长度是容器期望在那里的元素的长度。在下面的演示中，当窗口水平调整大小时，可以看到空格的来来去去：演示您需要一个JavaScript解决方案(参见这里和这里).。或CSS媒体查询(请参见这里).在处理包装文本时，text-align: right在某些情况下，在容器上可能会有所帮助。

Answer 2

好好看看我的小提琴其中我改变了：.holder&nbsp;width到max-width(在.v课程)改性.holder到wrap和space-around其子女增加2个.v清晰类移除<br>'s和,最重要，加flex: 0 0到.childFlexbox几乎总是需要max-width被设置，这比width..取决于您如何需要.child任行为，修改flex-grow和flex-shrink在……里面flex: 0 0来满足你的需要。(结果)flex: 1 0看起来也不错).不需要Javascript.更新这个CODELS Flexbox参考真的帮了我很大的了解联邦调查局.。

Answer 3

您的块之所以会这样运行，是因为CSS呈现。在第一种情况下，在篡改中，浏览器不知道什么时候块变得太小而不适合它的内容。因此，它一直延伸到最大，然后呈现文本。在最后一种情况下，您告诉浏览器在哪里中断，这样它就知道元素不应该变宽。你能轻易解决的唯一方法就是自己设置断点。