css - 堆叠在小型设备上的 Flexbox

Question

我有3行网格，是这样的

https://codepen.io/Ramlev/pen/pXaqdg

<div class="container">
  <div class="first">asd</div>
  <div class="second">asd</div>
  <div class="third">asd</div>
</div>

和样式表

.container {
  display: flex;
  flex-direction: row;
}

.first {
  flex: 1 0 250px;
  background-color: red;
  height: 400px;
}
.second {
  flex: 1 0 250px;
  background-color: green;
  height: 200px;
}
.third {
  flex: 1 0 250px;
  background-color: blue;
  height: 200px;
}

但是当我使用较小的设备时，我希望第三行位于第二行之下，并将这两行堆叠在第一行的右侧。

这有什么意义吗？

Answer 1

您可以通过删除 0 的 flex 收缩和 250px flex 基础来清理您的代码，因为您确实想要没有实际最小宽度的一半和三分之一。通过在第 2 列和第 3 列周围添加另一个包装器并使用媒体查询，您可以获得您所描述的内容。

如果第一列和第2列和第3列的包装器都将flex grow设置为1，则可以实现移动优先默认样式。

然后，一旦到达断点，将包装器的 flex-grow 属性设置为 2，使其成为第 1 列的两倍，并将其设置为显示 flex，从而停止堆叠第 2 列和第 3 列。

.container {
  display: flex;
  flex-direction: row;
}

.first {
  flex: 1;
  background-color: red;
  height: 400px;
}

.wrapper {
  flex: 1;
}

@media only screen and (min-width: 500px) {
  .wrapper {
    display: flex;
    flex: 2;
  }
}

.second {
  flex: 1;
  background-color: green;
  height: 200px;
}

.third {
  flex: 1;
  background-color: blue;
  height: 200px;
}

<div class="container">
  <div class="first">asd</div>
  <div class="wrapper">
    <div class="second">asd</div>
    <div class="third">asd</div>
  </div>
</div>