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: 0 5px;
}

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

<div class="flex">
  <div class="col">
    <div class="el"></div>
  </div>
  <div class="col">
    <div class="el"></div>
    <div class="el"></div>
  </div>
  <div class="col">
    <div class="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;
}

<div class="boxes">
    <div class="box"></div>

    <div class="boxes_inside">
        <div class="box"></div>
        <div class="box"></div>
    </div>

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