Flex与flex-flex没有包装

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 in的容器中，有三个带有200 in min-width的flex子组件--只要总的宽度不小于600 in，它们就不会包装。

使窗口变窄或增加额外的子窗口，然后您将看到包装

​

.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;的子容器。

如果在容器中添加更多的子元素，它们将被包装。