本文详解如何通过 flex-flow: row wrap 与 flex: 1 1 100% 控制 Flex 容器内元素流向，使标题独占一行、三个地址卡片均匀横向排列，解决常见多列布局错位问题。
本文详解如何通过 `flex-flow: row wrap` 与 `flex: 1 1 100%` 控制 flex 容器内元素流向，使标题独占一行、三个地址卡片均匀横向排列，解决常见多列布局错位问题。
在构建类似“Cozy Tea”项目中的 Locations 区域时，一个典型需求是：标题（）单独居中显示在顶部，下方三组地址信息（.locations-box）以等宽三列形式水平排列，并整体居中对齐
。但仅用 display: flex 默认的 row nowrap 行为会导致所有子元素（包括
和三个 .locations-box）强行挤在同一行，破坏视觉结构。
关键在于明确 Flex 布局的两层控制逻辑：
- 容器层（.Locations）：需启用换行能力，使用 flex-flow: row wrap（等价于 flex-direction: row; flex-wrap: wrap），允许子项在空间不足时自动折行；
-
项目层（.Locations h2）：需强制其占据整行宽度，避免与后续卡片并列。通过 flex: 1 1 100% 实现——其中 1 1 100% 分别对应 flex-grow、flex-shrink 和 flex-basis，即“可伸缩、可收缩、初始宽度为父容器 100%”，从而确保
独占一行且水平居中。
优化后的完整 CSS 如下：
.Locations {
background-image: url("img-locations-background.jpg");
height: 500px;
width: 1200px;
display: flex;
flex-flow: row wrap; /* ✅ 启用换行，为多行布局奠基 */
justify-content: center;
text-align: center;
margin-left: 300px;
font-size: 22px;
align-items: center;
}
.Locations h2 {
flex: 1 1 100%; /* ✅ 强制标题独占一行，宽度铺满 */
margin: 0 0 40px; /* 可选：增加标题与下方卡片的垂直间距 */
}
.locations-box {
flex: 0 0 calc(33.333% - 20px); /* ✅ 每个卡片占约 1/3 宽度，预留间隙 */
margin: 0 10px; /* 配合 calc() 实现左右等距间隙 */
background-color: rgba(255, 255, 255, 0.85);
padding: 20px;
border-radius: 4px;
}
注意事项：
- 若希望三列在小屏幕上堆叠为单列，可在媒体查询中将 .locations-box 的 flex-basis 改为 100% 并移除 margin；
- flex: 1 1 100% 不同于 width: 100%，它尊重 Flex 上下文，更可靠地实现流式占满；
- 避免对 .Locations 设置固定 height: 500px 后内容溢出，建议改用 min-height 或配合 align-content: flex-start 控制垂直对齐。
通过这一组合策略，即可精准达成标题居顶、三列地址卡片水平居中分布的理想效果，兼顾语义清晰性与样式可控性。
