使用Flexbox对齐图片遇布局问题，寻求解决方案

看起来你是想把这些图标和对应的标题分成两行整齐排列，但当前的结构和样式没达到预期效果，我来帮你调整一下：

问题分析 #

你现在把所有<img>和<h4>直接放在同一个flex容器里，既没设置flex-wrap: wrap让元素换行，也没把图标和对应标题分组，导致所有元素挤在一行。align-self在这里起不到作用，因为它只是调整单个flex项在交叉轴的对齐方式，没法帮你实现换行分组的布局。

解决方案 #

我们需要做两个关键调整：

• 重构HTML结构：把每个图标和对应的标题包裹成独立小组件，让每个组合成为单独的flex项
• 调整CSS样式：让flex容器允许换行，设置每个小组件的宽度来控制每行显示数量，同时让小组件内部垂直对齐

修改后的代码 #

HTML部分

<div class="clover-items">
  <div class="clover-items__container">
    <!-- 每个图标+标题封装为独立容器 -->
    <div class="clover-item">
      <img src="assets/images/cart_icon.png" alt="">
      <h4 class="icon_title">Over 100 business apps</h4>
    </div>
    <div class="clover-item">
      <img src="assets/images/check_mark_icon.png" alt="">
      <h4 class="icon_title">Real time reporting</h4>
    </div>
    <div class="clover-item">
      <img src="assets/images/check_icon.png" alt="">
      <h4 class="icon_title">Fast access to funds</h4>
    </div>
    <div class="clover-item">
      <img src="assets/images/lock_icon.png" alt="">
      <h4 class="icon_title">Card data is secure</h4>
    </div>
    <div class="clover-item">
      <img src="assets/images/person_icon.png" alt="">
      <h4 class="icon_title">U.S. Based 24/7 customer service</h4>
    </div>
  </div>
</div>

CSS部分

.clover-items { 
  margin: 0; 
  padding: 0 5%; 
}
.clover-items__container { 
  display: flex; 
  justify-content: space-around; 
  flex-wrap: wrap; /* 允许flex项自动换行 */
  gap: 1.5rem; /* 给小组件之间添加间距，优化视觉效果 */
}
.clover-item {
  display: flex;
  flex-direction: column; /* 让图标和标题垂直排列 */
  align-items: center; /* 内部元素水平居中 */
  text-align: center; /* 文字居中对齐 */
  width: 18%; /* 控制每行显示数量，可根据需求调整百分比 */
}
.icon_title {
  margin-top: 0.8rem; /* 给图标和标题之间添加间距 */
  margin-bottom: 0;
}

关键属性说明 #

• flex-wrap: wrap：这是实现两行布局的核心，让flex容器在空间不足时自动换行
• .clover-item的宽度设置：通过控制宽度决定每行容纳的项目数，你可以根据页面宽度和需求灵活调整
• flex-direction: column：让每个小组件内部的图标和标题垂直排列，匹配你目标图的样式

这样调整后，就能实现你想要的两行图标+文字对齐的效果啦。

内容的提问来源于stack exchange，提问作者skrippyfingaz