利用CSS3的flexbox实现水平垂直居中与三列等高布局


Posted in HTML / CSS onSeptember 12, 2016

在打开网页的时候,发现了火狐默认首页上有这样一个东西。

利用CSS3的flexbox实现水平垂直居中与三列等高布局

第一个css属性就没有看懂。于是乎,开始各种找资料,各种看书。然后把对于css3伸缩布局盒(flexbox)模型的理解写成文章,目的是对flexbox做一个简单的介绍。

1.关于css3中flexbox需要掌握的知识

因为对于三列等高自适应布局和水平垂直居中对齐需要一些对css3中flexbox基础概念的理解,所以会对flexbox的概念做一个简单的介绍,以为后面的实例做一个铺垫。本人一直认为,不管学习任何知识,对于概念的理解都十分重要。

a:伸缩容器:是指通过display属性显示地给一个元素设置为flex或者inline-box(标准版本),这个容器就是一个伸缩容器。

b:伸缩项目:一个伸缩项目是伸缩容器的子元素。一个伸缩容器的内容具有零个以上的伸缩项目--伸缩容器的每个子元素都会成为一个伸缩项目(包括文字,称为匿名伸缩项目)。

c:伸缩流方向:是指伸缩容器中的主轴方向,可以理解成x轴的方向。伸缩流方向主要通过flex-direction属性(标准标准版本)来设置,默认值为row。

d:伸缩行换行:伸缩项目在伸缩容器中有时候会溢出伸缩容器。在伸缩容器属性中,主要通过flex-wrap属性来设置伸缩容器是否换行,默认值为nowrap。

e:伸缩性:定义伸缩项目可改变伸缩容器的宽度或高度填补可用的空间。可以将伸缩容器的额外空间分发给其伸缩项目或将他们缩小以防止伸缩项目溢出。

2.flexbox实现水平垂直居中对齐

复制代码
代码如下:

html, body {
height: 100%;
width: 100%;
}
body {
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: center;
-moz-box-pack: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: center;
-webkit-box-pack: center;
}
.content {
width: 300px;
height: 300px;
background-color: lightblue;
text-align: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: center;
-moz-box-pack: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: center;
-webkit-box-pack: center;
}

复制代码
代码如下:

<div class="content"><h1>水平垂直居中对齐</h1></div> 

 
首先,设置html和body的宽度和高度都为100%,目的是让其拥宽度和高度,否侧主轴对齐(box-pack)和侧轴对齐(box-align)无法让伸缩项目之前分布伸缩容器的额外空间。

然后,让body成为伸缩容器,设置display属性为box,设置box-pack和box-align来控制主轴对齐和侧轴对齐,让其属性值都为center。

最后,.content元素成为伸缩容器,这样其内部文字块会成为匿名伸缩项目。此时的.content元素即为伸缩容器,又为伸缩项目。当作为伸缩容器的时候,h1元素为其伸缩项目;当作为伸缩项目的时候,body为其伸缩容器。同样为.content设置box-align和box-pack,来控制侧轴对齐和主轴对齐方式 。

效果图如下,.cotent元素和h1都实现了水平垂直居中对齐。

利用CSS3的flexbox实现水平垂直居中与三列等高布局

3.三列等高自适应,页脚区域黏附底部的布局

对于三列布局的方法有非常多种,可以通过对float+百分比宽度来实现,也可以用inline-block配合百分比实现,但是很难实现页脚黏附浏览器可视窗口底部的布局。这里只对css3三列等高布局做介绍。

做任何的布局效果,都离不开HTML结构。

复制代码
代码如下:

<div id="header">
<h1>头部</h1>
</div>
<div id="page">
<div id="main">
<h1>主内容</h1>
</div>
<div id="sidebar-left">
<h1>左边栏</h1>
</div>
<div id="sidebar-right">
<h1>右边栏</h1>
</div>
</div>
<div id="footer">
<p>页脚</p>
</div>

假设头部和页脚的宽度为100%,左右两栏宽度为200px,而主内容自适应宽度。

复制代码
代码如下:

body {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#header, #footer {
width: 100%;
padding: 10px;
background-color: #ccc;
}
#footer {
margin-top: 10px;
}
#sidebar-left, #sidebar-right {
width: 200px;
padding: 10px;
background-color: #f36;
}

这里为body设置box-sizing是为了让盒模型的宽度=内容宽度+border+padding,避免在设置padding值时需要计算width的宽度。

接下来,使用伸缩布局盒模型box(旧版本,仍然可以使用),让#page元素成为伸缩容器,设置box-flex让其子元素拥有伸缩性,自适应伸缩容器的剩余空间。

复制代码
代码如下:

#page {
margin-top: 10px;
width: 100%;
display: -moz-box;
display: -webkit-box;
}
#main {
background-color: #e66;
padding: 10px;
margin: 0 10px;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}

上面代码中,使用为#page元素设置了display属性让其成为一个伸缩容器。这里要注意的是必须设置width。如果没有设置width,这里的#main元素的box-flex属性会失效,原因在于父容器没有宽度,自然无法填充伸缩容器的额外空间,(这里的额外空间指的是#page元素所占的面积,而不单单指宽度)。为#main元素设置box-flex属性是让其自适应伸缩容器的额外宽度。因为webkit内核的浏览器(Chrome,Safari)和Gecko内核(Firefox)不支持box-flex属性和box属性,所以必须添加厂商前缀。

利用CSS3的flexbox实现水平垂直居中与三列等高布局

上面实例中,需要修改一下主内容和左边栏,右边栏的排列方式,使用box-ordinal-group属性。

复制代码
代码如下:

#sidebar-right {
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
}
#main {
background-color: #e66;
padding: 10px;
margin: 0 10px;
-moz-box-flex: 1;
-moz-box-ordinal-group: 2;
-webkit-box-flex: 1;
-webkit-box-ordinal-group: 2;
}

上面代码中,使用了box-ordinal-group属性,这个属性是用于修改伸缩项目在伸缩容器中的显示顺序,默认值为1,也就是按照DOM文档流出现的先后顺序进行排序。下面重置了box-ordinal-group属性之后的效果。

利用CSS3的flexbox实现水平垂直居中与三列等高布局

至此,这个页面就已经做好了。但是出现了一个问题,就是页脚区域不会黏附在浏览器窗口可视区域底部,这让用户体验非常糟糕。

使用css3的flexbox属性实现就很简单。最关键的技巧就是让body元素变成一个伸缩容器,并且使用伸缩性属性box-flex让页脚区域之前的div具有伸缩性(也就是#page元素)。也就是说,页脚区域前的div会变成一个伸缩项目,会根据伸缩容器的高度自适应填充伸缩容器的额外空间,也就是自动拉伸页脚区域前的div填充浏览器可视区域中的所有空间。

如果希望整个页面的布局要和浏览器窗口可视区域一样高,

首先必须设置html和body元素的高度和浏览器窗口可视区域高度一样高。如果少了body高度的设置,body本身就没有高度,当然伸缩项目的伸缩性也就无法体现。

复制代码
代码如下:

html, body {
height: 100%;
}

其次,让body元素自身成为一个伸缩容器,并且设置伸缩流方向(box-orient)为vertical(旧版本中的属性)。

复制代码
代码如下:

body {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -moz-box;
-moz-box-orient: vertical;
display: -webkit-box;
-webkit-box-orient: vertical;
width: 100%;
}

最后,设置页脚区域前的div(#page元素)中的box-flex属性,让其根据伸缩容器(这里是指body)的高度自适应伸缩容器body的额外空间,也就是自动拉伸#page元素的高度。这样就会是页脚一直在浏览器可视窗口底部显示。

复制代码
代码如下:

#page {
margin-top: 10px;
width: 100%;
display: -moz-box;
-moz-box-flex: 1;
-moz-box-align: stretch;
display: -webkit-box;
-webkit-box-flex: 1;
-webkit-box-align: stretch;
}

上面代码中,#page元素本身是一个伸缩容器,现在变成伸缩项目。在伸缩布局盒模型中,伸缩项目在侧轴的对齐方式box-align(旧版本)默认值为stretch,(css中可不写box-align属性)致使#page元素的三个伸缩项目都会自动拉伸,不管内容高度有多少都具有伸缩容器#page的高度,从而实现三列等高布局并且页脚黏附浏览器可视区域底部的效果。最后附上效果图。

利用CSS3的flexbox实现水平垂直居中与三列等高布局

总结
以上就是这篇文章的全部内容,文章总结的还是很详细的,希望对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
用纯css3和html制作泡沫对话框实现代码
Mar 21 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
html5 分层屏幕适配的方法
Mar 16 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
Html5 滚动穿透的方法
May 13 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 HTML / CSS
对CSS3选择器的研究(详解)
Sep 16 #HTML / CSS
利用CSS3实现炫酷的飞机起飞动画
Sep 17 #HTML / CSS
CSS3 3D制作实战案例分析
Sep 18 #HTML / CSS
CSS3中动画属性transform、transition和animation属性的区别
Sep 25 #HTML / CSS
利用CSS3实现毛玻璃效果示例源码
Sep 25 #HTML / CSS
CSS3实现简易版的刮刮乐效果
Sep 27 #HTML / CSS
纯DOM+CSS3实现简单的小风车动画
Sep 27 #HTML / CSS
You might like
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
php 缩略图实现函数代码
2011/06/23 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
8个PHP数组面试题
2015/06/23 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
js 格式化时间日期函数小结
2010/03/20 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
python实现红包裂变算法
2016/02/16 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
python中time库的实例使用方法
2019/10/31 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
德购商城:德国进口直邮商城
2017/06/13 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
实习教师自我鉴定
2013/12/12 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL