首页 > 代码库 > flex多栏布局
flex多栏布局
解决问题:(首页布局要求所有手机都是一样的效果,不允许出现滚动条)
类似于上图这种布局:
1、首先将这三块用一个div包起来,结构如下图:
2、设置父元素index-wrapper及子元素三块的的样式:
2.1 将父元素设置display:flex;(flex布局)flex-flow:column;(方向:纵向)
2.2 子元素设置每一块所占的等分:flex:1(主要是看盒子所占的高度)
2.3 如果要求水平垂直都居中,则设置margin:auto
.index-wrapper{ width:100%; height:100%; display:flex; display: -webkit-flex; display: -ms-flex; flex-flow:column; -webkit-flex-flow:column; -webkit-ms-flow:column; } .rmbBox{ flex:2; -webkit-flex:2; -ms-flex:2; text-align: center; color: #8c8c8c; margin-top: 1rem; position: relative; } .num-wrapper{ display:flex; display: -webkit-flex; display: -ms-flex; flex:1; -webkit-flex:1; -ms-flex:1; width:72.8%; margin:auto; } .btnBox{ display:flex; display: -webkit-flex; display: -ms-flex; flex:2; -webkit-flex:2; -ms-flex:2; width:84%; height:auto; margin:auto; }
这样就可以实现三个盒子纵向排列垂直水平居中啦!第一次贴自己的代码,表述不清楚的地方还请见谅,哈哈哈~欢迎指正~
flex多栏布局
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。