flex容器必须显式声明display: flex，否则所有flex属性无效；主轴由flex-direction决定，justify-content仅作用于主轴，align-items作用于交叉轴；flex: 1等价于flex: 1 1 0，受max-width限制；图片需设max-width: 100%防变形；align-items不生效常因容器无明确高度或margin干扰。
flex容器必须显式声明display: flex
不加这句，所有flex相关属性（如justify-content、flex-direction）完全无效。浏览器会把它当普通块元素处理，子元素依旧按文档流堆叠。
常见错误写法：
div { width: 100%; }——这没用；正确写法是：
div { display: flex; }-
display: inline-flex适合让容器自身保持内联行为（比如嵌在文字中），但多数布局场景用display: flex - 不要依赖父级或全局样式“顺带”设
flex，务必在容器自身css里明确写出 - 旧版IE10需加
-ms-flexbox前缀，但现代项目基本可忽略
主轴方向决定justify-content和flex-wrap的行为逻辑
justify-content只对主轴起作用，而主轴由flex-direction决定。很多人调了半天justify-content: center发现没居中，其实是忘了默认flex-direction: row，它控制的是水平方向；如果改成column，那justify-content就管垂直了，此时想水平居中得用align-items。
-
flex-direction: row→ 主轴水平 →justify-content控制左右，align-items控制上下 -
flex-direction: column→ 主轴垂直 →justify-content控制上下，align-items控制左右 -
flex-wrap: wrap只在主轴放不下时才换行，换行后新行的主轴起点仍由flex-direction决定
flex项目收缩比值受max-width/max-height限制
设置flex: 1本意是等分剩余空间，但如果某个子项有max-width: 200px，它就不会再撑开，导致其他项被迫多占——这不是bug，是正常约束行为。
立即学习“前端免费学习笔记（深入）”；
-
flex: 1等价于flex: 1 1 0，其中第三个值flex-basis为0，意味着“从零开始分配空间”，此时max-width会截断分配结果 - 想让某项优先保尺寸，可设
flex: 0 0 auto，即不伸缩、不收缩、按内容宽高来 - 移动端常遇到图片被
flex压缩变形，根源往往是没给img加max-width: 100%或height: auto
align-items不生效？检查是否被flex-direction或margin干扰
align-items默认作用于交叉轴，但若容器高度未固定（比如仅靠内容撑开），且子项无高度约束，它可能看起来“没反应”。另外，子项自身的margin（尤其是margin-top/bottom）会破坏对齐效果。
- 确保容器有明确高度（如
min-height: 100vh）或内部有足够撑开内容 - 避免在flex项目上使用
margin-top/margin-bottom做垂直居中，改用margin: auto（它在flex中能沿交叉轴生效） -
align-items: stretch是默认值，会让子项拉满容器交叉轴长度，若不想拉伸，必须显式设align-items: flex-start等
实际布局中，最易被忽略的是flex-basis与width的叠加影响：当同时设置width和flex-basis，以flex-basis为准；但若flex-basis为auto，则回退到width。这个细节在响应式断点切换时经常引发意外交互。