移动端Web页面的CSS3 flex布局快速上手指南


Posted in HTML / CSS onMay 31, 2016

1、开始使用flexbox布局的方法,代码如下:

CSS Code复制内容到剪贴板
  1. footer{   
  2. display:flex;   
  3. }  
2、接下来为footer添加flex-flow属性:
CSS Code复制内容到剪贴板
  1. flex-flow:row wrap;    

row表示按行显示,wrap设置当父元素过小时是否换行。
注意flex-flow是flex-direction和flex-wrap两个属性合在一起定义了,分开设定也可以。
flex-direction的属性:
row:行显示;column:列显示;row-reverse/column-reverse:反方向进行显示

3、align-item属性:
flex-start:使得每个div的头部对齐
flex-end:使得每个div的尾部对齐
center:以中心线为基准对齐
stretch:填满整个区域,即头部、尾部均对齐

4、justify-content属性
用于设置留白的形式,在制作一行中有多个部分的时候非常方便。
比如父div中有三个小的div并排显示,但是它们的总宽度小于父div的总宽度,则可以使用这种方法进行布局,具体参数如下:
flex-start:留白部分在最末端
flex-end:留白部分在最起始的地方
以上两种留白方式都是把三个小div看成一个整体,留白留在一端
space-between:中间均分留白
space-around:中间+两侧均分留白
以上两种相当于把三个div块拆开均分在父div中,二者的差别仅仅在于是不是在两侧也留白
附:利用justify-content的方式使元素垂直水平居中的方式

CSS Code复制内容到剪贴板
  1. div{   
  2. justify-content:center;   
  3. align-items:center;   
  4. display:-webkit-flex;   
  5. }  
HTML / CSS 相关文章推荐
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
CSS3实现头像旋转效果
Mar 13 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 #HTML / CSS
CSS3实现多重边框的方法总结
May 31 #HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 #HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 #HTML / CSS
CSS中的字体大小设置属性总结
May 24 #HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 #HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 #HTML / CSS
You might like
使用php清除bom示例
2014/03/03 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
python处理csv中的空值方法
2018/06/22 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
ipad上运行python的方法步骤
2019/10/12 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
给物业的表扬信
2014/01/21 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
信访维稳承诺书
2015/05/04 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS