CSS align-content 属性

CSS 的 align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。


实例

将行打包到弹性容器的中央:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #main {
  6. width: 70px;
  7. height: 300px;
  8. border: 1px solid #c3c3c3;
  9. display: flex;
  10. flex-wrap: wrap;
  11. align-content: center;
  12. }
  13. #main div {
  14. width: 70px;
  15. height: 70px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <h1>align-content 属性</h1>
  21. <div id="main">
  22. <div style="background-color:coral;"></div>
  23. <div style="background-color:lightblue;"></div>
  24. <div style="background-color:pink;"></div>
  25. </div>
  26. <p><b>注释:</b>Internet Explorer 10 以及更早的版本不支持 align-content 属性。</p>
  27. </body>
  28. </html>

定义和用法

align-content 属性修改 flex-wrap 属性的行为。它与 align-items 相似,但是它不对齐弹性项目,而是对齐弹性线。

注意:必须有多行项目,此属性才能生效!

提示:使用 justify-content 属性可将主轴上的项目(main-axis)水平对齐。

默认值:stretch
继承:
动画制作:不支持。请参阅:动画相关属性
版本:CSS3
JavaScript 语法:object.style.alignContent="center"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 的数字表示使用前缀的首个个版本。

属性
align-content21.011.028.09.07.0 -webkit-12.1

CSS 语法

  1. align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
属性值
描述
stretch默认值。行拉伸以占据剩余空间。
center朝着弹性容器的中央对行打包。
flex-start朝着弹性容器的开头对行打包。
flex-end朝着弹性容器的结尾对行打包。
space-between行均匀分布在弹性容器中。
space-around行均匀分布在弹性容器中,两端各占一半。
initial将此属性设置为其默认值。参阅 initial
inherit从其父元素继承此属性。参阅 inherit

相关页面

CSS 参考手册:align-items 属性

CSS 参考手册:align-self 属性

CSS 参考手册:justify-content 属性

分类导航