用Flex实现常见的几种布局

1.水平，垂直居中。

    
	
     
    
复制代码

2. 左边固定宽度，右边占满宽度

    
	
     
	
     
    
复制代码

3.顶部固定高度，下部占满剩余高度

    
	
     
	
     
    
复制代码

4.顶部，底部固定高度，中间占满剩余高度

    
	
     
	
     
	
     
    
复制代码

5.中部占满剩余高度，此元素内部采用"左边固定宽度，右边占满剩余宽度"

    
	
     
	
     
	  
      
		  
      
		
     
	
     
    
复制代码

Flex兼容性写法

1.盒子的兼容性写法：

.box{    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */    display: -moz-box;      /* 老版本语法: Firefox (buggy) */    display: -ms-flexbox;   /* 混合版本语法: IE 10 */   } 复制代码

2.子元素的兼容性写法：

.flex1 {                -webkit-flex: 1;        /* Chrome */      -ms-flex: 1             /* IE 10 */      flex: 1;                /* Spec - Opera 12.1, Firefox 20+ */    -webkit-box-flex: 1     /* 老版本语法 - iOS 6-, Safari 3.1-6 */      -moz-box-flex: 1;       /* 老版本语法 - Firefox 19- */      } 复制代码

最后附上各个浏览器对Flex的支持程度: