How Do You Make Plus Layout With A Flexbox?

How can I make such a box (divs) layout with a flexbox (only flexbox)?

Solution 1:

You can do something like that:

.flex {
  align-items: center;
  display: flex;
}

.col { 
  margin: 05px;
}

.el {
  background-color: #000;
  height: 100px;
  margin: 10px0;
  width: 100px;
}

<divclass="flex"><divclass="col"><divclass="el"></div></div><divclass="col"><divclass="el"></div><divclass="el"></div></div><divclass="col"><divclass="el"></div></div></div>

Solution 2:

I offer a variant with a nested container boxes_inside, built vertically.

For indents, instead of margins, you can use the gap rule.

.boxes {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.boxes_inside {
  display: inherit;
  flex-direction: column;
  gap: 30px;
}

.box {
  background-color: green;
  width: 100px;
  height: 100px;
}

<divclass="boxes"><divclass="box"></div><divclass="boxes_inside"><divclass="box"></div><divclass="box"></div></div><divclass="box"></div></div>