Question

我正在尝试获取几个div来获取整个宽度，并在其个别宽度低于200像素时进行换行。这就是我所做的：

.box {
  width: 1100px;
  max-width: 100%;
  display: flex;
  box-sizing: border-box;
  flex-flow: row;
  flex-wrap: wrap;
}

.box>div {
  border: 1px solid #aaa;
  min-width: 200px;
  box-sizing: border-box;
  flex-grow: 1;
}

<div class="box">

  <div>
    Boite 1
  </div>
  <div>
    Boite 2
  </div>
  <div>
    Boite 3
  </div>

</div>

但它没有包装。有什么问题？

Answer 1

在宽度为100％/ 1100像素的容器中，您有三个具有200px min-width的弹性子项 - 只要总宽度不小于600px，它们就不会换行。

使窗口变窄或添加其他子项，然后您将看到包装

.box {
  width: 1100px;
  max-width: 100%;
  display: flex;
  box-sizing: border-box;
  flex-flow: row;
  flex-wrap: wrap;
}

.box > div {
  border: 1px solid #aaa;
  min-width: 200px;
  box-sizing: border-box;
  flex-grow: 1;
}

<div class="box">

  <div>
    Boite 1
  </div>
  <div>
    Boite 2
  </div>
  <div>
    Boite 3
  </div>
  <div>
    Boite 4
  </div>
  <div>
    Boite 5
  </div>
  <div>
    Boite 6
  </div>

</div>

Answer 2

如果容器中没有更多空间，div将换行。您的容器有width: 1100px;，因此它可以包含多个宽度为min-width: 200px;的子广告。

如果您向容器添加更多子项，它们将换行。

带有柔性包装的Flex div不会包裹

2 个答案: