如何用一个flexbox容器实现这个（图像里面）？

Question

如何只使用一个Flex容器来实现这一目标？每个方框都是<div>。

因为我只是为了大小均匀的孩子而解开它的灵活性？ 或者我必须左右包装进入自己的div？

帮助

HTML：

<div class="container">
  <div class="item double">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item square">6</div>
  <div class="item double">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
</div>

CSS：

.container {
  display: flex;
  width: 700px;
  flex-wrap: wrap;
}

.container div:not(:first-child) {
  flex-direction: column;
}

.item {
  color: white;
  background-color: #333;
  width: 50px;
  height: 50px;
  margin: 5px;
  padding: 5px;
  box-sizing: border-box;
}

.double  {
  width: 150px;
  height: 50px;
}

.square  {
  width: 200px;
  height: 200px;
}

Answer 1

要实现这一点，需要包装左右组元素，并将这些元素和flex容器组合在一起。

这是一个如何看起来像

的开始

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
}
.container .wrapper {
  flex: 1;
  min-height: 70vh;
  display: flex;
  flex-wrap: wrap;
}
.container .item {
  color: white;
  background-color: #333;
  margin: 5px;
  flex-basis: calc(50% - 10px);
}
.container .item.square,
.container .item.double {
  flex-basis: calc(100% - 10px);
}

＆＃13;

<div class="container">
  <div class="wrapper">
    <div class="item double">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <div class="wrapper">
    <div class=" item square">6</div>
  </div>
  <div class="wrapper">
    <div class="item double">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

当然可以使用中间包装器作为第6项，如下所示，尽管在第一个样本中维护代码要简单得多

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
}
.container .wrapper {
  flex: 1;
  flex-basis: 33.333%;
  min-height: 70vh;
  display: flex;
  flex-wrap: wrap;
}
.container .item {
  color: white;
  background-color: #333;
  margin: 5px;
  flex-basis: calc(50% - 10px);
}
.container .item.double {
  flex-basis: calc(100% - 10px);
}
.container .wrapper.square {
  color: white;
  background-color: #333;
  margin: 5px;
  flex-basis: calc(33.333% - 10px);
}

＆＃13;

<div class="container">
  <div class="wrapper">
    <div class="item double">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <div class="wrapper square">6
  </div>
  <div class="wrapper">
    <div class="item double">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;