html5弹性布局两行三列,display:flex 多栏多列布局

转自：http://www.360doc.com/content/14/0811/01/2633_400926000.shtml

display:flex 多栏多列布局浏览器支持情况：火狐直接支持w3c无前缀写法，谷歌和opera支持-webkit- 前缀写法，比较适合移动端开发使用，

display:flex 这个牛逼的css3布局属性，遗憾的是只有谷歌和火狐支持，

中国人常用的手机上的浏览器几乎全军覆没，UC浏览器不支持，安卓4.1.1和之前版本手机自带的浏览器也不支持，微信自带浏览器也不支持。

看来要留给儿子们用了。

示例:

html,body{ padding:0; margin:0;}

/*

flex-flow: row wrap; row横向(左向右)显示 column竖向(上向下)显示 wrap一行显示不完的时候换行

*/

.col{ border:red solid 1px;}

footer { height:300px;

display: -webkit-flex;

-webkit-flex-flow: row;

-webkit-align-items: stretch;

-webkit-justify-content:space-between;

/*IE10还不支持*/

display: -ms-flex;

-ms-flex-flow: row wrap;

-ms-align-items: stretch;

-ms-justify-content:space-between;

display: flex;

flex-flow: row;