MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

这篇翻译不完整。请帮忙从英语翻译这篇文章

概述

CSS 属性 align-self 会对齐当前 flex 行中的 flex 元素,并覆盖 align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto,则会忽略 align-self。

初始值auto
适用元素flex items, including in-flow pseudo-elements
是否是继承属性
适用媒体visual
计算值auto computes to itself on absolutely-positioned elements, and to the computed value of align-items on the parent (minus any legacy keywords) on all other boxes, or start if the box has no parent. Its behavior depends on the layout model, as described for justify-self. Otherwise the specified value.
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

可以参考 使用 CSS 弹性框 获取更多信息。

语法

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

align-self: inherit

auto
设置为父元素的 align-items 值,如果该元素没有父元素的话,就设置为 stretch
flex-start
flex 元素会对齐到 cross-axis 的首端。
flex-end
flex 元素会对齐到 cross-axis 的尾端。
center
flex 元素会对齐到 cross-axis 的中间,如果该元素的 cross-size 的尺寸大于 flex 容器,将在两个方向均等溢出。
baseline
所有的 flex 元素会沿着基线对齐,The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line。
stretch
flex 元素将会基于容器的宽和高,按照自身 margin box 的 cross-size 拉伸。

语法格式

Formal syntax: auto | flex-start | flex-end | center | baseline | stretch

规范

Specification Status Comment
CSS Box Alignment Module
align-self
Working Draft  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 21.0-webkit
36.0
18.0 (18.0) (behind a pref) [1]
20.0 (20.0)
11.0 12.10 未实现
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? 未实现 12.10 未实现

[1] Firefox supports only single-line flexbox until Firefox 28. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true.

参考

文档标签和贡献者

 此页面的贡献者: yofine, fscholz, Go7hic, Sebastianz, FredWe
 最后编辑者: yofine,