justify-content 是 CSS 中用于水平对齐子元素的属性，适用于使用 Flexbox 或 Grid 布局的容器。该属性控制子元素在主轴上的对齐方式。

以下是 justify-content 的一些可能的取值：

1. flex-start： 默认值，子元素在容器的起始位置对齐。
   .container {
     display: flex;
     justify-content: flex-start;
   }

2. flex-end： 子元素在容器的结束位置对齐。
   .container {
     display: flex;
     justify-content: flex-end;
   }

3. center： 子元素在容器的中心位置对齐。
   .container {
     display: flex;
     justify-content: center;
   }

4. space-between： 子元素在容器中均匀分布，两端贴边。
   .container {
     display: flex;
     justify-content: space-between;
   }

5. space-around： 子元素在容器中均匀分布，两侧和子元素之间有相等的空间。
   .container {
     display: flex;
     justify-content: space-around;
   }

6. space-evenly： 子元素在容器中均匀分布，包括容器的两端和子元素之间的空间。
   .container {
     display: flex;
     justify-content: space-evenly;
   }

这些取值适用于 Flexbox 布局，如果是 Grid 布局，justify-content 的用法类似。该属性使得在容器内的子元素沿主轴的方向上以不同的方式对齐，从而实现更灵活的布局。


转载请注明出处：http://www.pingtaimeng.com/article/detail/6085/CSS