justify-content 用于控制弹性容器内项目在主轴方向的对齐方式，具体属性值及解释如下：
1. 基础对齐方式
flex-start
项目向主轴起始端对齐（默认值）。例如：水平方向左对齐（flex-direction: row）或垂直方向上对齐（flex-direction: column）。
flex-end
项目向主轴结束端对齐。例如：水平方向右对齐或垂直方向下对齐。
center
项目在主轴上居中对齐，两侧留等距空白。
2. 空间分配方式
space-between
项目均匀分布，首项对齐主轴起点，末项对齐主轴终点，相邻项间距相等。
space-around
项目两侧均留间距，相邻项间距为两侧间距之和（总间距为单侧的两倍）。
space-evenly
项目间及两侧间距均相等（需注意部分旧版本浏览器可能不支持）。
3. 其他属性值
start / end
根据容器书写模式（如从左到右或从右到左）对齐主轴起点或终点。
left / right
强制项目向左或向右对齐（需结合主轴方向使用）。
baseline
按项目基线对齐（适用于多行文本场景）。
initial
重置为默认值 flex-start。
inherit
继承父元素的 justify-content 值。
主轴方向的影响
当 flex-direction 设为 row-reverse 或 column-reverse 时，flex-start 和 flex-end 的对齐方向会反转。
例如：flex-direction: row-reverse 时，flex-start 对应右对齐，flex-end对应左对齐。
兼容性说明
主流浏览器（Chrome、Firefox、Safari、Edge）均支持基础值（flex-start、flex-end、center、space-between、space-around）。
space-evenly 和 baseline 需注意版本兼容性。
网友评论