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

css:flex的实际应用场景

时间:2023-03-31 00:35:45 CSS

tabbar组件前言在没有flex布局之前,即使已经有了flex,很多前端程序员提到tabbar依然选择position:fixed的方案(当然也包括之前的我).如果你看了这篇文章,你可以去谷歌搜索一下。position:fixed方法是移动端的一个大坑!为什么不使用弹性布局?坑少,装x代码实现//html我是content

我是tabbar
..//css*{marin:0;填充:0}.container{高度:100vh;显示:弹性;flex-direction:列;}.content{flex-grow:1;溢出:自动;}。tabbar{box-sizing:border-box;border:1pxsolidred;}jsbin点击预览flexiblelayoutflexlayout在PC上的用法和tabbar类似。固定列的宽度是硬编码的,灵活列占满屏幕。单击以预览并垂直居中。前言实现居中的方法有很多种。单行垂直居中可以使用height=line-height的技巧。但是多行会用到flex布局。代码实现//html
//css.container{display:flex;证明内容:居中;/*水平居中*/align-items:center;/*垂直居中*/width:100px;高度:60px;边框:1px纯红色;}.item{宽度:30px;高度:20px;背景色:红色;}点击预览