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 从父元素继承该属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS Align Self 属性示例

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

Flex 项目的默认位置

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

示例

Open Compiler
<!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 容器的可用空间。

示例

Open Compiler
<!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 容器交叉轴的中心。

示例

Open Compiler
<!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 容器交叉轴的起始位置。

示例

Open Compiler
<!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 容器交叉轴的结束位置。

示例

Open Compiler
<!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 项目设置为容器的基线。

示例

Open Compiler
<!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>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
align-self 57.0 16.0 52.0 10.1 44.0
css_properties_reference.htm
广告