Make container shrink

我想弄清楚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>

---

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.

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

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

You'll need a JavaScript solution (see here and here )... or CSS media queries (see here ).

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

---

The reason why your blocks behave like this is because of CSS rendering.

In the first case in you fiddle the browsers doesn't know when the block gets too small for it's content. So it keeps stretching until it reaches the maximum and then renders the text.

In your last case you tell the browser where to break so it knows that the element should not get wider.

The only way you can easily solve this is by setting the breaks yourself.

---

Have a good look at my Fiddle in which I changed:

.holder width to max-width (in .v classes)

modified .holder to wrap and space-around its children

added 2 more .v classes for clarity

removed the <br>'s

and, most importantly , added flex: 0 0 to .child

Flexbox almost always needs max-width to be set, which is more flexible than width . Depending on how you need the .child ren to behave, modify the flex-grow and flex-shrink in flex: 0 0 to meet your needs. (the result of flex: 1 0 looks nice too)

...no Javascript needed...

UPDATE The Codrops Flexbox Reference really helped me a lot understanding FBL...

链接地址: http://www.djcxy.com/p/75682.html

上一篇: Flexbox“证明内容”不起作用

下一篇: 使容器缩小