如何使用柔性盒进行加法布局？

Question

如何使用柔性盒(仅为柔性盒)来进行这样的盒(Div)布局？

​

​

​

​

Answer 1

你可以这样做：

​

.flex {
  align-items: center;
  display: flex;
}

.col { 
  margin: 0 5px;
}

.el {
  background-color: #000;
  height: 100px;
  margin: 10px 0;
  width: 100px;
}

<div class="flex">
  <div class="col">
    <div class="el"></div>
  </div>
  <div class="col">
    <div class="el"></div>
    <div class="el"></div>
  </div>
  <div class="col">
    <div class="el"></div>
  </div>
</div>

​

Answer 2

我提供了一个带有嵌套容器boxes_inside的变种，它是垂直构建的。

对于缩进，可以使用gap规则代替边距。

​

.boxes {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.boxes_inside {
  display: inherit;
  flex-direction: column;
  gap: 30px;
}

.box {
  background-color: green;
  width: 100px;
  height: 100px;
}

<div class="boxes">
    <div class="box"></div>

    <div class="boxes_inside">
        <div class="box"></div>
        <div class="box"></div>
    </div>

    <div class="box"></div>
</div>

​