当使用 display: flex 时，子元素的 width: 20% 可能被默认的 flex-shrink: 1 压缩，导致实际宽度不等于父容器 20%；需显式设置 flex-shrink: 0 或改用 flex 简写/grid 布局来确保宽度按预期计算。
当使用 `display: flex` 时，子元素的 `width: 20%` 可能被默认的 `flex-shrink: 1` 压缩，导致实际宽度不等于父容器 20%；需显式设置 `flex-shrink: 0` 或改用 `flex` 简写/`grid` 布局来确保宽度按预期计算。
在 Flex 布局中，百分比宽度（如 width: 20%）并非总是“生效”——这并非 CSS 的 Bug，而是 Flex 项（flex item）的默认行为所致。默认情况下，每个 flex 项都继承 flex-shrink: 1，这意味着当容器空间不足或内容尺寸变化时，浏览器会主动压缩该元素（即使你已声明 width: 20%），以满足整体 flex 行的布局约束。这就是为什么你的两个 .offerings-icon 元素宽度不一致：第一个可能因内容（图标）较轻而未触发压缩，第二个却因字体渲染、内联元素盒模型等细微差异被自动缩小，破坏了对齐。
✅ 正确解法一：使用 flex 简写属性（推荐）
将 .offerings-icon 的 width 替换为 flex，明确控制 flex-basis（基准尺寸）、flex-grow 和 flex-shrink：
.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%」。此时20%将严格参照.section-offerings（max-width: 1000px）计算，即恒为200px，彻底规避 flex-shrink 干预。
✅ 正确解法二：采用 CSS Grid（语义更清晰，学习成本更低）
对于固定列比例的两栏结构（图标 + 描述），Grid 是更自然的选择：
.offerings-row {
display: grid;
grid-template-columns: 20% 80%; /* 或使用 fr: 2fr 8fr，等价于 20%/80% */
align-items: center;
gap: 1rem;
}此时 .offerings-icon 不再需要设宽度——它自动占据第一列的 20%，且不受其他行内容影响，各行列宽完全对齐。
⚠️ 注意事项：
- 避免在 flex 容器中混用
width和flex属性（如同时写width: 20%和flex: 1），易引发冲突； -
max-width: 1000px本身不会影响百分比计算，但若父级（如）未设width: 100%，某些旧版浏览器可能产生意外表现（本例中body已设width: 100%，安全）； - 图标字体（如 Font Awesome）建议配合
font-size和line-height统一垂直居中，避免因图标基线差异造成视觉偏移。
? 总结：Flex 的强大在于弹性分配，但「精确列宽控制」反而是它的非典型场景。面对固定比例布局，优先考虑 grid-template-columns；若坚持用 Flex，请始终用 flex: 0 0 X% 替代 width: X%，这是保障宽度可预测性的黄金法则。
