如何使用flexbox创建此布局？

Question

我有一个像这样的div列表：

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

我正在尝试创建以下布局，最好使用flexbox，但我不知道如何使用。

Answer 1

您可以使用flexbox。

HTML

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 300px;
  flex-wrap: wrap;
}

.item {
  border: 2px solid #ddd;
  padding: 20px;
  background: grey;
  height: 50%;
  width: 25%;
  box-sizing: border-box;
}

.item:nth-child(1) {
  width: 50%;
  height: 100%;
}

演示：JSFiddle

Answer 2

正如Yaakov Ainspan建议的那样，你应该使用CSS Grid而不是flexbox来完成这项任务。

    .container{
        display: grid;
        grid-template-columns: 50% auto auto;
        grid-template-rows: auto auto;
        height: 200px;
    }
    
    .container div {
      border: 2px solid #eee;
    }
    
    .item1 {
        grid-row-start: 1;
        grid-row-end: 3;
    }

    <div class="container">
        <div class="item1">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>

Answer 3

弯曲太多，时间太少了。这就是人们推荐CSS网格的原因。当然，通过这种方式，我不得不改变HTML结构

api-token-auth/'

body {
  box-sizing: border-box;
}

.container {
  display: flex;
  width: 100%;
}

.left {
  flex: 1 1 50%;
  display: flex;
}

.left .item {
  flex: 1;
}

.right {
  flex: 1 1 50%;
  display: flex;
  flex-wrap: wrap;
}

.right .item {
  flex: 0 1 48%;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 1px solid black;
  margin: 1%;
}

.item:before {
  content: "";
  display: block;
  padding-top: 100%;
  float: left;
}