flexbox一些常用布局
很多同学都不太熟悉 flexbox布局 ，觉得兼容性不好，还有的被各种属性绕晕了，有了恐惧的心理。其实 flexbox 在移动端已经兼容很好了，借助 autoprefixer 可以很容易的实现，常见的布局也只有几种，所以不需要感到恐惧。下面整理的几种方法，如没特别指明，都兼容到android4.1以上
子元素等分
这种布局常用于底部的导航或者tab等分
ul{ display:flex; } li{ flex:1; }
demo点这里
左右固定宽度，中间自适应
这种布局常用于左右各有图标的列表
ul{ display:flex; } li:first-child, li:last-child{ width:50px; } li:nth-child(2){ flex:1; }
demo点这里
底部贴底
这种布局是上面的变种
html,body,ul{ height:100%; } ul{ display:flex; flex-direction:column; } li:first-child, li:last-child{ height:50px; } li:nth-child(2){ flex:1; }
demo点这里
多行多列
这种布局常用于商品列表, android4.4以下不支持
ul{ display:flex; flex-wrap:wrap; } li{ width:50%; }
demo点这里
两端对齐垂直居中
这种布局常用于头部
header{ display:flex; justify-content:space-between; align-items:center; }
demo点这里
水平垂直居中
这种布局很常见，宽高固定容器里的垂直居中。
header{ display:flex; justify-content:center; align-items:center; }
demo点这里
子元素横向排列，超过父容器宽度不换行
这种布局常用来做slider
ul{ display:flex; } li{ flex-shrink:0; }
demo点这里
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
