как выровнять коробки вот так?

Question

я хочу сделать картинку ниже

and i made it to this far, using stackflow.

but i could't understand about positioning boxes even though found some infos. what should i do next?

<!-- html -->
  

артикул коробки артикул в коробке артикул в коробке .boxbox {дисплей: гибкий; align-items: start; justify-content: пробел между; }

Answer 1

Это один из простых способов исправить ваш макет.

.boxbox{
  display: flex;
align-items: start;
  justify-content: space-between;
}
img{
width:300px;
height:300px;
}
.box1,.box2{
width:50%
}
.box3{
width:50%;
margin:auto;
}

<div class="boxbox">
  <div class="box1">
    <img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
  </div>

  <div class="box2">
    <img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
  </div>
</div>
<div class="boxbox">
  <div class="box3">
    <img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
  </div>
</div>

Или используя flex

.boxbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box1,
.box2,
.box3 {
  flex-basis: 50%;
  min-height: 100px;
}

img {
  width: 300px;
  height: 300px;
}

.box3 {
  margin: auto;
}