将灵活的 <div> 元素的项目放置在行与行之间留出空间:
document.getElementById("main").style.alignContent = "space-between";
亲自试一试 »
当项目未使用横轴(垂直)上的所有可用空间时,alignContent 属性会对齐灵活容器的项目。
提示:使用 justifyContent 属性在主轴上(水平)对齐项目。
笔记:必须有多行项目才能使此属性产生任何效果。
返回alignContent属性:
object.style.alignContent
设置alignContent属性:
object.style.alignContent = "stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"
Value | Description |
---|---|
stretch | Default value. Items are stretched to fit the container |
center | Items are positioned at the center of the container |
flex-start | Items are positioned at the beginning of the container |
flex-end | Items are positioned at the end of the container |
space-between | Items are positioned with space between the lines |
space-around | Items are positioned with space before, between, and after the lines |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
默认值: | 拉紧 |
---|---|
返回值: | 一个字符串,表示元素的align-content属性 |
CSS版本 | CSS3 |
alignContent
是 CSS3 (1999) 的一项功能。
所有浏览器都完全支持它:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 11 |
CSS 参考:对齐内容属性
HTML DOM 样式参考:对齐项目属性
HTML DOM 样式参考:对齐自属性
HTML DOM 样式参考:justifyContent 属性
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!