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

将flex-flow: wrap; 添加到您的弹性容器将解决您的问题。

flex-flow 是一个简写属性，因此请务必阅读documentation。

在.d 元素中添加了max-height，这样高度就不会填满空白区域。

希望这会有所帮助:)

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex-flow: 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%;
  max-height: 18px;
}

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

Answer 2

为了让 flex 列能够换行，您需要在容器上定义一个固定高度。否则，如果没有断点，列就没有理由换行。它只会将容器扩展为一列。

这里更详细地解释了这个问题：

• Is it possible for flex items to align tightly to the items above them?

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

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

Browser support is now pretty strong for CSS Grid.

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