移动端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制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 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设计模式之命令模式的深入解析
2013/06/13 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
json对象转字符串如何实现
2012/12/02 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
vue移动端弹框组件的实例
2018/09/25 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
python删除列表中重复记录的方法
2015/04/28 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
Python中SQLite如何使用
2020/05/27 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
物流管理专业大学生自荐信
2013/10/04 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
车间主任岗位职责
2015/02/03 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP