Flexbox必须通过display: flex或inline-flex启用，仅对直接子元素生效；需确保父容器有明确宽高，避免嵌套过深或滥用flex: 1，混用Grid时注意display覆盖与性能。
Flexbox样式必须通过display: flex触发
不写display: flex或display: inline-flex，其他所有flex-direction、justify-content等属性都无效。这是最常见的“写了但没反应”原因。
常见错误现象：justify-content: center不起作用，子元素依然左对齐；flex-wrap: wrap被忽略，内容溢出容器。
- 只对**直接子元素**生效，孙子节点不会自动继承布局行为
- 如果父容器是
position: absolute或float元素，需确保它有明确宽度/高度，否则flex可能因尺寸坍缩而表现异常 - 旧版Safari（iOS 8.4–9.3）需加
display: -webkit-box前缀，但现代项目基本可忽略
封装Flex类名时避免过度抽象
像.flex-row-center这种命名看似直观，但很快会失控：要不要支持flex-wrap？响应式断点怎么加？align-items要不要也拆？结果就是类名爆炸、维护成本翻倍。
使用场景：组件级复用（如卡片头部、表单行）比全局工具类更可控。
立即学习“前端免费学习笔记（深入）”；
- 优先封装语义化类名，例如
.header-nav、.form-row，再在CSS中定义具体Flex规则 - 若真要工具类，只覆盖高频组合：比如
.d-flex（display）、.jc-center（justify-content），但别做.ai-stretch-fw-wrap这种长串 - 避免在工具类里写
flex: 1或flex-basis——这些和布局结构强耦合，挪到组件样式里更安全
flex: 1不是万能填充符，注意父容器主轴尺寸
flex: 1本质是flex-grow: 1 + flex-shrink: 1 + flex-basis: 0，但它只在父容器**主轴方向有可用空间**时才生效。主轴没尺寸，它就缩成0。
常见错误现象：侧边栏用flex: 1，但页面高度不足，内容被压扁甚至消失；移动端vh单位在iOS Safari中可能计算不准，导致flex区域高度为0。
- 确保父容器设置了
height或min-height（比如min-height: 100vh） - 慎用
flex: 1在多层嵌套中——每层都要检查主轴约束是否传递下来 - 替代方案：用
flex-basis: auto保留子元素自然尺寸，再靠flex-grow分配剩余空间，更可控
Flex布局与CSS Grid混用时的层级陷阱
Flex容器内部可以嵌套Grid，Grid容器里也能放Flex子项，但容易误判“谁在控制谁”。比如给一个div同时设display: grid和display: flex，后者会完全覆盖前者。
性能影响：深层嵌套（Flex → Grid → Flex → Grid）会让浏览器重排压力增大，尤其在动画或滚动中明显卡顿。
- 只在真正需要混合能力的地方混用：例如用Grid做整体页面分区，用Flex微调某个区块内的按钮排列
- 不要为了“统一用现代布局”强行替换——
text-align: center居中文字比套一层Flex更轻量 - 调试时用浏览器开发者工具的Layout面板，确认当前元素实际生效的
display值，别信代码顺序
Flex的弹性本质在于“分配剩余空间”，而不是“强制撑满”。很多问题其实出在父容器没给够空间，或者把语义责任错交给布局工具本身。
