flex-wrap在嵌套的flex容器中不起作用 [英] flex-wrap not working in nested flex container

问题描述

在此示例中，我希望当屏幕宽度较小时，蓝色和红色框会自动换行，因为青色框设置为flex-wrap。

I expected the blue and red box to wrap when the screen width is small in this example, because the cyan box is set to flex-wrap.

但是，这没有发生。为什么这不起作用？

However, that's not happening. Why is this not working?

下面是代码：

.foo,
.foo1,
.foo3 {
  color: #333;
  text-align: center;
  padding: 1em;
  background: #ffea61;
  box-shadow: 0 0 0.5em #999;
  display: flex;
}

.foo1 {
  background: green;
  width: 200px;
  flex: 1 1 100%;
}

.foo2 {
  background: pink;
  display: flex;
  padding: 10px;
}

.foo3 {
  background: cyan;
  flex-wrap: wrap;
}

.bar1,
.bar2 {
  background: blue;
  width: 50px;
  height: 30px;
}

.bar2 {
  background: red;
}

.column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  background: orange;
  height: 150px;
}

<div class="column">
  <div class="foo1"></div>
  <div class="foo">
    <div class="foo2">
      <div class="foo3">
        <div class="bar1"></div>
        <div class="bar2"></div>
      </div>
    </div>
  </div>
  <div class="foo1"></div>
</div>

请在以下链接中查看详细信息： http://codepen.io/ anon / pen / vxExjL

Please see the details in the following link: http://codepen.io/anon/pen/vxExjL

推荐答案

这可能是列换行的错误 flex容器。青色框拒绝收缩，这阻止了红色框的包装。

This may be a bug with a column wrap flex container. The cyan box is refusing to shrink, which prevents the red box from wrapping.

您可以将宽度设置为第二列或 .foo2 或 .foo3 ，这将强制项目包装。

You could set a width to the second column or .foo2 or .foo3, and that will force the items to wrap. But that's probably not what you want.

一种解决方法是在这种情况下不使用列换行。坚持使用 row nowrap ：

One workaround is to not use column wrap in this case. Stick to row nowrap:

.column {
  display: flex;
  background: orange;
  height: 150px;
}

.foo,
.foo1,
.foo3 {
  display: flex;
  justify-content: center;
  color: #333;
  text-align: center;
  padding: 1em;
  background: #ffea61;
  box-shadow: 0 0 0.5em #999;
}

.foo {
  flex: 1;
}

.foo1 {
  flex: 0 0 200px;
  background: green;
}

.foo2 {
  display: flex;
  background: pink;
  padding: 10px;
}

.foo3 {
  flex-wrap: wrap;
  margin: 0 auto;
  background: cyan;
}

.bar1,
.bar2 {
  background: blue;
  width: 50px;
  height: 30px;
}

.bar2 {
  background: red;
}

<div class="column">
  <div class="foo1"></div>
  <div class="foo">
    <div class="foo2">
      <div class="foo3">
        <div class="bar1"></div>
        <div class="bar2"></div>
      </div>
    </div>
  </div>
  <div class="foo1"></div>
</div>

修订后的Codepen

这篇关于flex-wrap在嵌套的flex容器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！