justify-content控制flex容器内所有子项在主轴上的整体对齐，取值包括flex-start、flex-end、center、space-between、space-around、space-evenly；主轴方向由flex-direction决定，仅对display:flex的父容器生效，不影响交叉轴对齐。
justify-content 在 flex 容器中控制主轴对齐
justify-content 只对 flex 容器 生效，作用是沿主轴（默认为水平方向）排列子元素。它不控制单个子项的位置，也不影响交叉轴（垂直方向）——那是 align-items 的职责。
常见错误是给子元素加 justify-content，或者期望它让某个特定子项右对齐而其他居中——这做不到，它总是统一作用于所有直接子项。
- 必须在父容器上设置
display: flex后才有效 - 主轴方向由
flex-direction决定：row（默认）→ 水平；column→ 垂直，此时justify-content控制的是“上下”对齐 - 值包括：
flex-start、flex-end、center、space-between、space-around、space-evenly
space-between 和 space-around 的实际间距差异
这两个值都用于分配空白，但计算逻辑不同，容易在响应式布局中引发意外错位。
space-between 把空白均分在“项目之间”，首尾不留空；space-around 给每个项目“两侧”分配相等空间，相当于每个项目自带左右 margin，因此首项左边、末项右边也有半份间隙——视觉上比 space-between 更“松散”。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 三项目时：
space-between产生 2 个等距间隙；space-around实际有 4 份等距间隙（每项左右各一） - 如果子项设置了
margin，会和space-around叠加，可能撑出滚动条 -
space-evenly才真正让“项目边缘到容器边缘”和“项目之间”的间距完全相等
justify-content 不生效？先检查这三件事
90% 的“没反应”问题都出在基础条件缺失或冲突上，不用急着查文档。
- 父元素没设
display: flex或display: inline-flex——justify-content对block或grid容器无效 - 子元素被设了
float、position: absolute或display: block且宽度占满（如width: 100%），导致 flex 无法重新排布 - CSS 优先级被覆盖：比如用
!important在别处锁死了justify-content: flex-start，新声明就无效
想让某一个 flex 子项单独右对齐？别用 justify-content
justify-content 是全局对齐，没法“例外处理”。真要单个右对齐，得换思路：
- 用
margin-left: auto推该子项到最右（仅适用于flex-direction: row） - 用
margin-right: auto推左侧所有项靠左，留出右侧空间 - 把目标子项包一层额外容器，让它自己成为 flex 容器并设
justify-content: flex-end - 避免滥用
position: relative+right，会脱离 flex 流，后续换行或响应式易出错
复杂对齐需求（比如首项左、中间居中、末项右）本质已超出 justify-content 能力范围，该考虑 grid 或显式 margin 控制。
