box flex flexbox比较
box | flexbox | flex | |
year | 2009 | 2011 | 2012 |
hack |
-moz-box -webkit-box -o-box |
-ms-flexbox | -webkit-flex |
parent |
box-orient box-direction box-pack box-align |
flex-pack |
flex-flow: direction wrap; align-items 垂直排列 align-content 多列垂直排列 justify-content 水平排列 |
children |
box-flex box-ordinal-group |
flex: flex-grow flex-shrink flex-basis align-self |
flex兼容性写法
display: box;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
*运用之后,float,vertical-align,clear会失效