css - 我如何获得一个 flex 元素来清除它的所有 sibling ？

Question

我正在尝试实现一个两列的 flex，其中左列有很多 div，右列有一个高 div。我希望右栏位于 flexbox 的顶部，与左栏的第一个 div 内联。

但无论我尝试什么，右列 div 都与左列的最后一个 div 对齐。

有点难以解释，但这个 jsfiddle 说明了我的意思。

https://jsfiddle.net/sjf4evx5/1/

我希望蓝色 div 位于所有红色 div 旁边的顶部。

看起来应该很容易，但是......

Answer 1

CSS Flexbox 不能像处理 float 一样清除同级元素，所以如果要使用 flex 行方向，你需要包裹红色的，..

* {
  -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;  /* Firefox, other Gecko */
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid black;
}

.wrapper {
  flex-basis: 60%;
}

.sixty {
  height: 100px;
  background-color: red;
  border: 1px solid white;
}

.forty {
  flex-basis: 40%;
  background-color: blue;
  height: 1000px;
}

<div class="flex-container">
  <div class="wrapper">
    <div class="sixty"></div>
    <div class="sixty"></div>
    <div class="sixty"></div>
    <div class="sixty"></div>
    <div class="sixty"></div>
    <div class="sixty"></div>
    <div class="sixty"></div>
  </div>
  <div class="forty"></div>
</div>

.. 或者将 flex 方向更改为 column 并为容器指定一个高度，该高度不大于红色和蓝色高度的总和。

* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid black;
  height: 1000px;
}

.sixty {
  height: 100px;
  background-color: red;
  border: 1px solid white;
}

.forty {
  flex-basis: 1000px;
  background-color: blue;
}

<div class="flex-container">
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="forty"></div>
</div>