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 需注意版本兼容性。