flexbox 的流式宽度适配应由 flex 属性（如 flex: 1、flex-basis、min/max-width）控制，而非 width；bem 修饰符需表达响应式意图（如 card--fluid），不嵌入计算逻辑，配合 flex-wrap、gap 和 min-width 实现语义化、可维护的响应式布局。
Flexbox 本身不处理“流式宽度适配”，BEM 修饰符也不该承担计算逻辑——真正要做的，是把「响应式意图」从媒体查询里抽出来，用修饰符显式标记，再由 Flex 规则承接。
为什么不能直接在 flex 容器上写 width: 100% 或 max-width？
Flex 容器的尺寸由其父容器决定，width 属性在 display: flex 下多数情况下无效（除非是 inline-flex 或设置了 flex-direction: column 且父容器有明确高度）。更关键的是：硬写 width 会和 flex 的自动分配机制冲突，比如 flex: 1 会尝试撑满剩余空间，而 width: 50% 可能被忽略或导致溢出。
- 常见错误：
.card__content { width: 100%; flex: 1; }——width在主轴方向上基本不起作用，反而干扰调试 - 正确思路：让宽度行为由
flex自身控制，例如用flex-basis或min-width/max-width配合flex-wrap - 特别注意：
flex-shrink: 0必须显式设置，否则小屏下内容可能被压缩到不可读
card--fluid 这类修饰符该怎么定义才不破坏 BEM 原则？
修饰符必须表达业务意图，而不是实现细节。命名如 card--fluid 比 card--width-100 更合理，因为它描述的是“卡片是否参与流式布局”，而非“它宽多少”。
- 对应 CSS 应只改布局行为，不碰具体像素值：
.card--fluid { flex: 1; min-width: 0; } - 避免写
.card--fluid { width: 100%; }—— 这又退回到传统盒模型，失去 Flex 弹性优势 - 若需限制最大宽度，应放在 Block 级规则里统一控制：
.card { max-width: 1200px; margin: 0 auto; }，修饰符只负责“是否允许伸缩”
如何让子项（card__item）在不同断点下切换列数？
不要靠媒体查询直接改 flex-basis，而是用修饰符 + flex-wrap 组合。列数变化本质是「换行策略」和「单个项目基础尺寸」的配合。
- 默认单列：
.card__items { display: flex; flex-direction: column; } - 加修饰符切换为多列流式：
.card__items--grid { flex-direction: row; flex-wrap: wrap; } - 每个
card__item用flex: 0 0 calc(50% - 8px)（配合gap: 16px）实现两列；需要三列就改成calc(33.333% - 10.666px)，但更推荐用gap+flex-basis配合min-width - 关键点：
min-width决定何时换行，flex-wrap决定是否允许换行，修饰符只开关这两者
为什么 gap 比 margin 更适合流式场景？
gap 是 Flex（和 Grid）原生间距控制，它不参与项目尺寸计算，不会触发重排，也不会在首尾产生多余空白——这对流式布局至关重要。
- 错误做法：
.card__item { margin-right: 16px; }→ 最后一项多出 16px 空白，小屏换行后间隙错乱 - 正确做法：
.card__items { gap: 16px; }→ 浏览器自动处理行列间隙，换行、缩放、RTL 都无副作用 - 兼容性提醒：
gap在 Flex 中 Chrome 84+/Firefox 63+/Safari 14.1+ 支持良好；旧版 Safari 需用padding+margin降级，但不应因此放弃语义化结构
最易被忽略的一点：流式不是“让所有东西变百分比”，而是让容器明确表达“我是否愿意收缩/扩张”，再由 Flex 的 flex-grow/flex-shrink/flex-basis 三者协同决定最终尺寸。修饰符只是那个开关，不是计算器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
