我正在尝试弄清楚 flexbox 如何在以下情况下工作(应该如何工作?...): .holder { width: 500px; background: lightgray; display: flex; flex-direction: row; justify-content:
我正在尝试弄清楚 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>
JSFiddle 在这里
问题是,当有足够的空间容纳元素时,我会得到一个紧密贴合的子元素,并且它们之间的间距均匀。(第一个,顶部 div 块)
但是,当没有足够的空间并且子元素内的文本开始换行时,一切都会朝着奇怪的方向发展 - 子元素不再紧密贴合,尽管换行之后,弹性子元素周围有足够的空间,但由于不再合适,周围的空间实际上也没有机会发挥作用(第二个 div 块)
但是,如果我在自动换行符出现的地方添加手动换行符,那么所有内容都会按照“应该”的方式布局……(底部,第三个块)
我希望的是让孩子们紧紧地呆在他们的盒子(黑色边框)里,剩下的空间会均匀分布在他们之间,而我不需要添加手动换行符(在我的情况下这不是一个选项)
这可能吗?
使容器在包装时收缩以适应子元素
下载声明:
本站所有软件和资料均为软件作者提供或网友推荐发布而来,仅供学习和研究使用,不得用于任何商业用途。如本站不慎侵犯你的版权请联系我,我将及时处理,并撤下相关内容!