📅  最后修改于: 2023-12-03 15:30:09.424000             🧑  作者: Mango
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
属性的兼容性非常好,支持的浏览器包括:
通过本文的介绍,我们了解到了justify-content
属性的五个取值及其含义,以及在flex容器中如何使用该属性控制子元素的水平对齐方式。该属性在现代浏览器中得到了很好的支持,可以放心使用。