CSS - align-self 属性

CSS 的 align-self 属性控制使用 Flexbox 或 Grid 布局的容器中单个项目的对齐方式。虽然 align-items 用于设置容器中所有项目的默认对齐方式，但 align-self 会覆盖特定项目的该对齐方式。

在 Flexbox 中，项目沿交叉轴对齐，而在 Grid 中，该属性会对齐网格区域内的项目。

语法

align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;

属性值

值	描述
auto	元素继承其父容器的 align-items 属性，如果没有父容器，则使用“stretch”。默认值。
stretch	元素放置在适合容器的位置。
center	元素放置在容器的中心位置。
flex-start	元素放置在容器的起始位置。
flex-end	元素放置在容器的结束位置。
baseline	元素放置在容器的基线位置。
initial	将属性设置为其默认值。
inherit	从父元素继承该属性。

CSS Align Self 属性示例

以下示例说明了使用不同值的 align-self 属性。

Flex 项目的默认位置

为了让 Flex 项目根据 align-items 属性指定的位置进行定位，而无需设置其自身的位置，我们使用 auto 值。在以下示例中，第三个 Flex 项目设置为 Flex 容器内的初始位置。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex_container {
            display: flex;
            align-items: center;
            border:1px solid black;
            height: 300px;
            gap:10px;
        }

        .flex_container div {
            background-color: grey;
            border:2px solid black;
           
        }

        .flex-item {
            align-self: auto;
        }
    </style>
</head>

<body>
    <h2>CSS align-self property</h2>
    <div class="flex_container">
        <div>Flex item 1</div>
        <div>Flex item 2</div>
        <div class="flex-item">Flex item 3</div>
        <div>Flex item 4</div>
        <div>Flex item 5</div>
    </div>
</body>

</html>

拉伸 Flex 项目

为了让 Flex 项目定位到适合容器的位置，我们使用 stretch 值。在以下示例中，各个 Flex 项目垂直拉伸以填充 Flex 容器的可用空间。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            border:1px solid black;
            height: 350px;
            flex-wrap: wrap;
            align-items: center;
            gap:10px;
        }

        .flex-container div {
            background-color: grey;
            border:2px solid black;
            
        }
        .flex-item{
            align-self:stretch;
        }
    </style>
</head>

<body>
    <h2>CSS align-self property</h2>
    <div class="flex-container">
        <div>Flex item 1</div>
        <div>Flex item 2</div>
        <div class="flex-item">Flex item 3</div>
        <div>Flex item 4</div>
    </div>
</body>

</html>

Flex 项目居中

为了让 Flex 项目相对于其他 Flex 项目的定位在中心位置，我们使用 center 值。在以下示例中，第三个 Flex 项目设置为 Flex 容器交叉轴的中心。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex_container {
            display: flex;
            border:1px solid black;
            height: 300px;
            gap:10px;
        }

        .flex_container div {
            background-color: grey;
            border:2px solid black;
            height: 50px;
        }

        .flex-item {
            align-self: center;
        }
    </style>
</head>

<body>
    <h2>CSS align-self property</h2>
    <div class="flex_container">
        <div>Flex item 1</div>
        <div>Flex item 2</div>
        <div class="flex-item">Flex item 3</div>
        <div>Flex item 4</div>
        <div>Flex item 5</div>
    </div>
</body>

</html>

Flex 项目位于起始位置

为了让 Flex 项目相对于其他 Flex 项目的定位在起始位置，我们使用 flex-start 值。在以下示例中，第三个 Flex 项目设置为 Flex 容器交叉轴的起始位置。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex_container {
            display: flex;
            align-items: center;
            border:1px solid black;
            height: 300px;
            gap:10px;
        }

        .flex_container div {
            background-color: grey;
            border:2px solid black;
            height: 50px;
        }

        .flex-item {
            align-self: flex-start;
        }
    </style>
</head>

<body>
    <h2>CSS align-self property</h2>
    <div class="flex_container">
        <div>Flex item 1</div>
        <div>Flex item 2</div>
        <div class="flex-item">Flex item 3</div>
        <div>Flex item 4</div>
        <div>Flex item 5</div>
    </div>
</body>

</html>

Flex 项目位于结束位置

为了让 Flex 项目相对于其他 Flex 项目的定位在结束位置，我们使用 flex-end 值。在以下示例中，第三个 Flex 项目设置为 Flex 容器交叉轴的结束位置。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex_container {
            display: flex;
            align-items: center;
            border:1px solid black;
            height: 300px;
            gap:10px;
        }

        .flex_container div {
            background-color: grey;
            border:2px solid black;
            height: 50px;
        }

        .flex-item {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <h2>CSS align-self property</h2>
    <div class="flex_container">
        <div>Flex item 1</div>
        <div>Flex item 2</div>
        <div class="flex-item">Flex item 3</div>
        <div>Flex item 4</div>
        <div>Flex item 5</div>
    </div>
</body>

</html>

Flex 项目位于基线

为了让 Flex 项目定位到容器的基线，我们使用 baseline 值。在以下示例中，第三个 Flex 项目设置为容器的基线。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex_container {
            display: flex;
            align-items: center;
            border:1px solid black;
            height: 300px;
            gap:10px;
        }

        .flex_container div {
            background-color: grey;
            border:2px solid black;
            height: 50px;
        }

        .flex-item {
            align-self: baseline;
        }
    </style>
</head>

<body>
    <h2>CSS align-self property</h2>
    <div class="flex_container">
        <div>Flex item 1</div>
        <div>Flex item 2</div>
        <div class="flex-item">Flex item 3</div>
        <div>Flex item 4</div>
        <div>Flex item 5</div>
    </div>
</body>

</html>

支持的浏览器

属性
align-self	57.0	16.0	52.0	10.1	44.0

css_properties_reference.htm

打印页面