©
Dokumen ini menggunakan Manual laman web PHP Cina Lepaskan
align-self:auto | flex-start | flex-end | center | baseline | stretch
默认值:auto
适用于:flex子项
继承性:无
动画性:是
计算值:如果值为「auto」,则计算值为父元素的 <' align-items '> 值,否则为指定值。
auto:如果'align-self'的值为'auto',则其计算值为元素的父元素的'align-items'值,如果其没有父元素,则计算值为'stretch'。
flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。
对应的脚本特性为alignSelf。
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0-10.0 | 2.0-21.0 | 4.0-20.0 | 6.0 | 15.0+-webkit- | 6.0-6.1 | 2.1-4.3 | 18.0-19.0 |
11.0+ | 22.0+ | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit- | |
29.0+ | 9.0+ | 9.0+ | 28.0+ |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>align-self_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> h1{font:bold 20px/1.5 georgia,simsun,sans-serif;} .box{ display:-webkit-flex; display:flex; -webkit-align-items: flex-end; height:100px;margin:0;padding:10px;border-radius:5px;list-style:none;background-color:#eee;} .box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;} .box li:nth-child(1){ -webkit-align-self: flex-end; align-self: flex-end; } .box li:nth-child(2){ -webkit-align-self: center; align-self: center; } .box li:nth-child(3){ -webkit-align-self: flex-start; align-self: flex-start; } .box li:nth-child(4){ -webkit-align-self: baseline; align-self: baseline; padding:20px 10px; } .box li:nth-child(5){ -webkit-align-self: baseline; align-self: baseline; } .box li:nth-child(6){ -webkit-align-self: stretch; align-self: stretch; } .box li:nth-child(7){ -webkit-align-self: auto; align-self: auto; } </style> </head> <body> <h1>align-self示例:</h1> <ul id="box" class="box"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例