flex布局必须作用于直接父容器，子元素设display:flex无效；主轴默认为row，justify-content控制主轴对齐，align-items控制交叉轴；flex:1是flex-grow:1、flex-shrink:1、flex-basis:0%的简写；ie11需加-ms-前缀且部分属性不支持。
flex容器声明后子元素没反应？检查是否漏了display:flex在父级
很多人写完display:flex发现子元素排布完全没变化，第一反应是“flex不生效”，其实八成是加错了地方。Flex布局必须作用于**直接父容器**，子元素自己设display:flex毫无意义——它只会让自己变成一个空的弹性容器，而里面没孩子。
常见错误现象：div.item { display: flex; } → 想让item内部排布，结果item本身被撑开、内容错位；正确做法是给div.container { display: flex; }，再把item当子项放进去。
- Flex只对**直系子元素**起作用，隔一层就失效
- 父容器需有明确宽度/高度（尤其用
flex-direction: column时，高度不设可能塌缩） - 若父容器是
inline元素（如span），display:flex会自动转为display:inline-flex，行为一致但行内表现要注意
主轴方向总搞反？flex-direction默认是row不是column
新手常以为“flex就是竖着排”，结果写了justify-content:center发现元素横着居中了，一脸懵。因为flex-direction默认值是row，主轴水平向右，justify-content管主轴对齐，align-items才管交叉轴（垂直方向）。
使用场景：做顶部导航栏通常用row，做侧边菜单或列表项常用column；手机端切换方向时，别只改flex-direction，顺手检查justify/align是否也要对调。
立即学习“前端免费学习笔记（深入）”；
-
flex-direction: row→ 主轴水平，justify-content控制左右，align-items控制上下 -
flex-direction: column→ 主轴垂直，justify-content控制上下，align-items控制左右 - 注意 Safari 旧版本对
flex-direction: column-reverse支持不稳定，生产环境慎用
子元素尺寸失控？别乱用flex: 1，先看懂三个参数
flex: 1看着方便，但一上手就容易撑爆容器或挤占其他元素空间。它其实是flex-grow: 1、flex-shrink: 1、flex-basis: 0%的简写，关键在flex-basis——它决定了“基准尺寸”，不是“最终尺寸”。
典型问题：多个子项都写flex: 1，但其中一个含图片或长文本，结果它比别人宽很多；或者容器宽度不够，所有项被压缩到看不见文字。
- 想等分容器宽度 → 用
flex: 1没问题，前提是子项内容不破坏基线（比如图片没设max-width: 100%） - 想让某子项固定宽、其余自适应 → 固定项设
flex: 0 0 200px（不放大不缩小，基准200px），其余设flex: 1 -
flex-basis: auto会先按内容宽度算基准，0%则忽略内容直接均分，性能略好但语义弱
IE11里flex布局炸了？别信“基本兼容”，查清具体属性支持表
很多人看到“IE10+支持flex”就放心上线，结果在IE11里flex-wrap: wrap失效、align-content完全没反应、甚至flex: 1把整个页面拉歪。IE11对Flex的支持是“残缺但可用”，不是“完整可用”。
真实兼容性影响：IE11不支持flex-flow简写、flex-basis单位为auto时行为异常、min-height在flex容器上经常被忽略。
- 必须加
-ms-前缀：如display: -ms-flexbox、-ms-flex-align: center - 避免用
flex: 0 1 auto，改用-ms-flex: 0 1 auto并补全flex-basis值 - 如果项目必须支持IE11，建议用
Autoprefixer配"ie >= 11"目标，并在真实环境跑一遍flex-wrap和align-content用例
flex最麻烦的从来不是语法，而是不同浏览器对“剩余空间怎么分”“换行后对齐怎么算”的隐式理解差异。哪怕现代浏览器，Chrome 和 Safari 对gap在flex-direction: column下的处理也略有出入——别只看MDN文档，打开DevTools调几个值试试真效果。
