CSS Flexbox:align-items

align-items简介
align-items属性在CSS新弹性盒模型中是比较常用的,本文将带你深入理解align-items属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上align-items的实例,希望能够对你有所帮助。
align-items定义和用法

align-items:flex-start | flex-end | center | baseline | stretch

默认值stretch

适用于:弹性盒模型容器

继承性:无

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


来源:http://caibaojian.com/css3/properties/flex/align-items.htm
2020-01-16 10:39 举报

关于挟翼

挟翼一款提供UI页面设计的软件。
您只需要动一动鼠标绘制相关的元素,软件会自动帮你完成CSS样式和HTML代码。
从现在开始注册,立即赠送一年VIP会员。活动结束日期待定。