CSS align-content 属性

朝向弹性容器中心的包装线：

div {
  width: 70px;
  height: 300px;
border: 1px solid #c3c3c3;
  display: flex;
flex-wrap: wrap;
  align-content: center;
}

下面有更多 "亲自试一试" 示例。

定义和用法

这个align-content属性指定弹性线在弹性盒容器中如何沿交叉轴分布。

在 Flexbox 布局中，主轴位于flex-direction（默认为“行”，水平），横轴垂直于主轴（默认为“列”，垂直）。

提示：使用justify-content属性以在主轴上（水平）对齐项目。

笔记：这个align-content属性也可以用在网格容器上，以在块方向上对齐网格项。对于英文页面，块方向是向下，内联方向是从左到右。

默认值：	拉紧
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS3
JavaScript 语法：	对象.style.alignContent="center"尝试一下

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
align-content	57.0	16.0	52.0	10.1	44.0

Value	Description	Demo
stretch	Default value. Lines stretch to take up the remaining space	Demo ❯
center	Lines are packed toward the center of the flex container	Demo ❯
flex-start	Lines are packed toward the start of the flex container	Demo ❯
flex-end	Lines are packed toward the end of the flex container	Demo ❯
space-between	Lines are evenly distributed in the flex container	Demo ❯
space-around	Lines are evenly distributed in the flex container, with half-size spaces on either end	Demo ❯
space-evenly	Lines are evenly distributed in the flex container, with equal space around them	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit