Question

在下面的示例中，当我为包装器设置宽度时，父级flex容器不再可以使用flex-wrap属性。顶部的两个盒子不会包装，但底部的盒子会包装。

<div class="wrapper">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>


  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
  </div>

.wrapper {
  width: 700px;
  margin: 0 auto;
  border: solid cadetblue 5px;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.child {
  height: 250px;
  min-width: 250px;
  max-width: 300px;
  flex: 1;

  background: mistyrose;
  border: solid goldenrod 2px;
  margin: 30px;
}

Answer 1

您提出的“问题”是设计使然；您为父级指定一个width，其宽度足以让您的孩子完全包含在其中（两个700px个孩子的300px容器）。 flex-wrap仅在容器没有足够的空间容纳元素时才导致元素溢出。在您的示例中，有。

要以响应方式强制溢出，可以在父级上指定一个狭窄的width
（这会导致所有视口溢出）：

.wrapper {
  width: 400px;
  margin: 0 auto;
  border: solid cadetblue 5px;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.child {
  height: 250px;
  min-width: 250px;
  max-width: 300px;
  flex: 1;
  background: mistyrose;
  border: solid goldenrod 2px;
  margin: 30px;
}

<div class="wrapper">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

或改用max-width
（仅在狭窄的视口上会溢出）：

.wrapper {
  max-width: 700px;
  margin: 0 auto;
  border: solid cadetblue 5px;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.child {
  height: 250px;
  min-width: 250px;
  max-width: 300px;
  flex: 1;
  background: mistyrose;
  border: solid goldenrod 2px;
  margin: 30px;
}

<div class="wrapper">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

当父级具有设置的宽度时，Flex-wrap属性不响应

1 个答案: