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
打印页面
上一页
下一页
广告