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,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
随机推荐
- mysql 统计某个月每天的数据
select SUM(order_money) as money,substr(t.pay_time,1,10) as time from pay_log t where t.pay_time l ...
- 01 C语言程序设计--01 C语言基础--第3章 基本数据类型01
01.1.3.1序言 00:02:17 01.1.3.2 C语言中的基本元素和常量的概念 00:08:54 01.1.3.3示例--常量 00:12:08 01.1.3.4变量的概念和命名规则 00: ...
- Rabbimq 安装过程，还有踩得坑！centos 安装
一 .安装erlang 1 添加yum 源,在/etc/yum.repos.d 下添加 rabbitmq-erlang.repo,内容如下 # In /etc/yum.repos.d/rabbitmq ...
- KITTI数据集的使用——雷达与相机的数据融合
目录 目的 如何实现 kitti数据集简介 kitti数据集的raw_data 利用kitti提供的devkit以及相应数据集的calib文件 解读calib文件夹 解读devkit 目的 使用雷达点 ...
- Go学习之旅
备忘这个 官方文档 https://go-zh.org/doc/ Go指南 https://tour.go-zh.org/welcome/1 Go语言圣经 https://yar999.gitbook ...
- 华为云服务器为Tomcat配置SSL
近期由于开发小程序需要在云服务器上配置https访问协议,也遇到了一点小问题,把配置过程记录一下:SSL 证书申请下来之后会有 .jks .crt .pfx .pem为后缀的文件(如何申请SSL证书这 ...
- 初识Java Servlet
Java Servlet是什么? Servlet的本质就是一个Java接口,之所以能生成动态的Web内容,是因为对客户的一个HTTP请求,Servlet通过接口这个规范重写了其中的方法,然后Web服务 ...
- latex 希腊字母表示
http://blog.sina.com.cn/s/blog_5e16f1770100lxq5.html
- MyBatis的好处及常见问题
好处 MyBatis持久层框架,它对jdbc的操作数据库的过程进行封装,使开发者只需要关注 SQL 本身,而不需要花费精力去处理例如注册驱动.创建connection.创建statement.手动设置 ...
- PMP：8.项目质量管理
内容中包含 base64string 图片造成字符过多,拒绝显示