弹性盒模型（Flexible Box或Flexbox）是一个css3新增布局模块，
官方称为CSSFlexible Box Layout Module,用于实现容器里项目的对其、方向、排序。
弹性盒模型最大的特性在于，能够动态修改子元素的宽度和高度，以满足在不同尺寸屏幕下的恰当布局。
1.弹性容器（flex container）
2.弹性子元素（flex item）
3.轴分为主轴（main axis）侧轴（cross axis）,弹性子元素沿着主轴依次排列，侧轴垂直于主轴。
4.弹性容器的主轴开始（main start）、主轴结束（main end）和侧轴开始（cross start）、
侧轴结束（cross end）代表了弹性子元素排列的起始和结束位置。
http://caniuse.com 测试元素的浏览器兼容情况
flex-container 弹性容器属性
flex-direction 设置主轴方向，确定弹性子元素排列方式
row
row-reverse
column
column-reverse
flex-wrap 当弹性子元素超出弹性容器范围时是否换行
nowrap 默认值，溢出时不换行
wrap 溢出时自动换行
wrap-reverse 溢出时自动换行，翻转排列
flex-flow (flex-direction和flex-wrap属性的快捷方式，复合属性)
justify-content 设置弹性子元素在主轴上的对齐方式
flex-start 默认值，左对齐
flex-end 右对齐
center 居中对齐
space-between 第一个、最后一个对齐弹性容器的边缘，其余均匀分布。
space-around 全部均匀分布
align-items 弹性子元素在侧轴上的对齐方式
stretch 默认值，从侧轴开始到侧轴结束铺满整个侧轴
flex-start 侧轴开始对齐，顶对齐
flex-end 侧轴结束对齐
center 居中对齐
baseline 基线对齐
align-content 侧轴上有空白时，侧轴的对齐方式
stretch 默认值，各行伸展以占用剩余空间，如果剩余空间是负数，该值等效于flex-start
flex-start 主轴开始对齐，主轴为横轴，左对齐
flex-end 主轴结束对齐，主轴为横轴，右对齐
center 居中对齐
space-between 第一个、最后一个对齐弹性容器的边缘，其余均匀分布
space-around 全部均匀分布
flex items 弹性子元素属性
order 控制弹性容器里子元素的顺序
flex-grow 设置弹性子元素的扩展比率
flex-shrink 设置弹性子元素的收缩比率
flex-basis 指定弹性子元素伸缩前的默认大小值，相当于width和height属性。
flex flex-grow,flex-shrink和flex-basis属性的复合属性
align-self 设置弹性子元素在侧轴上的对齐方式，与align-item的相同
auto
flex-start
flex-end
center
baseline
stretch