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

我正在试图弄明白如何在如下情况下使用 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

问题是,当有足够的空间,以适应元素,我得到了一个不错的紧密合适的孩子,甚至间隔。(首先,top div block)

然而,当没有足够的空间,孩子内部的文字开始包装,这一切有点奇怪的方向-孩子不再紧密适合,即使包装后,有足够的空间周围的弹性孩子,因为没有正确的适合,周围的空间不是真的有机会工作了(第二个 div 块)

然而,如果我在自动换行发生的地方添加了手动换行,那么所有的东西都会按照它“应该”的方式进行布局... ... (底部,第三块)

我希望孩子们总是紧紧地贴在他们的盒子里(黑色边框) ,不管留下什么空间,都要均匀地分布在他们之间,而不需要我增加手动换线(这在我的情况下不是一个选项)

有可能吗。

28981 次浏览

块之所以这样运行是因为 CSS 呈现。

在第一种情况下,浏览器不知道什么时候块对于它的内容来说变得太小了。所以它一直拉伸,直到达到最大值,然后呈现文本。

在上一个示例中,告诉浏览器在哪里中断,这样它就知道元素不应该变宽。

解决这个问题的唯一方法就是自己设置休息时间。

在 CSS 中,父容器不知道其子容器何时换行。因此,它继续扩大自己的体积,而不知道里面发生了什么。

换句话说,浏览器在初始级联上呈现容器。当子包装时,它不会重新返回文档。

这就是为什么集装箱不收缩包装较窄的布局。它只是继续,好像什么也没有包装,证明了右边的保留空间。

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

在下面的演示中,当窗口水平调整大小时,可以看到来来去去的空白: 强 > DEMO

您将需要一个 JavaScript 解决方案(参见 这里这里) ... 或 CSS 媒体查询(参见 这里)。

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

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

  • .holder widthmax-width(在 .v类)
  • .holder基因修饰为 wrapspace-around基因的子代
  • 为了清晰起见,增加了2个 .v
  • 移除了 <br>'s
  • 然后,最重要的是,将 flex: 0 0加入到 .child

Flexbox 几乎总是需要设置 max-width,它比 width更灵活。 根据您需要 .children 的行为,修改 flex: 0 0中的 flex-growflex-shrink以满足您的需要。(flex: 1 0的结果看起来也不错)

不需要 Javascript。

Codrops Flexbox 参考文献对于理解柔性盒子布局是非常有用的。

如果您正在寻找一个纯 CSS 的解决方案,您可以使用类似于 width: 100px;的东西来设置子元素和 flex: auto;的最小宽度,以便它能够增长。

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

(注意,这只在 Chrome 上测试过)