CSS align-self 属性

CSS align-self 语法

在 CSS 中，align-self 属性用于定义单个子元素在其垂直方向上的对齐方式，因此它是在子元素中使用，而不是在父元素中使用。

语法：

align-self: 关键字;

说明：

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

align-self 属性取值
属性	说明
auto（默认值）	子元素继承其父容器的 align-items 值。如果父容器没有设置 align-items，则默认值为 stretch
stretch	子元素高度拉伸与父元素高度相同
flex-start	子元素在顶部
flex-end	子元素在底部
center	子元素在中间
baseline	子元素根据文本基线对齐

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

与 align-content 属性不一样，align-self 属性是不存在 space-between、space-around 和 space-evenly 这几种取值的。
align-self 会覆盖父容器设置的 align-items 属性。

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

CSS align-self 摘要

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

CSS align-self 示例

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

示例：align-self 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .box {
            display: flex;
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .box > div {
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border: 1px solid silver;
            background-color: hotpink;
        }
        .box > div:first-child {
            align-self: center;
        }
    </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-self 示例

分析：

.box > div:first-child {
    align-self: center;
}

上面代码表示设置 flex 容器中第 1 个子元素在垂直方向中居中。需要注意的是，align-self 是在子元素中设置的。

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