你如何使用 flexbox 制作 plus 布局？答案

【问题标题】：How do you make plus layout with a flexbox?你如何使用 flexbox 制作 plus 布局？
【发布时间】：2021-01-20 14:32:09
【问题描述】：

如何使用 flexbox（仅 flexbox）制作这样的盒子（div）布局？

【问题讨论】：

标签： html css flexbox

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

这个答案也很有趣，谢谢！
@Lukas，你会让这些方块移动响应吗？
是的，我需要他们做出响应，我认为上面的解决方案（我打破了它背后的逻辑）会更好，你觉得呢？
@Lukas，就具体而言，解决方案彼此没有区别。但只有上面的解决方案使用缩进边距，并且在我的解决方案间隙中。这些块的移动自适应可以使用一些弹性规则来实现。甚至，也许，没有媒体查询。