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.

<div class="parent">
  <div class="child box1">A Child</div>
  <div class="child">
    <div class="box2">B Child 1</div>
    <div class="box3">B Child 2</div>
    <div class="box4">B Child 3</div>
    <div class="box5">B Child 4</div>
    <div class="box6">B Child 5</div>
    <div class="box7">B Child 6</div>
  </div>
  <div class="child box8">C Child</div>
</div>

it should be look like this

A-Child   Child1   Child2    Child3
Child4    Child5   Child6    C-Child

The css which i tried is

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


.parent>.child {
  flex: 1 1 20%;
}

.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 {
  height:100px;
  width:100px;
  border:10px solid red;
}

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;
}

<div class="parent">
  <div class="child box">A Child</div>
  <div class="child open">
    <div class="box">B Child 1</div>
    <div class="box">B Child 2</div>
    <div class="box">B Child 3</div>
    <div class="box">B Child 4</div>
    <div class="box">B Child 5</div>
    <div class="box">B Child 6</div>
  </div>
  <div class="child box">C Child</div>
</div>

Answer 2

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;
}

<div class="parent">
  <div class="box">A Child</div>

  <div class="box">B Child 1</div>
  <div class="box">B Child 2</div>
  <div class="box">B Child 3</div>
  <div class="box">B Child 4</div>
  <div class="box">B Child 5</div>
  <div class="box">B Child 6</div>

  <div class="box">C Child</div>
</div>

Answer 3

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 */
}

<div class="parent">
  <div class="child box">A Child</div>
  <div class="child">
    <div class="box">B Child 1</div>
    <div class="box">B Child 2</div>
    <div class="box">B Child 3</div>
    <div class="box">B Child 4</div>
    <div class="box">B Child 5</div>
    <div class="box">B Child 6</div>
  </div>
  <div class="child box">C Child</div>
</div>

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;
}

<div class="parent">
  <div class="child box">A Child</div>
  <div class="child">
    <div class="box">B Child 1</div>
    <div class="box">B Child 2</div>
    <div class="box">B Child 3</div>
    <div class="box">B Child 4</div>
    <div class="box">B Child 5</div>
    <div class="box">B Child 6</div>
  </div>
  <div class="child box">C Child</div>
</div>