CSS | justify-content Property

justify-content属性用于控制flex容器中子元素的水平对齐方式。

语法

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

取值

• flex-start：子元素靠容器起始边进行对齐
• flex-end：子元素靠容器结束边进行对齐
• center：子元素在容器的水平中心线上进行对齐
• space-between：子元素平均分布在容器内，首元素靠近起始边，末元素靠近结束边
• space-around：子元素平均分布在容器内，每个元素两侧留有相等的间距
• space-evenly：子元素平均分布在容器内，包括首尾两侧的间距都相等

示例

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

/* 将子元素在容器中心对齐 */

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

/* 将子元素平均分布在容器内，包括首尾两端 */

兼容性

justify-content属性的兼容性非常好，支持的浏览器包括：

• IE 10+
• Edge
• Firefox
• Chrome
• Safari

总结

通过本文的介绍，我们了解到了justify-content属性的五个取值及其含义，以及在flex容器中如何使用该属性控制子元素的水平对齐方式。该属性在现代浏览器中得到了很好的支持，可以放心使用。