17370845950

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。这个细节在响应式断点切换时经常引发意外交互。