具有不同高度的 CSS Flexbox 2 列

Question

我有以下代码：

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.a {
  background-color: red;
  width: 65%;
}

.b {
  background-color: green;
  width: 35%;
}

.c {
  background-color: blue;
  width: 65%;
  height: 100px;
}

.d {
  background-color: orange;
  width: 35%;
}

.e {
  background-color: teal;
  width: 65%;
}

.f {
  background-color: purple;
  width: 35%;
}

<div class="wrapper container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
  <div class="f">F</div>
</div>

我试图让 F 正好在 D 之下，就像这样：

我这样做而不是 2 个单独的列的主要原因是因为我希望以后能够使用order. 这在 Flexbox 中是可能的，还是有其他方法？

Answer 1

为了使弹性列换行，您需要在容器上定义固定高度。否则，如果没有断点，该列就没有理由换行。它只会将容器扩展为单个列。

这个问题在这里有更详细的解释：

• 弹性项目是否可以与其上方的项目紧密对齐？

使用网格解决方案可能会更好。

.wrapper {
  display: grid;
  grid-template-columns: 65% 35%;
  grid-template-areas: " a b "
                       " c d "
                       " c f "
                       " c . "
                       " c . "                       
                       " e . " ;}

.a { grid-area: a; background-color: red;    }
.b { grid-area: b; background-color: green;  }
.c { grid-area: c; background-color: blue; height: 100px; }
.d { grid-area: d; background-color: orange; }
.e { grid-area: e; background-color: teal;   }
.f { grid-area: f; background-color: purple; }

<div class="wrapper">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
  <div class="f">F</div>
</div>

浏览器现在对 CSS 网格的支持相当强大。

此外，该order属性适用于 Grid 和 Flex 布局。但您可能不需要order在网格中重新排列移动屏幕的布局。您可以简单地使用网格属性。