CSS align-items 属性

CSS align-items 语法

在 CSS 中，align-items 属性用于定义子元素在垂直方向上的对齐方式（这里不考虑使用 flex-direction 改变方向）。

语法：

align-items: 关键字;

说明：

align-items 属性的取值有 4 种，如下表所示。

align-items 属性取值
属性	说明
stretch（默认值）	子元素高度拉伸与父元素高度相同
flex-start	子元素在顶部
flex-end	子元素在底部
center	子元素在中间
baseline	子元素根据其文本基线对齐

对于 align-items 属性，小伙伴们还要清楚以下几点。

与 align-content 属性不一样，align-items 属性是不存在 space-between、space-around 和 space-evenly 这几种取值的。
align-items 控制的是单行或多行项目在交叉轴上的对齐。如果弹性容器有多行（即 flex-wrap: wrap 或 wrap-reverse），则 align-items 控制每一行内部项目的对齐，而 align-content 控制多行整体在交叉轴上的对齐。

注意: align-items 属性只能应用于 Flex 容器和 Grid 容器，即 display 属性取值为 flex、inline-flex、grid 等的元素。

CSS align-items 摘要

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

CSS align-items 示例

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

示例：align-items 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .box {
            display: flex;
            align-items: 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-items 示例

分析：

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

align-items: center;

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

align-items: flex-end;

默认情况下，当子元素宽度之和大于父元素宽度时，子元素宽度就会被压缩。你可以给子元素设置一个 flex-shrink: 0;，然后再看看效果如何。

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 这个属性，另外两个属性比较少用到。