CSS中flex布局 弹性盒模型

WEB前端 waitig 333℃ 百度已收录 0评论

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;     / /放在父元素里子元素居中


本文由【waitig】发表在等英博客
本文固定链接:CSS中flex布局 弹性盒模型
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)