Question

我想要实现的是4块布局。宽度为50％的2个块占据第一部分，而第二部分后面是2个其他块。

我正在使用flex，所以如果我这样做，以便flex-container占用100％的宽度和高度，那么在无包装时，50％的空间应该由这些块占用我的标记和CSS。

相反，它仍然包裹并占据一个片段

body {
  width: 100%;
  height: 100vh;
}
#container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.col {} 
.red {
  height: 50%;
  width: 50%;
  background-color: red;
}
.blue {
  height: 50%;
  width: 50%;
  background-color: cadetblue;
}
.aqua {
  height: 50%;
  width: 50%;
  background-color: aqua;
}
.yellow {
  height: 50%;
  width: 50%;
  background-color: yellow;
}

<!DOCTYPE html>
<html>
<body>

  <div id="container">

    <div class="red"></div>
    <div class="blue"></div>

    <div class="aqua"></div>
    <div class="yellow"></div>

  </div>

</body>
</html>

这是我想要实现的目标的图像。 Click here for the flex box model i want

Answer 1

您需要使用wrap代替nowrap并使用flex: 0 0 50%代替width: 50%。

flex: 0 0 50%代表：

flex-grow: 0：div的增长不会超过其基础
flex-shrink: 0：div的收缩率不会超过其基础
flex-basis: 50%：框的基本大小是其flex父级的50％

body {
  width: 100%;
  height: 100vh;
}
#container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.col {} 
.red {
  height: 50%;
  max-width: 50%;
  flex: 0 0 50%;
  background-color: red;
}
.blue {
  height: 50%;
  max-width: 50%;
  flex: 0 0 50%;
  background-color: cadetblue;
}
.aqua {
  height: 50%;
  max-width: 50%;
  flex: 0 0 50%;
  background-color: aqua;
}
.yellow {
  height: 50%;
  max-width: 50%;
  flex: 0 0 50%;
  background-color: yellow;
}

<!DOCTYPE html>
<html>
<body>

  <div id="container">

    <div class="red"></div>
    <div class="blue"></div>

    <div class="aqua"></div>
    <div class="yellow"></div>

  </div>

</body>
</html>

即使在nowrap之后，Flex也能保持包装？

1 个答案: