移动端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伪类选择器:nth-child()
Apr 02 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
php新建文件自动编号的思路与实现
2011/06/27 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
javascript实现时钟动画
2020/12/03 Javascript
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
python三元运算符实现方法
2013/12/17 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
tensorflow识别自己手写数字
2018/03/14 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
我就是这样学习Python中的列表
2019/06/02 Python
Python实现图片识别加翻译功能
2019/12/26 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
珠宝店促销方案
2014/03/21 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
社区班子对照检查材料
2014/08/27 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
民主生活会剖析材料
2014/09/30 职场文书
借条格式范本
2015/05/25 职场文书
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏