css flex布局实用
2018-05-04 21:44
330 查看
CSS3 flex布局应用介绍
张歆琳 关注2016.06.17 10:50* 字数 701 阅读 1063评论 1喜欢 15上一篇介绍了flex弹性盒子的语法,本篇用flex来实际布局一下。例如我们以前会用inline-block或float配合%百分比来实现自适应的三列等高布局。但margin / padding计算起来比较复杂,加加减减维护起来很麻烦。用flex弹性盒模型就简单多了。首先弄出原始的HTML结构,左右侧边栏定宽220px
* { margin: 0; padding: 0; } #header, #footer { width: 100%; } #left, #right { width: 220px; } <div id="header">header</div> <div id="page"> <div id="main">main</div> <div id="left">left</div> <div id="right">right</div> </div> <div id="footer">footer</div>
现在将内容容器(#page)设成flex弹性盒模型:
#page { display: flex; }
中间main就是个普通的div,因此宽度好像没有自适应,很简单设
#main { flex: auto; }即可。因为两个侧边栏没有设flex,因此剩余的宽度将被main独享 main的位置不对,调整位置非常简单,设置
#main { … order: 1; }即可。当然别忘了同步给right设
#right { … order: 2; }。left不设默认为0。
你可能会疑惑,直接在DOM按left->main->right顺序排列不就行了,为何排列成main->left->right?确实调整DOM顺序也能达到同样效果,但将main越置前,对SEO搜索越友好。这其实并无标准答案,如果你觉得left的内容同样重要,那left->main->right的DOM顺序也是没问题的。现在只剩最后一步,将footer置底并拉升page部分。先将html和body的height设成100%,为全屏做准备。由于body里包含了header,page,footer,因此为body设置flex弹性盒模型,同时设置
flex-direction: column;让3个子元素垂直排列
body { … display: flex; flex-direction: column; }最后将page拉伸就简单了,思路和上面main一样,只要给page设置
flex:auto;,因为header和footer没有设flex,因此剩余的高度将被page独享。
* { margin: 0; padding: 0; } html, body { height: 100%; } body { display: flex; flex-direction: column; } #header, #footer { width: 100%; } #page { display: flex; flex:auto; } #left, #right { width: 220px; } #right { order: 2; } #main { flex: auto; order: 1; }总结一下自适应三列等高布局的思路,body应用垂直的flex模型,让页头,页面,页脚垂直排列,其中只有页面部分有flex:auto;将自适应高度。页面部分应用flex模型,内容,左侧栏,右侧栏将水平排列,其中只有内容部分有flex:auto;将自适应宽度。如果为了SEO优化,在DOM中将内容部分放在左右侧边栏上面的话,通过order调整顺序。更多布局的例子,可以看看Solved by Flexbox用flex弹性盒子可以轻松实现等比例布局:
.Grid { display: flex; } .Grid-cell { flex: 1; } <div class="Grid"> <div class="Grid-cell">…</div> <div class="Grid-cell">…</div> <div class="Grid-cell">…</div> </div>
也可以实现部分固定比例,剩余部分自适应布局:
评论区布局:
代码页面上都有,极其简单,可以自行参考。
总结
flex用于布局真的非常方便,原先用inline-block,float写的一堆既丑且难维护的代码,用flex可以很优雅地实现,什么垂直居中都是浮云。唯一需要的只是时间,等那些旧式浏览器都死透了,弹性盒子的春天就来了
阅读更多相关文章推荐
- css中比较实用的flex布局(1)
- Flex 布局教程:语法篇 作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display 属性 + po
- css实现Flex布局
- css之flex布局
- 积少成多Flash(9) - Flex 3.0 布局控件, 样式(css), 皮肤(skin)
- CSS中flex布局 弹性盒模型
- flex布局兼容性css文件
- CSS进阶系列一(flex布局基础知识——介绍、规范、主要思想、专业术语)
- CSS---使用flex布局做响应式页面,flex布局中主要属性值
- CSS学习之Flex弹性布局语法介绍
- CSS垂直水平居中,display:flex,布局,文字属性的一些零碎
- CSS魔法堂:Flex布局
- css中flex:1弹性布局例子
- 前端入门5-CSS弹性布局flex
- css 之 flex 弹性布局浅浅的理解
- 实用的CSS网页布局25个小技巧(转载)
- 超级实用的CSS布局方案之多列布局(二)
- CSS之Flexbox布局
- css flex与grid布局比较(flex在完善中。。。)