我试图弄清楚 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 & 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 & 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 &
<br>documents</div>
</div>
问题是,当有足够的空间来容纳元素时,我会得到一个漂亮的紧身儿童,它们之间的间距均匀。 (首先,顶部 div 块)
然而,当没有足够的空间并且 children 中的文本开始换行时,一切都朝着一个奇怪的方向发展 - children 不再紧密贴合,即使在换行之后,flex children 周围有足够的空间,因为不再合适, space-around 并没有真正有机会工作(第二个 div 块)
然而,如果我在自动换行符出现的地方添加手动换行符,一切都会按照它“应该”的方式布置……(底部,第三块)
我想要的是总是让孩子们紧紧地装在他们的盒子里(黑色边框),无论剩下什么空间,都会在他们之间平均分配,而我不必添加手动换行符(这在我的情况下不是一个选项)
有可能吗?…
原文由 Mikhail Kornienko 发布,翻译遵循 CC BY-SA 4.0 许可协议
在 CSS 中,父容器不知道它的子容器何时换行。因此,它会继续扩大其规模,而不会理会内部发生的事情。
换句话说,浏览器在初始级联上呈现容器。当孩子换行时,它不会重排文档。
这就是容器不收缩较窄布局的原因。它只是继续前进,就好像没有包裹任何东西一样,右侧的预留空间证明了这一点。
水平空白的最大长度是容器预期存在的元素的长度。
在下面的演示中,随着窗口水平调整大小,可以看到空格来来去去: DEMO
您将需要一个 JavaScript 解决方案(参见 此处 和 此处)…或 CSS 媒体查询(参见 此处)。
在处理环绕文本时,容器上的
text-align: right
在某些情况下可能会有所帮助。