Style justifyContent 属性

定义和用法

当项目未使用主轴(水平)上的所有可用空间时, justifyContent 属性对齐弹性容器的项目。

提示:请使用 alignContent 属性在横轴(垂直)上对齐项目。

另请参阅:

CSS 参考手册:justify-content 属性

实例

在弹性的 <div> 元素的项目之间留出一些空间:

document.getElementById("main").style.justifyContent = "space-between";

亲自试一试

语法

返回 justifyContent 属性:

object.style.justifyContent

设置 justifyContent 属性:

object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit"

属性值

描述
flex-start 默认值。项目位于容器的开头。
flex-end 项目位于容器的末端。
center 项目位于容器的中心。
space-between 在行间为项目留出空间。
space-around 在行前、行间和行后为项目留出空间。
initial 将此属性设置为其默认值。请参阅 initial
inherit 从其父元素继承此属性。请参阅 inherit

技术细节

默认值: flex-start
返回值: 字符串,表示元素的 justify-content 属性
CSS 版本: CSS3

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 12.0 支持 9.0 支持

相关页面

HTML DOM STYLE 参考手册:alignContent 属性

HTML DOM STYLE 参考手册:alignItems 属性

HTML DOM STYLE 参考手册:alignSelf 属性