用css完成这个网格

Question

我可以使用flexbox完成此网格布局吗？让第一个元素占据2行高，然后继续它？

检查图片。

Answer 1

您可以通过将此布局分为2列来实现它，而第2列也将具有嵌套的Flexbox布局。

HTML结构：

<div class="container">
  <div class="col box1">1</div>
  <div class="col col2">
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">5</div>
  </div>
</div>

必要的样式：

.container {
  min-height: 100vh;
  display: flex;
}
.col {
  flex-grow: 1;
  color: #fff;
}
.col2 {
  flex-wrap: wrap;
  display: flex;
}
.col2 > div {
  flex-basis: 50%;
  flex-grow: 1;
}
.box1 {
  display: flex;
}

* {box-sizing: border-box;}
body {
  margin: 0;
}
.container {
  min-height: 100vh;
  display: flex;
}

.col {
  flex-grow: 1;
  color: #fff;
}

.col2 {
  flex-wrap: wrap;
  display: flex;
}

.col2 > div {
  flex-basis: 50%;
  padding: 10px;
  flex-grow: 1;
}

.box1 {
  background: brown;
  padding: 10px;
  display: flex;
}
.box2 {
  background: pink;
}
.box3 {
  background: black;
}
.box4 {
  background: yellow;
}
.box5 {
  background: royalblue;
}

<div class="container">
  <div class="col box1">1</div>
  <div class="col col2">
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">5</div>
  </div>
</div>

Answer 2

您可以使用此HTML结构，但需要在父div上设置固定高度。然后，您只需使用flex-direction: column和flex-wrap: wrap。

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
div div:first-child {
  flex: 0 0 100%;
  width: 50%;
  background: #880015;
}
div div:not(:first-child) {
  width: 25%;
  flex: 0 0 50%;
  border: 1px solid black;
}

＆＃13;

<div class="content">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

＆＃13;

＆＃13;

＆＃13;