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

列印頁面