Question

我有3行网格，就像这样

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

Flexbox堆叠在小型设备上

1 个答案: