flexbox complex layout, without repeating the flexbox container div

Question

I am having hard time to create this layout, below is the layout I want to achieve with flexbox.

I tried but, this is the result I am getting. can someone help in to right direction

.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>

If you want to achieve this without restructuring your HTML I recommend looking into using CSS Grid instead of flexbox. Otherwise children 2/3 need a parent div, and children 6/7/8 need to be wrapped separately as well — Jason McFarlane, Sep 16 '19 at 13:15
Flexbox “works” in one main direction, so you’re going to have a hard time getting this to work without introducing any additional wrapper elements. As Jason said, grid would be better suited for this. — 04FS, Sep 16 '19 at 13:17
**without repeating the flexbox container div** - can't be done. Flexbox works in one dimension, as the others have said. You need to use a) grid, or b) repeat your wrapper. — Adam Jenkins, Sep 16 '19 at 13:22

score 2 · Accepted Answer · answered Sep 16 '19 at 13:37

This can be achieved using CSS Grid. I'd really recommend looking into it since this might seem a bit confusing. It would only do you good to read about yourself since you'd probably experience trouble as soon as you want something changed.

CSS-Tricks made a very compelling and thorough guide to css grid. Give that a readthrough and you should be able to recreate this yourself.

.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>

flexbox complex layout, without repeating the flexbox container div

1 Answers1