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

If you want them all to order based on a single parent, you need to have them all become a child of the parent. Below is an example of how to achieve what you are looking for.

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

.box {
  height: 100px;
  width: 25%;
  border: 10px 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