必须显式声明display: flex，否则justify-content、flex-direction等全部失效；主轴由flex-direction决定，justify-content仅作用于主轴，align-items作用于交叉轴，且需容器有明确高度才生效。
display: flex 必须显式写在容器上
不加这句，justify-content、flex-direction 全部失效——浏览器根本不会识别它是个弹性容器，子元素照旧按普通文档流堆叠。
常见错误包括：
- 只写了
.container { width: 100%; }，没写display: flex - 依赖父级样式“顺带”生效，比如以为
.parent .container会继承 flex 行为 - 在 CSS 预处理器里用了嵌套但漏掉了顶层声明
正确写法就是直白一行：.container { display: flex; }。如果需要内联行为（比如嵌在文字中间），才用 display: inline-flex。
flex-direction 决定主轴方向，也决定 justify-content 的作用方向
很多人调 justify-content: center 发现没居中，其实是没意识到：这个属性只管主轴，而主轴由 flex-direction 定义。
-
flex-direction: row（默认）→ 主轴水平 →justify-content控左右，align-items控上下 -
flex-direction: column→ 主轴垂直 →justify-content控上下，align-items控左右
所以想让子元素垂直居中，不能只靠 justify-content: center；得先确认主轴是 vertical，或者改用 align-items: center 配合 row 方向。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
align-items 不生效？先看容器有没有高度和 margin 干扰
align-items 默认沿交叉轴对齐，但它需要容器有可参考的交叉轴空间。如果容器高度靠内容撑开，又没设 min-height 或固定高，align-items: center 就可能“看起来没反应”。
- 给容器加
min-height: 100vh或明确height: 400px，再试对齐 - 避免在子元素上用
margin-top/margin-bottom做垂直调整——它会破坏 flex 对齐逻辑 - 想让某个子项自动占满交叉轴剩余空间？用
margin: auto，它在 flex 中对交叉轴也生效
另外，align-items: stretch（默认）会让子项拉伸到容器高度，但如果子项自己设了 height 或 max-height，这个行为就会被覆盖。
flex-wrap: wrap 换行后，align-content 才起作用
align-content 管的是“多行”时行与行之间的对齐，单行时完全无效。也就是说，必须同时满足两个条件它才工作：
- 容器设置了
flex-wrap: wrap（或wrap-reverse） - 子元素真的换行了（主轴放不下，触发折行）
典型误用：align-content: center 设了但没换行，结果什么都没变。此时该用 align-items 或 justify-content。
还有一点容易忽略：换行后新行的起点仍由 flex-direction 决定。比如 row + wrap，新行从上往下堆；column + wrap，新列从左往右排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
