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

查看：33
本文介绍了flex-wrap 在嵌套的 flex 容器中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在本例中，当屏幕宽度较小时，我预计蓝色和红色框会环绕，因为青色框设置为 flex-wrap.

然而，这并没有发生.为什么这不起作用?

代码如下:

.foo,.foo1，.foo3 {颜色:#333；文本对齐:居中；填充:1em；背景:#ffea61；框阴影:0 0 0.5em #999；显示:弹性；}.foo1 {背景:绿色；宽度:200px；弹性:1 1 100%；}.foo2 {背景:粉红色；显示:弹性；填充:10px；}.foo3 {背景:青色；flex-wrap: 包裹;}.bar1,.bar2 {背景:蓝色；宽度:50px；高度:30px；}.bar2 {背景:红色；}.柱子 {显示:弹性；弹性方向:列；flex-wrap: 包裹;背景:橙色；高度:150px；}

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

<div class="foo1"></div>

详情请见以下链接:http://codepen.io/anon/pen/vxExjL

解决方案

这可能是 column wrap flex 容器的错误.青色框拒绝收缩，防止红色框包裹.

您可以为第二列或 .foo2 或 .foo3 设置宽度，这将强制项目换行.但这可能不是您想要的.

在这种情况下，一种解决方法是不使用 column wrap.坚持 row nowrap:

.column {显示:弹性；背景:橙色；高度:150px；}.foo,.foo1，.foo3 {显示:弹性；对齐内容:居中；颜色:#333；文本对齐:居中；填充:1em；背景:#ffea61；框阴影:0 0 0.5em #999；}.foo {弹性:1；}.foo1 {弹性:0 0 200px；背景:绿色；}.foo2 {显示:弹性；背景:粉红色；填充:10px；}.foo3 {flex-wrap: 包裹;边距:0 自动；背景:青色；}.bar1,.bar2 {背景:蓝色；宽度:50px；高度:30px；}.bar2 {背景:红色；}

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

<div class="foo1"></div>

修改后的代码笔

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?

Here is the code: 

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

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

解决方案

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.

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.

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>

revised codepen

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆