启用Flexbox需在目标父容器设display: flex，配合flex-direction定义主轴、flex-wrap控制换行、justify-content和align-items按主/交叉轴对齐，缺一不可。
直接给父容器加 display: flex 就能启用弹性盒子，但光写这一行往往排不齐、换不了行、内容还溢出——关键在后续几项控制属性是否匹配实际布局意图。
父容器必须设 display: flex 才生效
Flexbox 不是全局开关，只作用于直接子元素。常见错误是给错层级：比如给 <body> 加了 display: flex，但真正要排的 <div> 嵌套了三层，结果没反应。
- 确保目标容器（即你想让它“弹性”的那个）样式里写了
display: flex或display: inline-flex - 不要在它父级或子级上误加，否则子元素不会变成弹性项
- 如果用 JavaScript 动态插入元素，记得新节点也要继承父容器的 flex 行为，而不是靠 JS 重新设样式
flex-direction 决定排列方向，别默认水平就不管
很多初学者以为 display: flex 后元素自然横排，其实这是 flex-direction: row 的默认值；但一旦你要垂直堆叠（比如导航菜单、表单字段），就必须显式写出来，否则 justify-content 和 align-items 的行为会反直觉。
- 水平排列（默认）：
flex-direction: row - 垂直排列：
flex-direction: column—— 此时justify-content控制的是上下间距，align-items控制左右对齐 - 反转方向（如倒序列表）：
flex-direction: row-reverse或column-reverse - 注意：
flex-direction改变后，主轴和交叉轴互换，所有依赖轴向的属性（如justify-content）意义随之变化
内容超宽时得主动设 flex-wrap: wrap
默认情况下，弹性项宁可溢出容器也不折行——这在响应式场景下极易导致横向滚动条或布局崩坏。尤其当项目数量不确定（比如动态生成的标签云、商品卡片），不加 flex-wrap 就等于埋雷。
立即学习“前端免费学习笔记（深入）”；
- 允许折行：
flex-wrap: wrap - 强制单行不折：
flex-wrap: nowrap（默认值） - 反向折行（首行在下）：
flex-wrap: wrap-reverse - 配合
justify-content使用时注意：折行后每行独立计算对齐，不是整个容器统一分布
justify-content 和 align-items 别混用轴向
这两个属性常被记反：一个管主轴（flex-direction 定义的方向），一个管交叉轴（垂直于主轴的方向）。写错会导致“明明写了 center 却靠左”这类困惑。
-
justify-content：主轴对齐（水平排列时管左右，垂直排列时管上下） -
align-items：交叉轴对齐（水平排列时管上下，垂直排列时管左右） - 常见组合：
justify-content: center; align-items: center实现单个子元素居中；但如果是多子项且希望整体居中+等距，得看是否用了flex-wrap，否则space-between在单行下两端不留白 - 若需某一项单独对齐（如最后一个按钮右对齐），用
margin-left: auto比改justify-content更直接
真正难的不是记住属性名，而是每次写之前想清楚：主轴朝哪？要不要折？对齐是针对整行还是单个元素？这些判断漏掉一个，display: flex 就只是个半成品。
