css - 带有 flex-wrap 的 Flex div 不换行

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

你有三个 200px min-width 的 flex child ，每个 child 都在一个宽度为 100%/1100px 的容器中 - 只要总宽度不小于它们就不会换行600 像素。

使窗口变窄或添加额外的 child ，然后你会看到包装

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