在 Flex 布局中，直接设置子元素 width: 20% 无法按预期生效，是因为 Flex 项默认启用 flex-shrink: 1，会压缩内容以适应容器；需显式禁用收缩或改用 flex-basis + flex-shrink: 0，或切换为更可控的 Grid 布局。
在 flex 布局中，直接设置子元素 `width: 20%` 无法按预期生效，是因为 flex 项默认启用 `flex-shrink: 1`，会压缩内容以适应容器；需显式禁用收缩或改用 `flex-basis` + `flex-shrink: 0`，或切换为更可控的 grid 布局。
当你将 .offerings-row 设为 display: flex 后，其子元素（如 .offerings-icon）就成为 Flex 项（flex item），此时 CSS 中的 width 属性仅作为 flex-basis 的初始值参考，真正起作用的是 Flex 的三元组：flex-grow、flex-shrink 和 flex-basis。默认情况下，flex-shrink: 1 允许元素在空间不足时主动缩小——即使你写了 width: 20%，浏览器仍会根据文本内容、图标尺寸及剩余空间动态压缩该元素，导致两行图标宽度不一致（如第一行图标窄、第二行因文字较长被进一步挤压），破坏对齐。
✅ 正确做法是显式控制 Flex 缩放行为。推荐使用 flex 简写属性替代 width：
.offerings-icon {
flex: 0 0 20%; /* flex-grow: 0, flex-shrink: 0, flex-basis: 20% */
height: 125px;
display: flex;
justify-content: center;
align-items: center;
color: darkorange;
}
? 解析：
flex: 0 0 20%表示“不放大、不缩小、基准宽度为父容器的 20%”，完全锁定宽度，不受兄弟元素内容影响。此时.section-offerings的max-width: 1000px成为计算基准，20% 即稳定为200px（只要容器未被其他规则限制）。
⚠️ 注意事项：
- 避免混用
width和flex：若同时声明width: 20%与flex: 1，flex-basis会覆盖width，造成意外交互； - 确保父容器有明确宽度：
max-width本身不提供计算上下文，但.section-offerings已通过margin: 0 auto居中且受视口约束，实际宽度通常接近 1000px，可支撑百分比计算； - 图标字体（如 Font Awesome）需确保加载正常，否则空内容可能导致 flex 项塌陷。
✨ 更简洁的替代方案：使用 CSS Grid
若项目结构固定（图标 + 描述两列），Grid 是语义更清晰、行为更可预测的选择：
.offerings-row {
display: grid;
grid-template-columns: 2fr 8fr; /* 图标占 20%，描述占 80%，响应式友好 */
align-items: center;
gap: 1rem;
}
此时无需额外设置 .offerings-icon 的宽度——2fr 会严格按比例分配可用空间，且不会因内容长度变化而偏移，天然保持多行对齐。
? 总结：Flex 中“设了百分比却没生效”，本质是忽略了 Flex 的默认收缩机制。解决问题的关键不是换单位（如 vw），而是理解并显式管理 flex-shrink；对于布局意图明确的双栏结构，CSS Grid 往往比 Flexbox 更直观、更稳健。
