父元素:{
display: -webkit-box;/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;/* TWEENER - IE 10 */
display: -webkit-flex;/* NEW - Chrome */
display: flex;/* 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- */
width:20%;/* For old syntax, otherwise collapses. */
-webkit-flex:1;/* Chrome */
-ms-flex:1;/* IE 10 */
flex:1;/* NEW, Spec - Opera 12.1, Firefox 20+ */
}
注意:如果子元素是a或者span之類的行內元素,記得給子元素添加display:block屬性。