当前位置：首页 > Web前端 > CSS

常用页面布局flex写法

时间：2023-03-31 12:37:02 CSS

flex兼容写法父元素writing.box{display:-webkit-flex;/*新版本语法：Chrome21+*/显示：-webkit-box；/*旧版本语法：Safari、iOS、Android浏览器、旧版WebKit浏览器。*/显示：-moz-box；/*旧语法：Firefox（错误）*/显示：-ms-flexbox；/*混合语法：IE10*/display:flex;/*新版本语法：Opera12.1,Firefox22+*/}childelement.flex1{-webkit-flex:1;/*Chrome*/-ms-flex:1/*IE10*/-webkit-box-flex:1/*旧语法-iOS6-,Safari3.1-6*/-moz-box-flex:1;/*旧语法-Firefox19-*/flex:1;/*Spec-Opera12.1,Firefox20+*/}1.水平和垂直居中样式//html:11

//css:.box{高度:200px;宽度：200px；背景：#aaa；//以下3个样式的顺序不可更改。如果改了，就不会垂直和水平居中了。显示：弹性；对齐项目：居中；//垂直居中justify-content:center;//水平居中}.item{width:30px;高度：100px；background:#ff0;}左边固定宽度，右边全宽html:left:100px

右：自适应宽度

css:#box{width:400px;高度：200px；边框：1px实心#000；显示：flex;}.left{宽度：100px;高度：100%；背景：#FFFF00;}.right{height:100%;背景：#AAAAAA；弹性：1；基本网格布局html:

Fixed50px自动固定50px

1/21/2

1/4自动1/2autocss:#grid{宽度：400px;高度：200px；border:1pxsolid#000;}.grid-cell{宽度:100%;高度：50px；文本对齐：居中；顶部边距：10px；显示：弹性；对齐项目：中心；}。网格项目{高度：100%；背景：#EEEEEE;}.auto-item{高度：100%;背景：#aaffff；边框：1px实心#ffff7f；flex:1}.grid-cell:nth-child(2){justify-content:space-between;}.grid-cell:nth-child(2).grid-item{margin:10px;flex:1;}.grid-cell:nth-child(3){justify-content:space-between;}.grid-cell:nth-child(3).grid-item:nth-child(1){flex:1;}.grid-cell:nth-child(3).grid-item:nth-child(3){flex:2;}顶部固定高度，底部占据剩余高度html:topcontntscss:#body{width:200px;高度：300px；边框：1px实心#aaa；显示：弹性；flex-direction:column;}.top{height:50px;AAFFFF;}.contents{背景：#dee5df;flex:1;}top和bottom固定高度，中间占据剩余高度，siderBar固定宽度，center占据剩余宽度html:top:50pxsideBarcenterfoot:50pxcss:#body{width:400px;高度：300px；边框：1px实心#aaa；显示：-webkit-flex；/*新版本语法：Chrome21+*/display:flex;/*新版本语法：Opera12.1,Firefox22+*/display:-webkit-box;/*旧版本语法：Safari、iOS、Android浏览器，旧的WebKit浏览器。*/显示：-moz-box；/*老版本语言法:Firefox(buggy)*/display:-ms-flexbox;/*混合版本语言法:IE10*/display:flex;flex-direction:column;}.top,.foot{height:50px;背景：#AAFFFF;}.sideBar{宽度：100px;背景：#FFFF00;}.contents{背景：#dee5df;弹性：1；显示：flex;}.center{背景：#AA55FF;弹性：1；}

上一篇：create-react-app2.1.8版本自定义配置

下一篇：登录界面引入css的问题

常用页面布局flex写法相关文章

最新推荐

猜你喜欢