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

This is possible with display:contents but support for that property value is poor or buggy at present.

.parent {
  display: flex;
  flex-wrap: wrap;
}

.open {
  display: contents;
}

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

  
A Child
  

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