html - 使用 Flexbox 构建网格 - 如何设置多个元素/Div 并排放置？

Question

我想用 Flexbox 构建我的网格，但有点卡住了。如何设置一个盒子并朝向右侧的多个盒子，大小为盒子 1 的一半。然后盒子 2-5 应该向盒子 1 float 。

在 Scribble 中看到我的意思以及它应该是什么样子？

Answer 1

.wrapper {
  display: flex; /* Magic begins */
}
.left, .right {
  flex: 1; /* Distribute width equally */
}
.right {
  flex-wrap: wrap; /* Allow multiple lines */
}
.box {
  display: flex;
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
  width: calc(50% - 4px);
  margin: 1px 2px;
  background: #000;
  color: #fff;
}

<div class="wrapper">
  <div class="left box">
    Box 1
  </div>
  <div class="right wrapper">
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
  </div>
</div>