Flex容器的display: flex必须显式设置，否则flex-direction等属性无效
很多人以为只要写了flex-direction: column，父元素就会自动变成Flex上下文——其实不会。浏览器只认display: flex（或display: inline-flex）这一句“入场券”。漏掉它，后面所有justify-content、align-items都只是被忽略的废代码。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终把
display: flex放在Flex容器的第一条声明里，别依赖继承或重置 - 用
display: contents或display: none临时隐藏容器时，Flex行为会彻底消失，不是“暂停” - 在CSS变量控制布局模式时（比如
--layout: row），不能靠变量直接替换display值——CSS变量无法驱动display切换，得配合类名或JS切换
用clamp()搭配flex-basis做流体子项宽度，比媒体查询更轻量
响应式中常见“三栏→单栏”切换，但写一堆@media容易失控。用clamp(250px, 50vw, 400px)配flex-basis，能让每个子项自己决定宽窄，父容器flex-wrap: wrap自然换行，逻辑更内聚。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
flex: 0 1 clamp(280px, 45vw, 360px)比flex: 1更可控——前者限制收缩下限，后者在小屏可能压成一条线 - 注意
clamp()的中间值是“首选值”，不是断点；它不触发重排，但频繁缩放时仍需测min/max是否合理 - 旧版Safari（≤15.4）不支持
clamp()在flex-basis中使用，降级方案是flex-basis: 300px+@supports (flex-basis: clamp(...))包裹
--gap变量不能直接用于gap属性，必须用var(--gap)显式调用
有人写gap: --gap或gap: $gap（误当Sass变量），结果空白没出来。CSS自定义属性是惰性求值的，必须通过var()函数读取，且gap只接受长度值，不能传入未计算的字符串。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 定义统一间隙变量：
:root { --gap: 1rem; }，然后在Flex容器上写gap: var(--gap) - 不同断点可覆盖变量：
@media (max-width: 768px) { :root { --gap: 0.75rem; } }，无需重复写gap声明 -
gap对flex-direction: column只影响行间距，列间距仍靠margin或inline-size控制——这点常被忽略
Flex项目min-width: 0是防止溢出的关键开关，不是可选项
默认情况下，Flex项目有min-width: auto，意味着内容再长也不会缩小到低于“最长单词宽度”。这导致flex: 1在窄屏下失效，文字撑破容器甚至横向滚动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有可能装文本的Flex子项，加
min-width: 0（或min-width: 0px）——这是最廉价的防溢出手段 - 如果子项含图片或
iframe，额外加max-width: 100%和height: auto，否则min-width: 0alone 不起作用 - 不要依赖
overflow: hidden掩盖问题：它会截断文字、破坏可访问性，且不解决布局塌陷
Flex响应式真正的复杂点不在语法，而在“谁该收缩、谁该换行、谁该保持最小可用尺寸”的权衡。CSS变量能简化配置，但没法代替对内容弹性的预判——比如一个带图标+长标题的卡片，在320px屏上，到底是压缩图标、截断标题，还是强制换行？这个决策必须落在具体组件上，而不是全局--gap或--flex-direction里。
