CSS align-self 属性
CSS align-self 属性
align-self
是 CSS3 中的一种属性,用于控制 flexbox 中单个元素在该行上的对齐方式。它可以设置在 flex 容器中的任意一个元素上。
语法
selector {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
auto
(默认值):元素沿着包含它的轴线垂直和平行的方向上自动对齐。flex-start
:元素向轴线起始位置对齐。flex-end
:元素向轴线结束位置对齐。center
:元素在轴线的中点位置对齐。baseline
:元素在它的基线上对齐。如果父元素没有基线,那么该元素会沿着父元素的假设基线对齐。stretch
:元素沿着轴线的整个高度进行拉伸,以填充父容器。
示例
以下是一个使用 align-self
的简单示例:
<div class="container">
<div class="item1">Item1</div>
<div class="item2">Item2</div>
<div class="item3">Item3</div>
</div>
.container {
display: flex;
align-items: center;
height: 200px;
}
.item2 {
align-self: flex-end;
}
这个例子中,容器采用了 flexbox 布局,并使用 align-items
属性将它的项目放置在垂直中心。然后,我们在第二个项目上使用了 align-self: flex-end
,将它向轴线结束位置对齐。这样,该项就会紧贴容器的底部,而不是在中心位置。
注意事项
align-self
只会影响flex容器中的单个项目。如果您需要更改容器中所有项目的对齐方式,请使用align-items
属性。- 如果您没有定义
align-items
属性,那么元素的align-self
设置将没有影响。 - 更改
align-self
属性通常需要对display
和flex-direction
属性进行适当的配置。 - 当您在包含元素中设置了
align-items
属性时,任何元素的align-self
属性都可以用来重写该值,从而以不同的方式对齐单个项目。