css justify-content属性控制flex容器内项目的水平对齐方式

css justify-content属性可以控制flex容器内项目的水平对齐方式。它可以把项目在flex容器内沿着主轴（main axis）的轴线对齐，从而改变项目在容器中的位置。它有如下几种取值：

flex-start

justify-content: flex-start;

此值表示项目将会沿着主轴的起点对齐，即从主轴的开头开始排列。

flex-end

justify-content: flex-end;

此值表示项目将会沿着主轴的终点对齐，即从主轴的末尾开始排列。

center

justify-content: center;

此值表示项目将会沿着主轴的中心线对齐，即在主轴的中间排列。

space-between

justify-content: space-between;

此值表示项目将会沿着主轴的起点与终点对齐，但项目之间的间距会均匀分布。

space-around

justify-content: space-around;

此值表示项目将会沿着主轴的起点与终点对齐，但项目之间的间距会均匀分布，并且项目两侧的间距会比项目之间的间距大一半。

space-evenly

justify-content: space-evenly;

此值表示项目将会沿着主轴的起点与终点对齐，但项目之间的间距会均匀分布，并且项目两侧的间距与项目之间的间距相等。

stretch

justify-content: stretch;

此值表示项目将会沿着主轴的起点与终点对齐，但项目的宽度会拉伸至填满整个容器。

使用方法

使用css justify-content属性可以很容易地控制flex容器内项目的水平对齐方式，只需要在容器的样式声明中添加以下代码：

.flex-container {
    display: flex;
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
}

其中，justify-content的取值可以根据需要进行更改，以达到所需的对齐方式。