CSS3弹性布局align-items和align-self垂直轴方向行对齐属性详解及实例
来源:互联网 发布:手机淘宝联盟自己购买 编辑:程序博客网 时间:2024/05/01 17:32
弹性项目可以按弹性容器当前行的cross axis来对齐,和justify-content类似,但在垂直方向上。其中align-items属性用于弹性容器,而align-self用于弹性项目。 align-items
为弹性容器中所有项目设置缺省对齐属性,包括匿名弹性项目。align-self
可以为单独的弹性项目设置对齐来覆盖缺省值。 (对于匿名弹性项目,align-self总是匹配对应弹性容器的align-items的值。)
如果弹性项的cross-axis外边距是auto,align-self属性没有效果。
align-items和align-self的语法如下:
align-self属性取值auto时,将计算为其父元素的align-items值,或者为stretch如果没有父元素的话。对齐属性的取值定义如下:
flex-start
弹性项的cross-start margin的边紧挨着该行的cross-start的边(一般来说,就是挨着弹性容器顶部)。
flex-end
弹性项的cross-end margin的边紧挨着该行的cross-end的边(一般来说,就是挨着弹性容器底部)。
center
弹性项的margin box在该行的cross axis上居中(垂直居中对齐)。(如果该弹性行的cross size小于弹性项,将在两个方向上同时溢出。)
baseline
如果弹性项的行内轴(inline axis)和垂直轴(cross axis)一致,该值等同于flex-start。否则,它参与基线对齐(baseline alignment):所有参与的弹性项按基线对齐,而基线和cross-start margin的边距离最大的项目被放在该行cross-start的边上(一般来说,就是基线和容器顶部距离最大的项目被定位在最上边)。
stretch
如果弹性项的垂直尺寸(cross size)属性(一般来说,就是高度)是auto,并且没有垂直外边距(cross-axis margin)是auto的,该弹性项被拉伸以适应容器高度, 其所使用的值是使项目的外边框(margin box)的垂直尺寸尽可能接近和行相同的尺寸,并依然遵循min-height/min-width/max-height/max-width属性的限制。
注意:如果弹性容器的高度被限制,该值可能会导致该项的内容溢出。
弹性项的顶部挨着容器的顶部。
上图包含5个例子,每个例子的弹性容器中包含4个不同颜色的弹性项目,最下面的弹性项目带有文本基线。
该图很直观的演示了这些取值的效果和差异。我们可以通过在线实例代码来测试这个属性:
http://wow.techbrood.com/fiddle/17130
by iefreer
- CSS3弹性布局align-items和align-self垂直轴方向行对齐属性详解及实例
- flex布局justify-content属性和align-items,align-self属性
- 垂直对齐:vertical-align属性
- flex布局中align-items 和align-content的区别
- flex布局中align-content和align-items的区别
- 7.4 垂直对齐:vertical-align属性
- 垂直对齐:vertical-align属性(转贴)
- 垂直对齐:vertical-align属性(转)
- css弹性盒模型属性align-items与justify-content
- css3中 resize 、outline-offset、outline align-items属性 inherit和auto的区别
- CSS3 box-align 属性
- vertical-align 垂直对齐方式
- align-items
- vertical-align 属性设置元素的垂直对齐方式。
- CSS3 弹性布局弹性流(flex-flow)属性详解和实例
- CSS中flex布局中align-items 和align-content的区别
- vertical-align属性详解
- align-self
- java单例模式
- 钢琴白块之画轨道
- HDU 1518 Square 搜索
- Python学习笔记(一)
- SharedPreference 工具类
- CSS3弹性布局align-items和align-self垂直轴方向行对齐属性详解及实例
- C++工作现在需求怎么样,如何应对
- 快速幂
- Android中Notification的使用
- PAT-A1061 Dating (20)(模拟)
- 统计你的手机号码中出现次数最多的数字,并打印出此数字及其出现次数
- 【小笔记】设置圆角、边框
- Android自定义控件
- uva 11461 数学