flex布局

1.flex优劣

优点：

CSS3的布局方式，可以在不使用其他框架，简便、完整、响应式地实现各种页面布局

缺点：

兼容性较差，IE浏览器版本在9.0以上，基本要10.0
对于其他浏览器，要求兼容性写法

目前而言，如果项目要求兼容IE低版本，还是不建议使用flex布局。

下面是引用的一张图片，简单的显示flex的兼容性：

Paste_Image.png

PS：flex的兼容性写法会写在文章最后

2.flex使用

Web的Flex弹性盒模型.png

3.flex兼容性写法

新版写法写在上方，旧版写法写在下方，例如：

盒子：
    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本语法: IE 10 */
子元素：
    -webkit-flex: 1;        /* Chrome */  
    -ms-flex: 1             /* IE 10 */  
    flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1     /* OLD - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: 1;       /* OLD - Firefox 19- */
其他属性以此类推