elementplus 实现10个弹性盒子，每行4个，每个盒子的上面放置图片下面放置文字

HTML代码：

<div class="container">
  <div class="item">
    <img src="image1.jpg">
    <p>Text 1</p>
  </div>
  <div class="item">
    <img src="image2.jpg">
    <p>Text 2</p>
  </div>
  <div class="item">
    <img src="image3.jpg">
    <p>Text 3</p>
  </div>
  <!-- 7 more items -->
</div>

CSS代码：

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

.item {
  flex-basis: 23%;
  margin-bottom: 20px;
  text-align: center;
}

.item img {
  width: 100%;
  height: auto;
}

.item p {
  margin-top: 10px;
}

解释：

- `.container`：定义弹性盒容器，使用 `flex-wrap: wrap` 让盒子换行，使用 `justify-content: space-between` 让盒子在容器内左右对齐并留有间隔。
- `.item`：定义弹性子盒，使用 `flex-basis: 23%` 让每个盒子占据容器的 23% 宽度，使用 `margin-bottom: 20px` 让盒子之间有 20px 的间隔，使用 `text-align: center` 让图片和文字都居中显示。
- `.item img`：调整图片的宽度为 100%，高度自适应。
- `.item p`：调整文字的样式。