Flex布局及在移动端的应用
前端发展很快,以前在移动端使用Flex布局还要想三想的文章也许已经过时了,这篇文章主要介绍使用Flex进行常规布局及在移动端的处理。
Flex语法
Flex布局意为"弹性布局",用来为盒模型提供更多灵活性。此外,Flex定义的容器可以对块级元素(display: flex;
)或行内元素(display: inline-flex;
)生效,需要注意的是,如果父元素设置了Flex容器,则子元素的float
、clear
和vertical-align
属性将失效。
Flex布局需要注意下面几个重要的概念,结合下面这张图也许能更好的理解:
- flex容器(flex container)
- flex项目(flex item)
- 主轴(main axis)
- 交叉轴(cross axis)
- 开始位置(start)
- 结束位置(end)
提示:定义在容器(container)上的属性和定义在项目(item)上的属性不可搞混!
关于语法的其余部分,请参考阮一峰的教程,希望你能熟记里面的示例图:
- Flex 布局教程: 语法篇
- Flex 布局教程: 实例篇
上面部分搞定,趁热打铁做一下下面的练习,做上两次基本上Flex就基本没问题了。
- Flex训练游戏: 地址
Flex常规布局
1. 单列布局
单列布局使用场景非常多,用来实现文本或者block的居中效果。对外部容器定义就可实现内部布局效果,实现起来非常简单,尤其是使用响应式布局中。以下示例都是Flex的基本使用语法。
基本的DOM结构如下:
<div class="parent"><div class="children"></div>
</div>
- 水平居中
.parent{display:flex;justify-content:center;
}
- 垂直居中
.parent{display:flex;align-items:center;
}
- 水平垂直全部居中
.parent{display:flex;justify-content:center;align-items:center;
}
2. 多列布局
多列布局使用较多,比如商品展示需要在左侧显示图片,右侧显示详情;
多列布局的示例DOM结构如下:
<div class="container"><div class="left">Left</div><div class="right">Center</div><div class="center">Right</div></div>
- 左列定宽,右列自适应 | 右列定宽,左列自适应(同理)
该布局方式非常常见,适用于定宽的一侧常为导航,自适应的一侧为内容的布局。
示例
一列定宽,一列自适应
样式
.container{display:flex;
}
.left{flex: 0 0 300px;
}
.right{flex:1;
}
- 左中两列定宽,右侧列自适应
示例
左中两列定宽,右侧列自适应
样式
.container{display:flex;
}
.left,.center{flex: 0 0 100px;
}
.right{flex:1
}
- 两侧定宽,中栏自适应
示例
两侧定宽,中栏自适应
样式
.container{display:flex;
}
.left{width:100px;
}
.center{flex:1;
}
.right{width:100px;
}
- 一列不定宽,一列自适应
示例
一列不定宽,一列自适应
样式
.container{display:flex;
}
.right{flex:1;
}
- 多列等分布局
多列等分布局常出现在内容中,多数为功能的,同等级内容的并排显示等。
示例
多列等分布局
样式
.container{display:flex;
}
.left,.center,.right {flex:1;
}
3. 九宫格布局
示例
九宫格布局
DOM结构
<div class="container"><div class="row"><div class="left">Left</div><div class="right">Center</div><div class="center">Right</div></div><div class="row"><div class="left">Left</div><div class="right">Center</div><div class="center">Right</div></div><div class="row"><div class="left">Left</div><div class="right">Center</div><div class="center">Right</div></div></div>
样式
.container {display: flex;flex-direction: column;height: 300px;width: 300px;.row {height: 100px;display: flex;}.left,.center,.right {flex: 1;height: 100px;}}
4. 圣杯布局
示例
圣杯布局
DOM结构
<div class="container"><header class="header">Header</header><article class="article"><nav class="nav">Nav</nav><section class="body">Body</section><aside class="aside">Aside</aside></article><footer class="footer">Footer</footer></div>
样式
.container {display: flex;flex-direction: column;min-height: 100vh;justify-content: space-between;.header,.footer {flex: 0 0 100px;}.article {display: flex;flex: 1;.nav {flex: 0 0 100px;}.body {flex: 1;}.aside {flex: 0 0 100px;}}}
5. 响应式布局
设置meta
使用前需要对设置meta标签,设置布局宽度等于设备宽度,布局viewport等于度量viewport。
<meta name='viewport' content='width=device-width,initial-scale=1'>
媒体查询
HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表,比如,一个页面在屏幕上显示时使用无衬线字体,而在打印时则使用衬线字体,screen 和 print 是两种已定义的媒体类型,媒体查询让样式表有更强的针对性,扩展了媒体类型的功能; 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成,媒体查询中可用于检测的媒体特性有width、height和color(等),使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。
@media screen and (max-width:960px){....}
<link rel='stylesheet' media='screen and (max-width:960px)' href='xxx.css' />
兼容性问题解决方案
对于移动端的处理主要是解决兼容性,毕竟新出的事物普遍接受还是需要过程的,但是把握趋势对不兼容的情况需要做好补丁。这里是Caniuse.com上的关于Flex的兼容性。
我在开发的要求是能用工具处理的不进行人为干预,因为这样会增加开发及维护成本,浪费生命。 有句话: "工欲善其事必先利其器",因此按照Flex的标准去开发,剩余的事情交给自动化工具处理。
这里使用的工具是gulp-autoprefixer,配置的参数:
{browsers: ['last 2 versions','iOS >= 7','Android >= 4'],cascade: false
}
源码
{display: flex;flex: 1;align-items: center;
}
兼容后
{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;-webkit-box-align: center;-webkit-align-items: center;align-items: center;
}
最后
Flex布局高效简洁且有兼容性处理方案,因此朝这个趋势走不会有错。
Flex布局及在移动端的应用相关推荐
- 使用Flex布局,实现移动端商品支付页面
Flex布局关键知识点 1.display:flex要加在父元素上. 2.justify-content设置主轴内容的对齐方式. 3.flex-direction可更改主轴的方向. 4.align-i ...
- Flex布局 - 仿携程网移动端首页案列练习
目录 一.搭建相关文件结构 1.1 文件结构 1.2 引入初始化样式 1.3 常用初始化样式 二.搜索模块 2.1 搜索模块 - 外观布局 2.2 搜索模块 - 个人中心 2.3 搜索模块 - 搜索框 ...
- Flex布局学习完成PC端
目标样式,请使用目录查阅,代码较长 当下代码完成的效果图,学习熟练flex 一.总体代码 0.html代码 <!DOCTYPE html> <html lang="en&q ...
- flex布局:携程网移动端首页案例
效果展示: 文章目录 一.技术选型 二.开发步骤 1.创建相应文件夹结构 2.设置视口标签 3.引入样式文件 4.开发注意事项 三.代码模块 一.技术选型 技术选型: 方案:采取单独制作移动端 技术: ...
- 携程在线网页制作(flex布局)(静态页面)
1.技术选型 方案:单独制作移动端页面 技术:flex布局2.搭建相关文件夹结构 css images(背景图.精灵图等) upload(产品图) index.html 3.引入 引入视口标签和相 ...
- flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
viewport视口 viewport是严格的等于浏览器的窗口.viewport与跟viewport有关的meta标签的关系,详细建议读一读这篇文章:移动前端开发之viewport的深刻理解,view ...
- flex布局的应用 —— 模仿携程移动端的首页
写在前面 昨天已经过去,未来还未到来,所以当下是上天给的最好的恩赐,好好把握. 昨天又很仔细的看了看flex布局,今天下午动手用flex布局做了一个练习,就是模仿携程移动端首页.有一段时间没写html ...
- 移动端布局之flex布局
什么是flex布局 基本含义 Flex是Flexible Box的缩写(注:意思是"灵活的盒子容器"),意为"弹性布局",是 CSS3 引入的新的布局模式,用来 ...
- 移动web开发--移动端常见布局+流式布局和flex布局+携程网首页案例
浏览器私有前缀 为了兼容老版本 私有前缀 -moz- : fixfox 浏览器私有属性 -ms- : ie浏览器私有属性 -webkit- : safari.chrome私有属性 -o- : Oper ...
最新文章
- HDU 1166 敌兵布阵(线段树单点加区间查询)
- Linq中string转int的方法
- 华为发布企业服务云化转型战略 未来5年投资5亿美金建设服务能力(2017年09月06日)
- 如何动态设置控件的宽高度?
- 剑指offer面试题10- I. 斐波那契数列
- 案例7-2 寻找大富翁 (25 分)(STL容器)
- *(volatile unsigned long *) 语法
- 基于node.js的网上书店系统的设计与实现.rar(项目源码+论文)(开发文档+nodejs配置+安装+运行教学.zip)
- java开发做项目的思路
- SQL Server 2008 中文企业版下载
- P1002 过河卒(dp动态规划,洛谷,java)
- GetTickCount 得到时间进行比较计算遇到的异常
- POJ ZOJ题目分类
- python rfcn.py
- 视差图转为深度图_纽劢研习社 | 深度图的非深度讲解
- 制作nextcloud私人云盘
- Android 中文 API(123) —— AbsListView
- 这届年轻人开始种草快递纸箱
- Day21||● 77. 组合
- 手记系列之六 ----- 分享个人使用kafka经验
热门文章
- Windows域策略 设置关闭事件跟踪器【全域策略生效】
- xshell怎么往linux系统上传文件,xshell怎么连接linux xshell上传文件的方法
- 企业拜访调查问卷计算机,1-1计算机应专业行业及企业调查问卷模板.doc
- nod32用户名密码获取器
- python将多个excel合并或拆分
- java正则匹配多个斜杠_正则表达式中两个反斜杠的匹配规则详解
- pomelo源码解析--新建项目(cli工具: pomelo)
- FTP操作命令(windows系统)
- Asp.Net Core 6.0 Mvc入门 图书查询系统 附带源码下载
- Android入门第30天-Android里的Toast的使用