柔性箱复杂布局，不重复柔性箱容器div

Question

我有困难的时间来创建这个布局，下面是我想要实现的柔性盒布局。

​

​

我试过了，但是，这是我得到的结果。有人能帮我找到正确的方向吗？

​

​

​

.flex{
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  width:100%;
}
.flex-child{
  width:30%;
  border:1px solid #000;
  height:100px;
}

.flex-child:nth-child(1){
  order: 1;
}
.flex-child:nth-child(2){
  order: 2;
  height:48px;
  flex-flow: column wrap;
}
.flex-child:nth-child(3){
  order: 3;
  height:48px;
  flex-flow: column wrap;
}
.flex-child:nth-child(4){
  order: 4;
}
.flex-child:nth-child(5){
  order: 5;
  width: 60%;
  height:150px
}
.flex-child:nth-child(6){
  order: 6;
  height:48px;
}
.flex-child:nth-child(7){
  order: 7;
  height:48px;
}
.flex-child:nth-child(8){
  order: 8;
  height:48px;
}
.flex-child:nth-child(9){
  order: 9;
}
.flex-child:nth-child(10){
  order: 10;
  width:50%;
}
.flex-child:nth-child(11){
  order: 11;
  width:50%
}

<div class="flex">
  <div class="flex-child"> child 1 </div>
  <div class="flex-child"> child 2 </div>
  <div class="flex-child"> child 3 </div>
  <div class="flex-child"> child 4 </div>
  <div class="flex-child"> child 5 </div>
  <div class="flex-child"> child 6 </div>
  <div class="flex-child"> child 7 </div>
  <div class="flex-child"> child 8 </div>
  <div class="flex-child"> child 9 </div>
  <div class="flex-child"> child 10 </div>
  <div class="flex-child"> child 11 </div>
</div>

​

Answer 1

这可以使用CSS网格来实现。我真的建议调查一下，因为这可能有点让人困惑。阅读有关自己的文章只会对你有好处，因为一旦你想要改变，你可能很快就会遇到麻烦。

CSS做了一个非常引人注目和彻底的css网格指南.再读一遍，你就可以自己重新创建它了。

​

.flex{
  display: grid;
  grid-template-columns: repeat(1fr, 6);
  grid-template-rows: auto;
  grid-template-areas:
    "child1 child1 child2 child2 child4 child4"
    "child1 child1 child3 child3 child4 child4"
    "child5 child5 child5 child5 child6 child6"
    "child5 child5 child5 child5 child7 child7"
    "child5 child5 child5 child5 child8 child8"
    "child9 child9 child9 child10 child10 child10"
    "child9 child9 child9 child10 child10 child10";
  grid-gap: 10px;
  width: 100%;
  min-height: 400px;
}
.flex-child {
  border:1px solid #000;
}

.flex-child {
  width: 100%;
  height: 100%;
}

.flex-child:nth-child(1){ grid-area: child1; }
.flex-child:nth-child(2){ grid-area: child2; }
.flex-child:nth-child(3){ grid-area: child3; }
.flex-child:nth-child(4){ grid-area: child4; }
.flex-child:nth-child(5){ grid-area: child5; }
.flex-child:nth-child(6){ grid-area: child6; }
.flex-child:nth-child(7){ grid-area: child7; }
.flex-child:nth-child(8){ grid-area: child8; }
.flex-child:nth-child(9){ grid-area: child9; }
.flex-child:nth-child(10){ grid-area: child10; }

<div class="flex">
  <div class="flex-child"> child 1 </div>
  <div class="flex-child"> child 2 </div>
  <div class="flex-child"> child 3 </div>
  <div class="flex-child"> child 4 </div>
  <div class="flex-child"> child 5 </div>
  <div class="flex-child"> child 6 </div>
  <div class="flex-child"> child 7 </div>
  <div class="flex-child"> child 8 </div>
  <div class="flex-child"> child 9 </div>
  <div class="flex-child"> child 10 </div>
</div>

​