flex-兼容.md

title	date	tags
flex 兼容	2018-05-10 03:25:49 -0700	css flex

flex 兼容

Flex 布局教程 --阮一峰

使用Flexbox：新旧语法混用实现最佳浏览器兼容

样式书写先后顺序，新语法在最后，如下：

.selector {
    /* display */
	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+ */
    
    /* flex */
    -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+ */
}