align-self

Avatar of 34 Cross
34 Cross

DigitalOcean 为您的旅程的每个阶段提供云产品。立即开始使用 $200 的免费积分!

align-self 属性是 灵活盒子布局模块 的子属性。

它允许您覆盖特定灵活项目的 align-items 值。

align-self 属性接受与 align-items 相同的 5 个值

  • flex-start:项目的跨起始边距边缘放置在跨起始线上
  • flex-end:项目的跨结束边距边缘放置在跨结束线上
  • center:项目在跨轴上居中
  • baseline:项目按其基线对齐
  • stretch(默认):拉伸以填充容器(仍然尊重 min-width/max-width)

语法

align-self: auto | flex-start | flex-end | center | baseline | stretch

.flex-item {
  align-self: flex-end;
}

演示

以下演示展示了项目如何在灵活容器中根据 align-self 值自行对齐

  • 第一个项目设置为 flex-start
  • 第二个项目设置为 flex-end
  • 第三个项目设置为 center
  • 第四个项目设置为 baseline
  • 第五个项目设置为 stretch

查看 CodePen 上 CSS-Tricks (@css-tricks) 的笔 align-self 演示

相关属性

其他资源

浏览器支持

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
21*2811126.1*

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
1271274.47.0-7.1*

有关如何混合语法以获得最佳浏览器支持的更多信息,请参阅 这篇文章(CSS-Tricks)这篇文章(DevOpera)