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 容器将解决您的问题。

flex-flow 是 shorthand 属性，因此请务必阅读 documentation.

向 .d 元素添加了 max-height，因此高度不会填充空白 space。

希望这对您有所帮助:)

.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

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

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

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>

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

CSS Flexbox 2列不同高度

CSS Flexbox 2 columns with different heights

html

css

flexbox

css-grid