align-self

  • 版本:CSS3
  • 继承性:无

align-self语法:

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

默认值auto

适用于:弹性盒模型子元素

继承性:无

align-self取值:

auto:
如果'align-self'的值为'auto',则其计算值为元素的父元素的'align-items'值,如果其没有父元素,则计算值为'stretch'。
flex-start:
弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
flex-end:
弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
center:
弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
baseline:
如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
stretch:
如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。

align-self说明:

设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
  • 对应的脚本特性为alignItems

align-self兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
较早版本 6.0-10.0 4.0-19.0 5.1.7-6.0 21.0-28.0-webkit- 9.5-12.0
较新版本 11.0 20.0 7.0-webkit- 29.0 12.1

align-self示例:

由FlexBox算法强力驱动的Weex布局引擎

Yoga本是Facebook在ReactNative里引入的一种跨平台的基于CSS的布局引擎,它实现了Flexbox规范,完全遵守W3C的规范...4月5日

我对Flexbox布局模式的理解

Flexbox,一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性。首先举一个栗子,之前我们是这样实现一个div盒子水平垂直居中的...5月24日

理解Flexbox:你需要知道的一切(一)

这篇文章介绍了Flexbox模块所有基本概念,而且是介绍Flexbox模块的很好的一篇文章,所以这篇文章非常的长,你要有所准备...3月28日

CSS3 Flexbox属性视觉指南 | Scotch

}旁注这是你需要在父容器上设置的唯一属性,所有它的直接子元素都自动成为flex项目。有很多种方法分组flexbox属性...4月23日

CSS Flexbox 学习指南、工具与框架

Flexbox是一种更有效的布局方式,它能更好的分配容器空间,并控制项目的对齐。虽然,掌握它的理论有些复杂,但幸运的是,我们可以借助开放的网络来学习并逐步掌握它...2月18日

Stack自动布局:Sketch中的Flexbox

Stack的自动布局可以再次改变整个局面。Sketch用户终于可以在不用CSS的情况下,直接使用Flexbox的排版技术。我们相信,推动设计生态前进的关键在于...2月26日

Web布局新系统:CSS Grid,Flexbox和Box Alignment

虽然我们使用很多技术手段能实现Web的固定布局,但是这些方法在响应式设计中又出现很多局限性与不足。不过值得庆幸的是,我们有了Flexbox模块...2016年12月19日

使用FlexBox:实现兼容新旧浏览器的最佳方案

FlexBox是非常杰出的,同时也是未来的布局方式之一。在过去的几年里...2016年11月3日

基础篇章:React Native之Flexbox的讲解(Height and Width)

大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间)今天在讲解Flexbox之前,我们先讲解一下高度和宽度的问题...2016年10月16日

[原]混合开发的大趋势之一React Native Height and Width (尺寸),Flexbox(位...

那么就会按照比值大小来分配尺寸,诸如安卓的Layout_weightLayoutwithFlexboxflexbox规则来指定某个组件的子元素的布局...2016年8月20日

React Native 之 flexbox 布局详解篇 (清晰明了)

比较简单。RN的而布局是用css中的flexbox布局,所以布局起来与android传统的布局样式有点像...2016年6月5日

最后说一个Flexbox实现的水平、垂直居中例子:伸缩容器设置如下样式,伸缩项目无论是否定义宽高都可实现水平、垂直居中效果。html代码...2016年5月18日

2、React Native中的flexbox布局

不论是Android还是iOS还是web前端,都有涉及到,ReactNative中也有布局,主要采用了类似css中的flexbox布局...2016年1月23日

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册