本文详解如何通过嵌套 flexbox 正确组织图片（图标）与下方标题，解决标题错位到图标右侧的问题，并确保在桌面端三列并排、移动端自动转为竖排的响应式效果。
在使用 Flexbox 构建多图+标题的网格布局时，一个常见误区是将所有 .square（图标容器）和 .title（标题）平铺在同一级 .font 容器中——这会导致 Flex 默认的 row 方向将所有子元素横向排列，标题自然被挤到图标右侧，而非其正下方。
✅ 正确解法是语义化分组 + 嵌套 Flexbox：
为每组「图标 + 标题」创建独立的包裹容器（如 .container），让外层 .font 控制整体行布局（display: flex; flex-wrap: wrap），而每个 .container 内部使用 flex-direction: column 实现图标在上、标题在下的垂直堆叠，并通过 align-items: center 居中对齐。
以下是优化后的完整代码（已精简冗余样式，增强可维护性与响应式健壮性）：
<div class="main_txt">
<h3>Centrum Zarządzania <strong>Nieruchomościami</strong></h3>
</div>
<div class="font">
<div class="container">
<div class="square"><span class="material-symbols-outlined">attach_money</span></div>
<div class="title">Brak prowizji</div>
</div>
<div class="container">
<div class="square"><span class="material-symbols-outlined">campaign</span></div>
<div class="title">Brak prowizji</div>
</div>
<div class="container">
<div class="square"><span class="material-symbols-outlined">handshake</span></div>
<div class="title">Brak prowizji</div>
</div>
</div>
<style>
.font {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px; /* 推荐用 gap 替代 margin，更简洁可靠 */
padding: 20px 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
max-width: 360px; /* 限制单个卡片宽度，提升移动端适配性 */
}
.square {
border-radius: 25px;
width: 100%;
height: 222px;
background-color: #ab2e12;
display: flex;
align-items: center;
justify-content: center;
}
.material-symbols-outlined {
color: white;
font-size: 200px;
}
.title {
font-size: 24px; /* 移动端友好尺寸，避免过大溢出 */
color: white;
text-align: center;
margin-top: 12px;
font-weight: 500;
}
/* 响应式断点：小屏设备下强制单列，同时缩小图标尺寸 */
@media (max-width: 768px) {
.font {
flex-direction: column;
align-items: center;
}
.square {
height: 180px;
}
.material-symbols-outlined {
font-size: 160px;
}
.title {
font-size: 20px;
}
}
</style>? 关键要点总结：
- ✅ 不要混排不同语义元素：.square 和 .title 必须成对包裹，避免 Flex 外层误判布局流；
- ✅ 善用 gap 替代 margin：更可控、不触发外边距合并，且在 Flex/Grid 中原生支持；
- ✅ 移动端优先调整方向：@media (max-width: 768px) 中将 .font 设为 flex-direction: column，比对每个 .container 单独设置更高效；
- ⚠️ 注意字体链接重复引入（原始代码中 Material Symbols 被加载三次），建议保留一个即可；
- ? 进阶提示：如需支持描述文字（Desc），可在 .container 内继续添加 .desc 元素，并复用 column 布局逻辑。
这样结构清晰、样式解耦、响应自然，彻底告别“标题跑偏”的 Flexbox 困境。
