弹性布局必须先声明display: flex或inline-flex，否则justify-content等属性无效；常见错误是忽略display设置或在组件顶层误用CSS变量。
flex容器声明必须用display: flex或display: inline-flex
很多人以为加个flex-direction或者justify-content就能触发弹性布局，其实不行。CSS弹性布局的起点是容器本身得“变成flex容器”——这一步靠display属性决定，不是靠子元素或其它样式。
常见错误现象：justify-content: center写了但完全没效果；子元素还是块级堆叠；开发者反复检查flex-wrap却忽略最外层display没设。
-
display: flex生成块级弹性容器（默认独占一行） -
display: inline-flex生成行内弹性容器（不强制换行，适合嵌入文本流） - 别用
display: -webkit-flex等旧前缀——现代浏览器全支持无前缀display: flex - React/Vue组件中，确保该样式作用在**父容器元素**上，而非组件标签本身（比如
<MyList>没设display，但它的根<div>要设）
组件化配置时，flex相关CSS变量要慎用在容器层级
用--flex-direction、--gap这类自定义属性做主题配置很常见，但要注意：CSS变量本身不触发重排，可继承，但flex容器的很多行为（比如flex-wrap是否生效、gap是否被识别）依赖具体值是否合法且被容器“看到”。
使用场景：设计系统中统一控制卡片列表方向（横向/纵向）、间距大小。
立即学习“前端免费学习笔记（深入）”；
-
gap在Flex布局中从Chrome 84+、Firefox 63+才完全支持；老版本需回退到margin模拟，不能只靠变量切换 -
flex-direction: var(--flex-dir, row)可行，但若--flex-dir值为""或unset，会导致解析失败，回退到row而非失效——这点容易误判 - 避免在
:host或组件顶层直接写display: flex+flex-direction: var(...)组合，某些Shadow DOM环境（如Safari）对变量解析有延迟，建议先设死display，再用JS补动态方向
React组件中用className配flex类名比内联style更可控
内联style={{ display: 'flex', flexDirection: direction }}看着方便，但会覆盖CSS文件里定义的gap、flex-wrap甚至媒体查询断点，尤其当组件需要响应式折叠时，JS控制力反而变弱。
性能影响：每次direction变化都触发整条style对象重建和DOM重绘；而CSS类名切换只触发布局重排（且可被浏览器优化）。
- 推荐写法：
className={`list-container list-container--${direction}`}，配合CSS中.list-container--column { flex-direction: column; } - 不要把
flex: 1之类收缩/放大逻辑塞进style，它和flex-basis、min-width交互复杂，CSS类更易调试 - 如果必须用
style（比如动态gap像素值），记得同时设row-gap和column-gap，因为gap缩写在部分旧版Safari中不生效
flex-wrap: wrap和min-width配合才能真正响应式折行
只写flex-wrap: wrap，子项依然可能因内容过长或white-space: nowrap撑破容器——这不是Flex的错，是没约束子项最小尺寸。
容易踩的坑：设计师说“小屏自动换行”，开发加了wrap就交差，结果手机上看还是溢出，因为子项img或span默认不收缩。
- 必须给子项加
min-width: 0（或min-width: auto），否则flex-shrink在文本/图片场景下不生效 -
img标签需额外加max-width: 100%，否则无视flex约束 - 文字容器（如
div包p）建议加overflow-wrap: break-word，防止超长无空格字符串破坏折行 - 不要依赖
flex-basis百分比做栅格——它不响应容器宽度变化，要用width或flex: 0 1 calc(50% - gap)这类组合
实际项目里，最常漏的是min-width: 0和display声明的耦合关系——这两处一错，整个弹性布局就静默失效，连报错都没有。
