CSS align-content 属性

CSS align-content 语法

在 CSS 中，align-content 属性会将所有子项当做一个整体，然后定义该整体在垂直方向上的对齐方式（这里不考虑使用 flex-direction 改变方向）。

语法：

align-content: 关键字;

说明：

align-content 属性的取值有很多，常用的如下表所示。

align-content 属性取值
属性	说明
stretch（默认值）	子元素高度拉伸与父元素高度相同
flex-start	所有子元素 “整体” 在顶部
flex-end	所有子元素 “整体” 在底部
center	所有子元素 “整体” 在中间
space-between	当存在多行时，行分布在上下两端（两端对齐）
space-around	当存在多行时，行上下平均分布（等分布局）
space-evenly	当存在多行时，行与行的上下间距以及边缘间距相等

下面列举了使用 align-content 时容易踩坑的地方，初学的小伙伴一定要注意。

1. align-content 只对多行元素有效

如果弹性容器是单行的（比如 flex-wrap: nowrap），那么 align-content 是无效的！想让它生效，必须满足以下两个条件：

容器设置了 flex-wrap: wrap（允许换行）。
子元素的总高度小于父容器的高度（形成多行）。

2. 子元素的高度影响表现

如果子元素没有设置固定高度，它们默认会被拉伸填满父容器的高度（这是 stretch 的效果）。

如果你希望看到 flex-start、center 等效果，那么子元素必须有固定高度，否则看不出区别。

注意:

align-content 属性只会作用于 Flex 容器和 Grid 容器，即 display 属性取值为 flex、inline-flex、grid 等的元素。
align-content 属性只会影响 “多行布局” 场景，它对单行布局无效（这时候要用 align-items）。

CSS align-content 摘要

属于	CSS Flex 布局 / CSS Grid 布局
使用频率	高
是否继承	否
默认值	stretch
兼容性	查看
官方文档	查看
MDN	查看

CSS align-content 示例

接下来，我们通过几个简单的例子来讲解一下 align-content 属性是如何使用的。

示例 1：align-content 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box {
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .box > div {
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border: 1px solid silver;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

页面效果如下图所示。

align-content 基本用法

分析：

align-content: flex-start; 表示所有子元素都在顶部。如果使用的是 align-content: center;，此时页面效果如下图所示。

align-content: center;

如果使用的是 align-content: flex-end;，此时页面效果如下图所示。

align-content: flex-end;

如果把 flex-start 改为 space-between、space-around 或 space-evenly，此时会发现页面效果并没有改变（还是在顶部），为什么会这样呢？这是因为只有纵向存在多行时，space-between、space-around 或 space-evenly 这几种值才会生效。请看下面例子。

示例 2：纵向存在多行时使用 align-content

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box {
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .box > div {
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border: 1px solid silver;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</body>
</html>

页面效果如下图所示。

纵向存在多行时使用align-content

分析：

对于这个例子来说，如果使用的是 align-content: flex-end;，此时页面效果如下图所示。

多行时使用align-content:flex-end;

如果使用的是 align-content: center;，此时页面效果如下图所示。

多行时使用align-content:center;

如果使用的是 align-content: space-between;，此时页面效果如下图所示。

多行时使用align-content:space-between;

如果使用的是 align-content: space-around;，此时页面效果如下图所示。

多行时使用align-content:space-around;

如果使用的是 align-content: space-evenly;，此时页面效果如下图所示。

多行时使用align-content:space-evenly;

align-content、align-items、align-self 的区别

对于 flex 布局来说，想要设置子元素在垂直方向上的对齐方式，有 align-content、align-items、align-self 这 3 个属性，它们之间的区别如下。

flex 布局的 3 个垂直对齐属性
属性	说明
align-content	定义垂直对齐方式（将所有子项当做一个整体）
align-items	定义垂直对齐方式（作用于所有子项）
align-self	定义垂直对齐方式（作用于某个子项）

对于 align-content、align-items、align-self 这 3 个属性，我们需要清楚以下几点。

align-content 是将 “所有子项” 当做一个整体，然后再设置整体在垂直方向上的对齐方式。并且 flex 容器还需要设置 flex-wrap: wrap; 才会生效。
align-items 针对的是每个子项在其垂直方向上的对齐方式。不管父元素是否设置 flex-wrap: wrap;，align-items 都会生效。
align-self 是单独设置某一个子项的垂直对齐方式，它是在子项中定义。

在实际开发中，大多数情况下我们只会用到 align-items 这个属性，另外两个属性比较少用到。