**CSS3的进阶特性**
- verticle-align
- 垂直对齐方式
- 只对容器内的inline-block元素起作用：图片，按钮，单复选框，单行/多行文本框等HTML控件
- top, text-top, middle, bottom, text-bottom, baselinehttp://www.zhangxinxu.com/study/201005/verticle-align-test-demo.html- flex```
1
2
3
4
.flex-container{
width: 160px;
height: 100px;
background: #FFD54F;
display: flex;
/* flex-direction: row;
flex-wrap: wrap;*/
}
.flex-item{
background: white;
width: 40px;
height: 40px;
text-align: center;
vertical-align: middle;
margin: 4px;
text-align: center;
}
.flex-item-inner{
left: 5px;
top: 5px;
position: relative;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 20px;
border-radius: 50%;
color: white;
background: orange;
}``` - ie9开始支持 - display:flex; - justify-content: 主轴对齐方式 - align-items: 副轴对齐方式 - order: 顺序 - wrap: 是否换行 默认不换 - flex-basis: 在还有剩余空间时的 - flex-grow: - flex-shrink:- transform translateX translateY scale rotate- 动画transition- 动画animation
