如何使用 flexbox 获得三列和两行 (1 x 2 x 2)

Question

如果可能的话，我想用 Flex 实现以下结果。知道如何使用 CSS 来完成，但对 Flex 不太熟悉。我之所以想在 flex 中这样做是为了强迫自己编写简洁且更易于维护的代码。

.banner {
  width: 20%;
  height: 100%;
  position: relative;
  float: left;
  overflow: hidden;
}

.item {
  height: 50%;
  width: 33.33%;
  float: left;
  position: relative;
}

.inner-item-block {
  height: 100%;
  width: 80%;
  float: left;
  position: relative;
}

.inner-line {
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center; /* center child elements */
}

<div class="item-block">
  <div class="banner banner3">
  </div>
  <div class="inner-item-block">
    <div class="item">
      <div class="inner-line">
      </div>
    </div>

    <div class="item">
      <div class="inner-line">
      </div>
    </div>

    <div class="item">
      <div class="inner-line">
      </div>
    </div>

    <div class="item">
      <div class="inner-line">
      </div>
    </div>
  </div>
</div>

Answer 1

如果您可以在父元素上设置固定高度，那么您可以使用 Flexbox 执行此操作。您可以将flex-direction: column 与flex-wrap: wrap 一起设置，并使第一个子元素占据高度的100%。

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.parent {
  display: flex;
  flex-direction: column;
  height: 100vh;
  flex-wrap: wrap;
}
.parent > div {
  flex: 0 0 50%;
  width: 33.33%;
  border: 1px solid black;
}
div.first {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="parent">
  <div class="first">First</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

创建此布局的新选项是Grid-layout，您只需在第一个子元素上设置grid-row: span 2。

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
.parent > div {
  border: 1px solid black;
}
div.first {
  grid-row: span 2;
}

<div class="parent">
  <div class="first">First</div><div></div><div></div><div></div><div></div>
  <div class="first">First</div><div></div><div></div><div></div><div></div>
</div>