CSS中flex布局 弹性盒模型

html,body{height: 100%;}
   /* flex栅格 */
.flex-col {overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-box; 
display: -ms-flexbox; display: flex; flex-direction: column;
-webkit-box-orient: vertical; -webkit-flex-direction: column; 
-ms-flex-direction: column; background:#fff; }
.flex-row {overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-box; 
display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; 
-ms-flex-direction: row;}
.flex-1 { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1;}
.flex-2 { -webkit-box-flex: 2; -webkit-flex: 2; -ms-flex: 2; flex: 2;}
.flex-3 { -webkit-box-flex: 3; -webkit-flex: 3; -ms-flex: 3; flex: 3;}
.flex-4 { -webkit-box-flex: 4; -webkit-flex: 4; -ms-flex: 4; flex: 4;}
.align-stretch { -webkit-box-align: stretch; -webkit-align-items: stretch; 
-ms-align-items: stretch; -ms-flex-align: stretch; align-items: stretch;}
.align-center { -webkit-box-align: center; -webkit-align-items: center; 
-ms-align-items: center; -ms-flex-align: center; align-items: center;}
.justify-center { -webkit-box-pack: center; -ms-box-pack: center; 
-webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;}
.flex-wrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.scroll_cont {overflow: auto; box-sizing: border-box; width: 100%; height: 100%; overflow: auto;
 -webkit-overflow-scrolling: touch;}
.scroll_cont {-ms-overflow-style:none; overflow:-moz-scrollbars-none;}
.scroll_cont::-webkit-scrollbar{ width:0px;}

.flex-col	定义一个纵向flex容器。
.flex-row	定义一个横向flex容器。
.flex-1，  .flex-2，  .flex-3，  .flex-4	定义flex盒子的主轴尺寸占比。  即，在纵向容器中控制高度，在横向容器中控制宽度。
.align-stretch	flex盒子在侧轴方向伸展。
.align-center	flex盒子在侧轴方向居中对齐。
.justify-center	flex盒子在主轴方向居中对齐。
.flex-wrap	允许flex盒子换行显示，默认不换行。
.scroll_cont	带滚动条区域

父元素设置： display:flex

垂直居中：     align-items:center;        / /放在父元素里子元素居中

水平居中： justify-content:center;     / /放在父元素里子元素居中