CSS实例详解：Flex布局
本文由云+社区发表
本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。
一．垂直居中
这里同时用非flex布局和flex布局两种方式来实现，可以对比两种实现方式的差异。
1.1用margin实现垂直居中
实现方式：
父元素采用相对定位，子元素采用绝对定位，先将元素的定点定位到父元素的中心，再使用margin负值法，即子元素自身宽度、高度的一半，将其拉回到父元素的中心。
实现效果：
附上完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中--normal</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: 300px;
margin: 80px;
border: 1px solid blue;
position: relative;
}
.item {
width: 300px;
height: 200px;
border: 1px solid red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>
1.2用flex实现垂直居中
实现方式：
父元素启用flex布局（display:flex），同时设置主轴上居中对齐（justify-content:center）、交叉轴上居中对齐（align-items:center）。子元素不需要额外设置样式。
实现效果：同上
附上完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中--flex</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.container{
width:500px;
height:300px;
margin:80px;
border:1px solid blue;
display:flex;
justify-content: center;
align-items: center;
}
.item{
width:300px;
height:200px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>
二．圣杯布局
2.1 普通方式实现圣杯布局
在我之前的文章圣杯布局与双飞翼布局中详细介绍过如何实现一个圣杯布局：
(1)中间的三栏布局，这里采用margin负值法：两边两栏宽度固定，中间栏宽度自适应，左栏、右栏、中间栏向左浮动，左栏的margin-left设为-100%，中间栏的width设为100%，右栏的margin-left设为-右栏宽度。
(2)给container设置padding-left和padding-right属性，值分别为左栏、右栏的宽度；
(3)将左右两栏设置为相对定位，同时左栏的left值设为-左栏宽度，右栏的right设为-右栏宽度。
实现效果：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
header,
footer {
height: 100px;
width: 100%;
background-color: #bbbbbb;
}
.container {
height: 300px;
/* 圣杯布局 */
padding-left: 200px;
padding-right: 300px;
}
.container div{
float: left;
/* 圣杯布局 */
position:relative;
}
.left {
width: 200px;
height: 300px;
background-color: #DC698A;
margin-left: -100%;
/* 圣杯布局 */
left:-200px;
}
.middle {
width: 100%;
height: 300px;
background-color: #3EACDD;
}
.right {
width: 300px;
height: 300px;
background-color: #8CB08B;
margin-left: -300px;
/* 圣杯布局 */
right:-300px;
}
</style>
</head>
<body>
<header>头部</header>
<div class="container">
<div class="middle">中间栏：内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<div class="left">左栏</div>
<div class="right">右栏</div>
</div>
<footer>底部</footer>
</body>
</html>
2.2用flex实现圣杯布局
实现方式：
(1)holyGrail启用flex布局，设置holyGrail中的header、container、footer在交叉轴上竖向排列（flex-direction:column;）
(2)container中的三栏布局：container启用flex布局，设置container中的middle、left、right在主轴上横向排列（flex-direction:row，默认值可以不设）。由于html中先写的middle，所以为了让left在最左边，要设置left的order为这三栏中最小的，即-1（其他两栏order为默认值0）
可以看出Flex布局的实现方式更加简单，也更加直观。
实现效果：同上
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局--flex</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.holyGrail{
display: flex;
flex-direction: column;
}
header,
footer {
height: 100px;
width: 100%;
background-color: #bbbbbb;
flex: 1; /*flex:1; === flex:1 1 auto;*/
}
.container {
height: 300px;
display: flex;
flex-direction: row;/*可不写，默认值*/
flex:1;/*需要可自动扩展*/
}
.left {
width: 200px;
height: 300px;
background-color: #DC698A;
order:-1;/*左边栏放到最左边*/
}
.middle {
width: 100%;
height: 300px;
background-color: #3EACDD;
flex:1;
}
.right {
width: 300px;
height: 300px;
background-color: #8CB08B;
}
</style>
</head>
<body class="holyGrail">
<header>头部</header>
<div class="container">
<div class="middle">中间栏：内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<div class="left">左栏</div>
<div class="right">右栏</div>
</div>
<footer>底部</footer>
</body>
</html>
三.固定栏-可扩展栏页面布局
实现效果：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.container {
width: 300px;
height: 200px;
border: 1px solid blue;
display: flex;
flex-direction: column;
}
.nav {
height: 50px;
background-color: grey;
display: flex;
flex-direction: row;
}
.nav-item {
min-width: 60px;
border: 1px solid orangered;
}
.main {
display: flex;
flex-direction: row;
flex: 1;
/*main区域需要自动扩展*/
}
.main-left {
width: 100px;
/*main中的left区域固定*/
background-color: #DC698A;
}
.main-right {
background-color: #3EACDD;
flex: 1;
/*main中的right区域需要自动扩展*/
}
</style>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="nav">
<div class="nav-item">nav1</div>
<div class="nav-item">nav2</div>
<div class="nav-item">nav3</div>
</div>
<div class="main">
<div class="main-left">固定栏：内容内容内容内容内容内容内容内容内容内容</div>
<div class="main-right">可扩展栏：内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
</div>
</div>
</body>
<script type="text/javascript">
(function run() {
$(".container").animate({ width: 500, height: 300 }, 1500,
() => {
$(".container").animate({ width: 300, height: 200 }, 1500, run)
}
)
}());
</script>
</html>
四.小结
本文主要提供了三个实例，来实际应用下flex的属性。通过对比其他的实现方式，可以看出使用Flex布局可以优雅地实现相同的CSS布局问题。如有问题，欢迎指正。
此文已由作者授权腾讯云+社区发布
搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！
CSS实例详解：Flex布局的更多相关文章
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（六）媒体查询
响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...
- 转载 《AngularJS》5个实例详解Directive（指令）机制
<AngularJS>5个实例详解Directive(指令)机制 大漠穷秋 本文整理并扩展了<AngularJS>这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（三）DOCTYPE和字符集
在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HT ...
- 当里个当，免费的HTML5连载来了《HTML5网页开发实例详解》连载（一）
读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信“Flash之我见”中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得 ...
- Struts2使用Interceptor实现权限控制的应用实例详解
Struts2使用Interceptor实现权限控制的应用实例详解 拦截器:是Struts2框架的核心,重点之重.因此,对于我们要向彻底学好Struts2.0.读源码和使用拦截器是必不可少的.少说了. ...
- getElementByID、getElementsByName、getElementsByTagName实例详解
getElementByID.getElementsByName.getElementsByTagName实例详解 本文通过实例,详细介绍了getElementByID.getElementsByNa ...
- Bootstrap如何实现导航条？导航条实例详解
本文主要和大家分享Bootstrap实现导航实例详解,在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条.侧边栏等,我们可以使用模板的继承,避免重复编写html代码.现在我们打算实现一个在 ...
- JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
- Vue 实例详解与生命周期
Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
随机推荐
- JDBC学习（含转载）
首先连接数据库: Class.forName("com.mysql.jdbc.Driver");//加载jdbc驱动 Connection conn=DriverManager.g ...
- Unity跳转场景
Unity中如何加载场景 1.首先需要将场景添加到 Build Settings中,如下图: 2.引用using UnityEngine.SceneManagement; 同步加载:如果场景很大,有可 ...
- HTML5开发和布局（待补充）
移动开发准则 1.尽量使用单页面开发(SPA) 2.慎选UI框架 3.动画.特效使用(60fps) **浏览器消耗最小的CSS属性** 位置:transform:translate(x,y,z) 大小 ...
- lucene之Field属性的解释
Field类 数据类型 Tokenized是否分词 Indexed 是否索引 Stored 是否存储 说明 StringField(FieldName, FieldValue,Store.YES)) ...
- Donald Knuth
看了<李开复给计算机系大学生的建议>这篇文章,让我对Donald Knuth这个人产生了兴趣,他是何许人也?于是便有下文. 引用:(1)练内功.不要只花功夫学习各种流行的编程语言和工具,以 ...
- ICO图标下载地址
http://findicons.com/ http://www.iconfont.cn/
- Shell条件测试和流程控制-4
- shell丢弃信息
1>/dev/null 2>&1 或 >/dev/null 2>&1 的含义及注意事项 > 表示重定向到哪 1表示stdout标准输出,输出到屏幕 ...
- 【备忘】EntityFramework 6 升级到 EntityFrameworkCore 注意点
正在将一个 .net framework 4.5 的项目升级到 .net core 2.1,其中使用到了 EF6,经历了一些修改: 命名空间的变化基本上可以靠自动提示补充完整,不需要强记. DbQue ...
- Kali学习笔记5：被动信息收集工具集
1.Shodan SHODAN搜索引擎不像百度谷歌等,它们爬取的是网页,而SHODAN搜索的是设备. 物联网使用过程中,通常容易出现安全问题,如果被黑客用SHODAN搜索到,后果不堪设想. 网站:ht ...