css 弹性盒子兼容写法,弹性布局flex 兼容写法

兼容浏览器版本

Chrome 21+

Opera 12.1+

Firefox 22+

Safari 6.1+

IE 10+

浏览器对最新flexbox规范的支持情况：

Chrome 29+

Firefox 28+

Internet Explorer 11+

Opera 17+

Safari 6.1+ (前缀 -webkit-)

Android 4.4+

iOS 7.1+ (前缀 -webkit-)

定义弹性布局盒子

display

display: -webkit-box; /老版本语法: Safari, iOS, Android browser, older WebKit browsers./

display: -moz-box; /老版本语法: Firefox (buggy)/

display: -ms-flexbox; /混合版本语法: IE 10/

display: -webkit-flex; /新版本 语法： Chrome 21+/

display: flex; /新版本语法： Opera 12.1, Firefox 22+/

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

定义子元素排列

flex-direction

-webkit-box-orient:vertical;

-webkit-box-direction:normal;

-moz-box-orient:vertical;

-moz-box-direction:normal;

flex-direction:column;

-webkit-flex-direction:column;

横向排列布局

justify-content

-webkit-justify-content:center;

justify-content:center;

-moz-box-pack:center;

-webkit--moz-box-pack:center;

box-pack:center;

竖向排列布局

align-items

align-items:center;

-webkit-align-items:center;

box-a