CSS - align-items 屬性

上一頁
下一頁

CSS align-items 屬性集體設定所有直接子元素的 align-self 值。在 Flexbox 中，它在交叉軸上對齊專案，而在 Grid Layout 中，它在網格區域內的塊軸上對齊專案。

語法

align-items: normal | stretch | center | flex-start | flex-end | baseline | initial | inherit;

屬性值

值 描述
normal 對於 flexbox 和 grid 專案，它的行為類似於“stretch”，或者對於具有定義的塊大小的 grid 專案，它的行為類似於“start”。預設值。
stretch 專案被拉伸以適應容器。
center 專案放置在容器的中心位置。
flex-start 專案放置在容器的起始位置。
flex-end 專案放置在容器的結束位置。
start 專案放置在其各個網格單元格的開頭，在塊方向上。
end 專案放置在其各個網格單元格的末尾，在塊方向上。
baseline 專案放置在容器的基線位置。
initial 這將屬性設定為其預設值。
inherit 這從父元素繼承屬性。

CSS Align Items 屬性示例

以下示例描述了使用不同值的 align-items 屬性。

拉伸 Flex 專案

要垂直拉伸 flex 專案以填充 flex 容器的整個空間，我們使用 stretch 值。在以下示例中，使用了 stretch 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            align-items: stretch;
            border: 1px dashed black;
            height: 200px;
            gap: 10px;
        }

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

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

</html>

居中 Flex 專案

要將 flex 專案對齊到容器交叉軸的中心，我們使用 center 值。在以下示例中，使用了 center 值。

示例

<!DOCTYPE html>
<html>

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

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

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

</html>

Flex 專案在起始位置

要將 flex 專案對齊到容器交叉軸的開頭，我們使用 flex-start 值。在以下示例中，使用了 flex-start 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            align-items: flex-start;
            border: 1px dashed black;
            height: 200px;
            gap: 10px;
        }

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

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

</html>

Flex 專案在結束位置

要將 flex 專案對齊到容器交叉軸的末尾，我們使用 flex-end 值。在以下示例中，使用了 flex-end 值。−

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            align-items: flex-end;
            border: 1px dashed black;
            height: 200px;
            gap: 10px;
        }

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

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

</html>

Flex 或非 Flex 專案在起始位置

要將 flex 和非 flex 專案對齊到容器交叉軸的開頭，我們使用 start 值。在以下示例中，網格顯示與 align-items 的 start 值一起使用。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
            align-items: start;
            border: 1px dashed black;
            height: 200px;
        }

        .grid-item {
            background-color: grey;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <h2>CSS align-items property</h2>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
        <div class="grid-item">Item 4</div>
        <div class="grid-item">Item 5</div>
        <div class="grid-item">Item 6</div>
    </div>
</body>

</html>

Flex 或非 Flex 專案在結束位置

要將 flex 和非 flex 專案對齊到容器交叉軸的末尾，我們使用 end 值。在以下示例中，網格顯示與 align-it 的 end 值一起使用。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
            align-items: end;
            border: 1px dashed black;
            height: 200px;
        }

        .grid-item {
            background-color: grey;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <h2>CSS align-items property</h2>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
        <div class="grid-item">Item 4</div>
        <div class="grid-item">Item 5</div>
        <div class="grid-item">Item 6</div>
    </div>
</body>

</html>

Flex 專案在基線

要沿其基線對齊 flex 專案，我們使用 baseline 值。在以下示例中，使用了 baseline 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            align-items: baseline;
            border: 1px dashed black;
            height: 200px;
            gap: 10px;
        }

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

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

</html>

透過 Normal 拉伸 Flex 或非 Flex 專案

要將 flex 或非 flex 專案對齊以垂直拉伸以填充容器，我們使用 normal 值。在以下示例中，normal 值與非 flex 專案一起使用。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
            align-items: stretched;
            border: 1px dashed black;
            height: 200px;
        }

        .grid-item {
            background-color: grey;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <h2>CSS align-items property</h2>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
        <div class="grid-item">Item 4</div>
        <div class="grid-item">Item 5</div>
        <div class="grid-item">Item 6</div>
    </div>
</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
align-items 57.0 16.0 52.0 10.1 44.0
css_properties_reference.htm
列印頁面
上一頁
下一頁
廣告