justify-content 不支持直接使用 css 变量插值，因其只接受字面量关键词；需用 javascript 动态设置 style.justifycontent 或配合 @property（syntax: ""）声明变量语法。
justify-content 用 CSS 变量动态控制时，为什么值不生效？
因为 justify-content 不接受 CSS 变量直接插值——它只认字面量关键词（如 center、space-between），不能写成 justify-content: var(--align); 然后指望浏览器自动解析字符串为有效值。
常见错误现象：justify-content: var(--align); 在 DevTools 里显示“invalid value”，或者回退到默认的 flex-start。
- 必须用 JavaScript 动态设置元素的
style.justifyContent，或配合 CSS 自定义属性 +@property（仅现代浏览器支持） - 若用
@property，需显式声明语法（syntax: "<custom-ident>"</custom-ident>）并允许继承，否则变量值不会被识别为合法对齐关键字 - 旧版 Safari（@property，此时只能 JS 控制
用 @property 实现 justify-content 的 CSS 变量驱动（Chrome 102+ / Safari 16.4+）
这是目前唯一纯 CSS 方案，但限制明确：必须提前声明允许的取值范围，且依赖 CSS Houdini 的 @property。
使用场景：需要响应式切换对齐方式，又不想每次改都写 JS（比如主题切换、布局模式按钮）。
/* 必须在 :root 或对应作用域中声明 */
@property --justify-value {
syntax: "<custom-ident>";
inherits: true;
initial-value: flex-start;
}</custom-ident>
然后才能安全使用：
.container {
display: flex;
justify-content: var(--justify-value);
}
-
syntax: "<custom-ident>"</custom-ident>表示只接受单个标识符（如center），不能是"space-between"带横线的字符串（会被拒绝） - 若想支持
space-between，得写成syntax: "*"，但会失去类型校验，出错更难排查 - 初始值
initial-value必须是合法的justify-content值，否则整个声明无效
用 JS 动态设置 justify-content 更稳妥
兼容性最好、逻辑最直白的方式。不是“不够优雅”，而是面对真实项目时，可控性远高于 CSS 变量方案。
常见错误现象：直接赋值字符串没加引号、拼错属性名（如写成 justifyContentt）、未触发重排导致样式延迟生效。
- 正确写法：
el.style.justifyContent = 'center';（注意单引号包裹字符串） - 批量更新多个容器时，避免逐个设 style——先收集所有目标元素，再统一 setAttribute 或 classList 切换，减少重排次数
- 如果对齐方式来自用户输入（如表单 select），务必校验值是否在白名单内：
['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly']
justify-content 和 justify-items 混用时的对齐优先级
弹性容器里，justify-content 控制主轴上**项目整体**的位置；justify-items 在 flex 布局中**完全无效**——它只对 Grid 容器起作用。
容易踩的坑：复制 Grid 的写法到 Flex 容器，以为 justify-items: center 能让子项居中，结果毫无反应。
- Flex 布局中实现单个项目主轴居中，只能靠
margin: auto（且该子项不能设flex-grow）或justify-content配合flex项目自身结构 - 若容器同时是 Grid 和 Flex（比如 display: grid 后又被 JS 改成 flex），注意 CSS 层叠顺序和 display 切换后的属性失效逻辑
- 不要试图用
justify-items替代justify-content，它们根本不在一个作用域里
CSS 变量驱动 justify-content 的核心难点不在写法，而在浏览器对自定义属性语义的理解深度——你给它的值，必须能被解析成 CSS 引擎内部认可的枚举状态，而不是一段任意字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
