1.基本概念
注意：设为 Flex 布局以后，子元素的float，clear和vertical-align属性将失效
2.容器的属性
//决定主轴的方向；水平向右，水平向左，垂直向下，垂直向上
flex-direction：row | row-reverse | column | column-reverse
//决定如何换行；不换行，第一行在上方，第一行在下方
flex-wrap：nowrap | wrap | wrap-reverse;
//flex-direction属性和flex-wrap属性的简写形式
flex-flow：flex-direction flex-wrap
//决定对齐方式；左对齐，右对齐，居中，两端对齐，每个项目两侧的间隔相等
justify-content：flex-start | flex-end | center | space-between | space-around;
//决定在交叉轴上的对齐方式；起点对齐，终点对齐，中点对齐，第一行文字的基线对齐，项目未设置高度或设为auto将占满整个容器的高度
align-items：flex-start | flex-end | center | baseline | stretch;
//决定多根轴线的对齐方式；起点对齐，终点对齐，中点对齐，轴线之间的间隔平均分布，每根轴线两侧的间隔都相等，轴线占满整个交叉轴
align-content：flex-start | flex-end | center | space-between | space-around | stretch;
3.项目的属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
4.垂直居中实现
display:flex;
justify-content:center;
align-items:center;
