例
让周围的灵活的项目一定的空间<div>元素:
div
{
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
}
试一试» 定义和用法
该证明内容属性对齐软包装容器的物品时,物品不使用主轴的所有可用空间(horizontally) 。
提示:使用对齐项属性来对齐交叉轴项目(vertically) 。
默认值: | flex-start |
---|---|
遗传: | no |
动画: | no. Read about animatable |
版: | CSS3 |
JavaScript语法: | object .style.justifyContent="space-between" Try it |
浏览器支持
在表中的数字规定,完全支持该属性的第一个浏览器版本。
其次是-webkit-号码或-moz-指定用一个前缀工作的第一个版本。
属性 | |||||
---|---|---|---|---|---|
justify-content | 29.0 21.0 -webkit- | 11.0 | 28.0 18.0 -moz- | 9 6.1 -webkit- | 17.0 |
CSS语法
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
属性值
值 | 描述 | 播放 |
---|---|---|
flex-start | 默认值。 件被定位在容器的开头 | 播放 ” |
flex-end | 件被定位在容器的端部 | 播放 ” |
center | 件被定位在容器的中心 | 播放 ” |
space-between | 项都定位为与线之间的空间 | 播放 ” |
space-around | 项都前定位成空间之间,并且所述线后 | 播放 ” |
initial | 将此属性设置为默认值。 阅读关于初始 | 播放 ” |
inherit | 继承其父元素此属性。 阅读关于继承 |
相关页面
CSS参考: align-content property
CSS参考: align-items property
CSS参考: align-self property
HTML DOM参考: justifyContent property