show 4 divs in a row using flexbox

Question

I am trying to show 4 boxes in a line using below html. So One row should have 4 boxes. I have total 8 boxes, there will be 2 rows with 4 columns.

Answer 1

You can do it with some float (yes float!)

.box {
  height:100px;
  width:25%;
  border:3px solid red;
  box-sizing:border-box;
  float:left;
}

.parent {
  overflow:hidden; /* Clear float */
}

  
A Child
  

    
B Child 1
    
B Child 2
    
B Child 3
    
B Child 4
    
B Child 5
    
B Child 6
  
  
C Child

With flexbox you can approximate it like below:

.parent {
  display:flex;
  flex-wrap:wrap;
}
.parent > .box,
.child >.box {
  height:100px;
  width:25%;
  border:3px solid red;
  box-sizing:border-box;
}
.child:nth-child(2) {
  width:100%;
  display:flex;
  flex-wrap:wrap;
  margin:-100px 0; /* same value as height here */
}
.child:nth-child(2):before {
  content:"";
  width:25%;
}
.child:last-child {
  margin-left:auto;
}

  
A Child
  

    
B Child 1
    
B Child 2
    
B Child 3
    
B Child 4
    
B Child 5
    
B Child 6
  
  
C Child