flex速记 和 flex 在IE下兼容问题解决

flex 速记：

属性值标识：
reverse -> 反方向
start -> 左/上
end -> 右/下
baseline -> 第一行文字基线
stretch -> 撑开
between -> 两端对齐，间隔均分
around -> 项目两侧间隔相等
默认值 -> 第一个值

auto ->  1 1 auto
none -> 0 0 auto

一、容器属性
主轴方向： flex-direction：row | row-reverse | column | column-reverse;（横|竖）
主轴换行： flex-wrap：nowrap | wrap | wrap-reverse;
对齐方式（主轴）： 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-end | center | space-between | space-around;

复合属性：flex-flow：<flex-direction> || <flex-wrap>; （主轴&换行）

二、项目属性

排列顺序：order：int; （升序）
放大比例：flex-grow：number; 
缩小比例：flex-shrink：number; 
主轴多余空间： flex-basis： length | auto;
覆盖父级：align-self：auto | flex-start | flex-end | center | baseline | stretch; （覆盖align-items）

复合属性：flex：none | [ <'flex-grow'> <'flex-shrink'> || <'flex-basis'> ] （0 1 auto）

三、IE浏览器兼容flex部分属性

1、居中问题：IE 下设置 align-items: center;

2、flex: 1;
标准浏览器下：flex: 1 1 auto;
IE下：flex: 1 1 0;
     =>兼容方法： flex:  1 1 auto;
         或者设置属性：flex-basis: auto;