在包装时使容器缩小以适应子元素

Posted 2023-03-04

【中文标题】在包装时使容器缩小以适应子元素

【英文标题】：Make container shrink-to-fit child elements as they wrap

【发布时间】：2016-09-21 05:46:48

【问题描述】：

我正在尝试弄清楚 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 here

问题是，当有足够的空间来容纳元素时，我会得到一个很好的紧身孩子，它们之间的间距是均匀的。 （首先，顶部 div 块）

但是，当没有足够的空间和文本开始环绕子元素时，这一切都朝着一个奇怪的方向发展 - 子元素不再紧密贴合，即使在环绕之后，flex 子元素周围也有足够的空间，因为没有再合适不过了，空间周围并没有机会正常工作（第二个 div 块）

但是，如果我在自动换行符发生的地方添加手动换行符，所有内容都会按照“应该”进行布局......（底部，第三块）

我想要的是始终让孩子们紧紧地装在他们的盒子里（黑色边框），无论剩下多少空间，都会在他们之间平均分配，而我不必添加手动换行符（这不是一个选项就我而言）

有可能吗？…

【参考方案1】：

在 CSS 中，父容器不知道其子容器何时换行。因此，它会继续扩展其大小，而不会注意到内部发生的事情。

换句话说，浏览器在初始级联上呈现容器。当孩子换行时，它不会重排文档。

这就是容器不收缩包装较窄布局的原因。它只是继续，好像没有任何东西被包裹，右边的保留空间证明了这一点。

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

在以下演示中，可以看到随着窗口水平调整大小而出现空白：DEMO

您需要一个 javascript 解决方案（参见 here 和 here）...或 CSS 媒体查询（参见 here）。

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

【参考方案2】：

好好看看我改过的Fiddle：

.holder

width 到 max-width（在 .v 类中） 将

.holder

修改为wrap和space-around它的孩子 为了清晰起见，又添加了 2 个

.v

类 删除了<br>'s 并且，

最重要的是

，将flex: 0 0 添加到

.child

Flexbox 几乎总是需要设置max-width，这比width 更灵活。 根据您需要.children 的行为方式，修改flex: 0 0 中的flex-grow 和flex-shrink 以满足您的需求。 （flex: 1 0 的结果看起来也不错）

...无需 Javascript...

更新Codrops Flexbox Reference 真的帮助我了解 FBL...

【讨论】：

请问“FBL”代表什么？缩写使事情比现在更加混乱。我怀疑 Flex 的 F 和 Box 的 B，但我不知道其余的..

它代表“灵活的盒子布局”。我知道迟到的答案:)

对于任何想知道的人，flex: 0 0; 没有达到 OP 的要求；即使有足够的空间，它也会强制 flex 子级包裹他们的文本。比较两个小提琴中的顶部 flex 父级，那里有足够的水平空间，但每个元素的文本仍然换行。

【参考方案3】：

你的块之所以这样表现是因为 CSS 渲染。

在第一种情况下，浏览器不知道块何时变得太小而无法容纳它的内容。所以它会一直拉伸直到达到最大值，然后渲染文本。

在最后一种情况下，您告诉浏览器在哪里中断，以便它知道元素不应该变宽。

您可以轻松解决此问题的唯一方法是自己设置休息时间。

【讨论】：

谢谢！我担心可能会发生类似的事情......仍然希望存在一些聪明的黑客，因为它看起来很常见......

我们在工作中遇到了类似的问题，我们希望在文本旁边浮动一个图标：codepen.io/WartClaes/pen/grVQrz?editors=1100。只是我们还遇到了块总是呈现全宽但有很多空白的问题。

【参考方案4】：

如果您正在寻找纯 CSS 解决方案，您可以使用 width: 100px; 之类的东西来设置子元素的最小宽度，并使用 flex: auto; 使其增长。

示例：https://jsfiddle.net/ncvp7gzs/1

（请注意，这仅在 Chrome 上测试过）