flex是css3特性之一，但在实际写时却是出现各种不兼容问题，下面就列出flex兼容写法

兼容范围：ios 4+、android 2.3+、winphone8+、IE10+、Safari、Opera、Chrome、Firefox

flex：定义布局为盒模型

              
1
2
3
4
5
6
7
8
              .flex{ 
     display: -webkit-box; 
     display: -webkit-flex;
     display: -ms-flexbox; 
     display: -moz-box; 
     display: -moz-flex; 
     display: flex;
 }

            

flex-v：盒模型垂直布局

              
1
2
3
4
5
6
7
8
9
               .flex-v{
 -webkit-box-orient: vertical;
 -webkit-flex-direction: column;
 -moz-box-orient: vertical;
 -moz-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column; 
} 


            

flex-1：子元素占据剩余的空间

              
1
2
3
4
5
6
7
8
              .flex-1{ 
-webkit-box-flex: 1;
 -webkit-flex: 1;
 -moz-box-flex: 1;
 -moz-flex: 1;
 -ms-flex: 1;
 flex: 1; 
}

            

flex-align-center：子元素垂直居中

              
1
2
3
4
5
6
7
8
               .flex-align-center{ 
 -webkit-box-align: center;
 -webkit-align-items: center;
  -moz-box-align: center;
  -moz-align-items: center;
  -ms-flex-align: center;
 align-items: center; 
}

            

flex-pack-center：子元素水平居中

              
1
2
3
4
5
6
7
8
               .flex-pack-center{ 
-webkit-box-pack: center; 
-webkit-justify-content: center; 
-moz-box-pack: center; 
-moz-justify-content: center; 
-ms-flex-pack: center; 
justify-content: center; 
} 

            

flex-pack-justify：子元素两端对齐

              
1
2
3
4
5
6
7
8
              .flex-pack-justify{ 
-webkit-box-pack: justify;
 -webkit-justify-content: space-between;
 -moz-box-pack: justify;
 -moz-justify-content: space-between;
 -ms-flex-pack: justify;
 justify-content: space-between; 
}

            

有用就赞一下吧 👇