使容器在包装时收缩以适合子元素-解网

问：

我试图弄清楚 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 在这里

问题是，当有足够的空间来容纳元素时，我会得到一个漂亮的紧身儿童，两者之间的间距均匀。（第一个，顶部 div 块）

然而，当没有足够的空间并且 children 内部的文本开始换行时，这一切都朝着一个奇怪的方向发展——孩子们不再紧密贴合，即使换行后，flex children 周围也有足够的空间，因为不再适合了，space-around 真的没有机会工作（第二个 div 块）

但是，如果我在发生自动换行符的地方添加手动换行符，那么一切都会按照“应该”的方式布局......（底部，第三块）

我想要的是始终让孩子们紧紧地放在他们的盒子里（黑色边框），无论剩下什么空间，都会在他们之间均匀分布，而我不必添加手动换行符（这在我的情况下不是一个选项）

有可能吗?...

HTML CSS 弹性框

@MichaelBenjamin这是我关于手头问题的封闭式问题。充当文本的容器。当文本换行时，容器会改变其高度以适合它（差异可以在我附加的两张图片中观察到），但实际上，它不想将其宽度缩小到换行文本的最长行。在这个例子中，flex box 也是如此（随着物品的包装而改变其高度）.item.internal-container

0赞 Michael Benjamin 11/18/2022

这是一个很好的观察。考虑发布一个完整的问题。如果你愿意，可以联系我。

5赞 Rene van der Lende 11/17/2016 #3

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

.holder 设置为（在类中）widthmax-width.v
将 .holder 修改为及其子项wrapspace-around
为清楚起见，又添加了 2 个 .v 类
删除了<br>'s
最重要的是，添加到 .childflex: 0 0

Flexbox 几乎总是需要设置，这比 . 根据您需要任的行为方式，修改和 in 以满足您的需求。（结果看起来也不错）max-widthwidth.childflex-growflex-shrinkflex: 0 0flex: 1 0

...无需 Javascript...

Codrops Flexbox 参考对于理解灵活框布局非常有用。

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

Make container shrink-to-fit child elements as they wrap

评论

评论

评论

评论