CSS justify-content 属性

justify-content 属性用于定义弹性容器（flex container）中子元素在主轴上的对齐方式。主轴是弹性容器的方向，可以是水平方向（row）或垂直方向（column）。

可选值

• flex-start：子元素在主轴上靠近起始端对齐。
• flex-end：子元素在主轴上靠近结束端对齐。
• center：子元素在主轴上居中对齐。
• space-between：子元素在主轴上均匀分布，首个元素靠近起始端，末尾元素靠近结束端。
• space-around：子元素在主轴上均匀分布，元素之间的间距相等，并且首尾元素与容器边缘的距离是其他元素之间距离的一半。
• space-evenly：子元素在主轴上均匀分布，元素之间的间距相等，包括首尾元素与容器边缘的距离。

示例代码

// www.javascriptcn.com code example
.container {
  display: flex;
  justify-content: flex-start;
}

.container {
  display: flex;
  justify-content: flex-end;
}

.container {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  justify-content: space-between;
}

.container {
  display: flex;
  justify-content: space-around;
}

.container {
  display: flex;
  justify-content: space-evenly;
}

以上是 justify-content 属性的各个取值及其效果的介绍，根据实际需求选择适合的对齐方式来布局弹性容器中的子元素。