在包装时使容器收缩以适应子元素 [英] Make container shrink-to-fit child elements as they wrap

问题描述

我想知道flexbox是如何工作的（应该工作吗？）如下：

I'm trying to figure out how flexbox works (supposed to work?…) for cases like below:

.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块）

The problem is that when there's enough space to fit elements, I'm getting a nice tight-fitted children, with even spacing between. (first, top div block)

然而，当孩子们没有足够的空间和文本开始包装时，所有的东西都会沿着一个奇怪的方向 - （第二个div块）

However, when there's not enough space and text inside children starts wrapping, it all kinda goes in a weird direction - children are not tightly fit anymore, and even though after wrapping, there's enough space around flex children, because there are not properly fit anymore, space-around doesn't really have a chance to work as well (second div block)

但是，如果我在自动换行发生的地方添加手动换行符，则一切都会显示为应该...（底部，第三个块）

However still, IF I add manual line breaks at places where the automatic line breaks occur, everything gets laid out as it "should"… (bottom, third block)

我想要的是总是有孩子紧紧地装在他们的盒子（黑色边框）内，并且无论什么空间，都会均匀地分布在它们之间，而无需添加手动换行符不是我的情况下的选项）

What I'd like is to always have children tightly fitted within their boxes (black borders), and whatever space is left, would be distributed evenly between them, without me having to add manual line breaks (which is not an option in my case)

是否有可能？

推荐答案

在CSS中，父容器不知道它的子包装的时间。因此，它会继续缩放其大小而不顾内部发生的情况。

In CSS, the parent container doesn't know when its children wrap. Hence, it continues scaling its size oblivious to what's going on inside.

换句话说，浏览器渲染初始级联上的容器。

Put another way, the browser renders the container on the initial cascade. It doesn't reflow the document when a child wraps.

这就是为什么容器不收缩包装较窄的布局。

That's why the container doesn't shrink-wrap the narrower layout. It just continues on as if nothing wrapped, as evidenced by the reserved space on the right.

水平空白的最大长度是内容/元素的长度（s）容器期望在那里。

The maximum length of the horizontal white space is the length of the content / element(s) that the container was expecting to be there.

在下面的演示中，可以看到随着窗口在水平方向上调整大小，空白可能会来临： DEMO

In the following demo, whitespace can be seen coming and going as the window is re-sized horizontally: DEMO

您需要一个JavaScript解决方案，

You'll need a JavaScript solution, or possibly CSS media queries, to achieve the fit you want.

在处理包装文字时，容器上的 text-align：right

When dealing with wrapping text, text-align: right on the container may be helpful in some cases.

以下是一些详细信息： http：/ /stackoverflow.com/a/32811002/3597276

Here are some more details: http://stackoverflow.com/a/32811002/3597276

这篇关于在包装时使容器收缩以适应子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！