最近一直在做移动端h5的页面,用的了大量的flex布局。遂整理整理几个常见的用法作为一篇笔记博文发出。
什么是flex布局
- flex布局由w3c组织于2009年提出,旨在解决传统盒子模型布局中的多种局限性,提高布局的简洁性和便利性。
- flex布局可以十分便利的构建响应式的页面。
- 目前绝大部分现代浏览器已经可以支持,移动端浏览器全面支持。
怎么使用flex布局
1 | <div id="parent"> |
以示例结构为例,我们分别来实现以下5种常见布局(注释纯属偷懒):
- 水平排列
1 | #parent{ |
- 水平居中排列
1 | #parent{ |
- 垂直排列
1 | #parent{ |
- 垂直居中排列
1 | #parent{ |
- 垂直水平居中排列
1 | #parent{ |
- 两端固定宽度,中间自适应(圣杯布局)
1 | #parent{ |
未完待续…