本文详解如何通过嵌套 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_moneyBrak prowizjicampaignBrak prowizjihandshakeBrak prowizji
? 关键要点总结：
- ✅ 不要混排不同语义元素：.square 和 .title 必须成对包裹，避免 Flex 外层误判布局流；
- ✅ 善用 gap 替代 margin：更可控、不触发外边距合并，且在 Flex/Grid 中原生支持；
- ✅ 移动端优先调整方向：@media (max-width: 768px) 中将 .font 设为 flex-direction: column，比对每个 .container 单独设置更高效；
- ⚠️ 注意字体链接重复引入（原始代码中 Material Symbols 被加载三次），建议保留一个即可；
- ? 进阶提示：如需支持描述文字（Desc），可在 .container 内继续添加 .desc 元素，并复用 column 布局逻辑。
这样结构清晰、样式解耦、响应自然，彻底告别“标题跑偏”的 Flexbox 困境。
