使用Flexbox构建网格-如何设置多个项目/ Divs旁边和向下彼此？

Question

我想用Flexbox来构建我的网格，然后再加一点。如何设置一个盒子和向右边的多个盒子的一半大小的盒子1。方框2-5然后应该浮动到框1。

​

​

看到我的意思和它应该是什么样子吗？

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>

​