利用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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 HTML / CSS
z-index不起作用
Mar 31 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 HTML / CSS
sass 常用备忘案例详解
Sep 15 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
提高php运行速度的一些小技巧分享
2012/07/03 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
php数组分页实现方法
2016/04/30 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
使用Python操作MySQL的一些基本方法
2015/08/16 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
职业生涯规划书基本格式
2014/01/06 职场文书
幼儿园家长评语
2014/02/10 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
大学军训心得体会800字
2016/01/11 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python