CSS Flexbox 2列具有不同的高度

Question

我有以下代码：

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

我这样做的主要原因是代替2个单独的列，因为我希望以后能够使用order在移动设备中排列列。这在Flexbox中是否可行，还是有其他方式？

Answer 1

要使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来重新安排移动屏幕的布局。您可以简单地使用网格属性。

Answer 2

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

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

在max-height元素中添加了.d，因此高度不会填充空白区域。

希望这会有所帮助：）

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