移动端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中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
用PHP实现多级树型菜单
2006/10/09 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
prototype 1.5 & scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
python各类经纬度转换的实例代码
2019/08/08 Python
python中判断文件结束符的具体方法
2020/08/04 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
python如何实现递归转非递归
2021/02/25 Python
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
学前教育求职自荐信范文
2013/12/25 职场文书
户外宣传策划方案
2014/05/25 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
小学班主任评语
2014/12/29 职场文书
红领巾广播站广播稿
2015/08/19 职场文书