这图片中的这种布局该怎么实现啊

这种布局没写过，没有思路，也想不到什么方法，不知道咋整了，前端布局

flex 布局，多个div 分布在同一直线。以下是一个基于flex布局的简单示例： HTML代码：

<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> 

CSS代码：

.container { display: flex; justify-content: space-between; } 
.item { width: 100px; height: 100px; background-color: red; margin-right: 20px; }

这个例子中，我们创建了一个名为“container”的容器，它包含了三个名为“item”的项目。我们将容器的display属性设置为flex,并使用justify-content属性将项目之间的空间平均分配。每个项目都有一个宽度和高度，并且它们的背景颜色都是红色。最后，我们使用margin-right属性在每个项目之间添加了一些间距。