我正在试图弄明白如何在如下情况下使用 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>
问题是,当有足够的空间,以适应元素,我得到了一个不错的紧密合适的孩子,甚至间隔。(首先,top div block)
然而,当没有足够的空间,孩子内部的文字开始包装,这一切有点奇怪的方向-孩子不再紧密适合,即使包装后,有足够的空间周围的弹性孩子,因为没有正确的适合,周围的空间不是真的有机会工作了(第二个 div 块)
然而,如果我在自动换行发生的地方添加了手动换行,那么所有的东西都会按照它“应该”的方式进行布局... ... (底部,第三块)
我希望孩子们总是紧紧地贴在他们的盒子里(黑色边框) ,不管留下什么空间,都要均匀地分布在他们之间,而不需要我增加手动换线(这在我的情况下不是一个选项)
有可能吗。