如何使用 Flexbox 实现图标与标题垂直堆叠的响应式三列布局

本文详解如何通过嵌套 flexbox 正确组织图片（图标）与下方标题，解决标题错位到图标右侧的问题，并确保在桌面端三列并排、移动端自动转为竖排的响应式效果。

在使用 Flexbox 构建多图+标题的网格布局时，一个常见误区是将所有 .square（图标容器）和 .title（标题）平铺在同一级 .font 容器中——这会导致 Flex 默认的 row 方向将所有子元素横向排列，标题自然被挤到图标右侧，而非其正下方。

✅ 正确解法是语义化分组 + 嵌套 Flexbox：
为每组「图标 + 标题」创建独立的包裹容器（如 .container），让外层 .font 控制整体行布局（display: flex; flex-wrap: wrap），而每个 .container 内部使用 flex-direction: column 实现图标在上、标题在下的垂直堆叠，并通过 align-items: center 居中对齐。

以下是优化后的完整代码（已精简冗余样式，增强可维护性与响应式健壮性）：

  
Centrum Zarządzania Nieruchomościami



  
    attach_money
    Brak prowizji
  

  
    campaign
    Brak prowizji
  

  
    handshake
    Brak prowizji
  

? 关键要点总结：

• ✅ 不要混排不同语义元素：.square 和 .title 必须成对包裹，避免 Flex 外层误判布局流；
• ✅ 善用 gap 替代 margin：更可控、不触发外边距合并，且在 Flex/Grid 中原生支持；
• ✅ 移动端优先调整方向：@media (max-width: 768px) 中将 .font 设为 flex-direction: column，比对每个 .container 单独设置更高效；
• ⚠️ 注意字体链接重复引入（原始代码中 Material Symbols 被加载三次），建议保留一个即可；
• ? 进阶提示：如需支持描述文字（Desc），可在 .container 内继续添加 .desc 元素，并复用 column 布局逻辑。

这样结构清晰、样式解耦、响应自然，彻底告别“标题跑偏”的 Flexbox 困境。

# ai  # 进阶  # 可在  # 这会  # 而非  # 如需  # 多图  # 过大  # 设为  # 堆  # 排列  # display  # 在上  # column  # flex  # 移动端适配  # 平铺  # margin  # 外边距 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】