Html 如何像这样对齐方框？

我想做的是下面的图片

我用stackflow做到了这一步。

但我不明白如何定位盒子 尽管我发现了一些信息。 接下来我该怎么办

<!-- html -->
 <div class="boxbox">
  <div class="box1">
    <img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
  </div>

  <div class="box2">
    <img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
  </div>

  <div class="box3">
    <img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
  </div>
</div>  


<!-- css -->

.boxbox{
  display: flex;
align-items: start;
  justify-content: space-between;
}

箱形物品
箱形物品
箱形物品
.盒子{
显示器：flex；
对齐项目：开始；
证明内容：之间的空间；
}

这是修复布局的一种简单方法

.boxbox{
显示器：flex；
对齐项目：开始；
证明内容：之间的空间；
}
img{
宽度：300px；
高度：300px；
}
.box1、.box2{
宽度：50%
}
.box3{
宽度：50%；
保证金：自动；
}

箱形物品
箱形物品
箱形物品

谢谢，这对我帮助很大。但我想知道flex wrap是如何工作的。