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,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
21* | 28 | 11 | 12 | 6.1* |
移动设备/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 4.4 | 7.0-7.1* |
有关如何混合语法以获得最佳浏览器支持的更多信息,请参阅 这篇文章(CSS-Tricks) 或 这篇文章(DevOpera)。
我认为这篇文章中的支持表格可能并不完全准确——我找不到旧 flexbox (display: box;) 的对应属性。我是不是漏掉了什么?
我也认为这里的支持表格有点奇怪。我不认为 Safari 支持 align-self
是的,我也有同样的问题。Safari 不支持 align-self
Safari 在 7.0+ 版本中支持它,使用 -webkit-align-self
https://w3schools.org.cn/cssref/css3_pr_align-self.asp
仍然无效 :(
我来晚了,但对于拉杰和我之后的所有人来说……
-webkit 解决方案有效,假设你为所有 flex 引用包含了备用样式。这里有完整的解释 (https://css-tricks.org.cn/using-flexbox/).
从表面上看,align-self:baseline; 和 align-self:flex-start 似乎做着相同的事情。至少我在网站上使用其中任何一个时,感觉就是这样。我肯定错过了一些东西。所以有人能详细解释一下这两者的区别吗?提前感谢。
你好,我想把日期-年的显示从上到下更改?这可以用 CSS 实现吗?