box-align

http://caibaojian.com/demo/flexbox/align-items.html

align-items (适用于父类容器上)

设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法

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

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

CSS代码HTML代码

.box{display:-webkit-flex;display:flex;width:200px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}.box li{margin:5px;border-radius:5px;background:#aaa;text-align:center;}.box li:nth-child(1){padding:10px;}.box li:nth-child(2){padding:15px 10px;}.box li:nth-child(3){padding:20px 10px;}#box{-webkit-align-items:flex-start;align-items:flex-start;}#box2{-webkit-align-items:flex-end;align-items:flex-end;}#box3{-webkit-align-items:center;align-items:center;}#box4{-webkit-align-items:baseline;align-items:baseline;}#box5{-webkit-align-items:strecth;align-items:strecth;}

align-items示例：

align-items:flex-start

• a
• b
• c

align-items:flex-end

• a
• b
• c

align-items:center

• a
• b
• c

align-items:baseline

• a
• b
• c

align-items:strecth

• a
• b
• c

返回CSS3弹性盒模型的完整教程