Question

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

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

然而，父内联 - 柔性容器宽度不会改变，抛出顶部＆＃34;标题＆＃34;元素关闭 - ＆＃34;按钮＆＃34; in＆＃34; header＆＃34;应该与下面容器中的最后一项正确对齐。

两个（或更多）项目具有固定宽度但它们之间没有空格。这些是唯一具有固定宽度或高度的元素。

当项目换行到新行时（如果不使用js，纯HTML / CSS），如何强制Flex容器宽度适合/缩小？

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

在CSS中，父容器不知道其子包装的时间。因此，它继续扩大其规模，不知道内部发生的事情。

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

这就是为什么容器没有收缩包装较窄的布局。它只是继续，似乎没有任何包裹，正如右边的保留空间所证明的那样。

此处提供更多详细信息： Make container shrink-to-fit child elements as they wrap

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

revised demo

CSS flexbox wrap不会调整大小以适应内容

1 个答案: