CSS Flexbox包装未调整大小以适合内容 [英] CSS flexbox wrap not resizing to fit contents

问题描述

一个简化的plunkr来显示问题: https://plnkr.co/edit/mHTHLEumQ04tInFVAz3z?p=preview

A simplified plunkr to show the problem: https://plnkr.co/edit/mHTHLEumQ04tInFVAz3z?p=preview

如果您调整右视口的大小，直到两个容器不再适合同一行，则右容器将移至新行.

If you resize the right viewport until the two containers no longer fit on the same row, right one moves to a new line.

但是，父级inline-flex容器的宽度不变，将顶部的"header"元素扔掉-"header"中的"button"应与下面容器中的最后一项正确对齐.

However the parent inline-flex container width does not change, throwing the top "header" element off - the "button" in "header" should be right aligned with the last item in the container below.

两个(或多个)项目的宽度固定，但它们之间没有空格.这些是唯一具有固定宽度或高度的元素.

The two (or more) items have fixed width but no space between them. Those are the only elements with fixed width or height.

当项目换行到新行(不使用js，纯HTML/CSS)时，如何强制flex容器的宽度适合/缩小?

How can I force the flex container width to fit/shrink when items wrap to a new row (without using js, pure HTML/CSS)?

.main-flex {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.flex-container {
  flex-grow: 1;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
}

<div style="margin-top: 100px;" class="main-flex">
  <div>
    <span>header</span>
    <span style="float:right">button</span>
  </div>
  <div class="flex-container">
    <div style="height: 400px; width:250px; border: 1px solid black;"></div>
    <div style="height: 400px; width:250px; border: 1px solid black;"></div>
  </div>
</div>

推荐答案

在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.

此处有更多详细信息: 在包装容器时使容器收缩以适合子元素

More details here: Make container shrink-to-fit child elements as they wrap

但是您不需要收缩容器即可使布局正常工作.可以通过对HTML和CSS进行一些调整来构建它.

But you don't need the container to shrink for your layout to work. It can be built with a few adjustments to your HTML and CSS.

.main-flex {
  display: inline-flex;
  flex-wrap: wrap;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

.flex-container>div {
  height: 400px;
  width: 250px;
  border: 1px solid black;
}

.flex-container:nth-child(2)>span {
  align-self: flex-end;
}

<div class="main-flex">
  <div class="flex-container">
    <span>header</span>
    <div></div>
  </div>
  <div class="flex-container">
    <span>button</span>
    <div></div>
  </div>
</div>

修订后的演示

这篇关于CSS Flexbox包装未调整大小以适合内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！