align-content

align-content 属性是 灵活盒布局模块 的子属性。

它有助于在横轴存在额外空间时将弹性容器的线条在其内部对齐，类似于 justify-content 在主轴内对齐单个项目的方式。

请注意，当弹性盒只有一个线条时，此属性无效。

align-content 属性接受 6 个不同的值

• flex-start：线条排列在容器的开头
• flex-end：线条排列在容器的结尾
• center：线条排列在容器的中心
• space-between：线条均匀分布；第一条线位于容器的开头，而最后一条线位于结尾
• space-around：线条均匀分布，它们之间有相等的空间
• stretch（**默认值**）：线条拉伸以占据剩余的空间

下图有助于了解根据 align-content 值，线条如何在弹性容器中堆叠起来

语法

align-content: flex-start | flex-end | center | space-between | space-around | stretch

.flex-container {
  align-content: space-around;
}

演示

以下演示展示了根据 align-content 值，线条如何堆叠起来

• 红色列表设置为 flex-start
• 黄色列表设置为 flex-end
• 蓝色列表设置为 center
• 绿色列表设置为 space-between
• 粉色列表设置为 space-around
• 棕色列表设置为 stretch

浏览器支持

这是对整个 Flexbox 的支持，它应该与该属性相同，因为它算是 原始 属性。

有关如何混合语法以获得最佳浏览器支持的更多信息，请参阅 这篇文章 (CSS-Tricks) 或 这篇文章 (DevOpera)。

其他资源

• 规范中的 align-items
• MDN 中的 align-items
• 高级跨浏览器弹性盒
• 弹性盒指南
• 使用弹性盒
• 旧弹性盒和新弹性盒

相关