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

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 width

  到

  max-width

  (在

  .v

  课程)
• 改性

  .holder

  到

  wrap

  和

  space-around

  其子女
• 增加2个

  .v

  清晰类
• 移除

  <br>'s

• 和,

  最重要

  ，加

  flex: 0 0

  到

  .child

Flexbox几乎总是需要max-width被设置，这比width..取决于您如何需要.child任行为，修改flex-grow和flex-shrink在……里面flex: 0 0来满足你的需要。(结果)flex: 1 0看起来也不错)

.不需要Javascript.

更新这个CODELS Flexbox参考真的帮了我很大的了解联邦调查局.。

Answer 3

您的块之所以会这样运行，是因为CSS呈现。

在第一种情况下，在篡改中，浏览器不知道什么时候块变得太小而不适合它的内容。因此，它一直延伸到最大，然后呈现文本。

在最后一种情况下，您告诉浏览器在哪里中断，这样它就知道元素不应该变宽。

你能轻易解决的唯一方法就是自己设置断点。