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

博客园   发布时间:2016-09-12 15:22:16   作者:Uncle-Keith   我要评论

这篇文章给大家介绍了三个小节的内容,其中包括关于css3中flexbox需要掌握的概念、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都实现了水平垂直居中对齐。

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属性,所以必须添加厂商前缀。

上面实例中,需要修改一下主内容和左边栏,右边栏的排列方式,使用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属性实现就很简单。最关键的技巧就是让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的高度,从而实现三列等高布局并且页脚黏附浏览器可视区域底部的效果。最后附上效果图。

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

相关文章

  • CSS水平垂直居中的几种方法总结

    这篇文章主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法,有兴趣的可以了解一下。
    2016-12-19
  • css让容器水平垂直居中的7种方式

    这篇文章主要为大家详细介绍了css让容器水平垂直居中的7种方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-17
  • CSS设置文字图片垂直居中的方法总结

    这篇文章给大家演示了在不知道高度的情况下图片如何垂直居中对齐,文中给出了实例代码,有需要的朋友们可以参考借鉴。下面来一起看看吧。
    2016-09-12
  • 深入理解CSS行高line-height与文本垂直居中的原理

    本文详细介绍了CSS行高属性line-height与文本垂直居中的原理,通过本文的介绍相信对大家以后使用line-height和设置文本垂直居中会更加熟练,有需要的可以参考借鉴。下面一
    2016-08-12
  • Flexbox制作CSS布局实现水平垂直居中的简单实例

    下面小编就为大家带来一篇Flexbox制作CSS布局实现水平垂直居中的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-27
  • CSS设置DIV垂直居中的N种方法 兼容IE浏览器

    这篇文章主要为大家详细介绍了兼容IE浏览器CSS设置DIV垂直居中的N种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-05
  • CSS文本和div垂直居中方法总结

    这篇文章主要介绍了CSS文本和div垂直居中方法总结,包括多行文本垂直居中,单行文本垂直居中,子div垂直居中,感兴趣的小伙伴们可以参考一下
    2016-07-04
  • CSS 实现垂直居中的几种方法(必看)

    下面小编就为大家带来一篇CSS 实现垂直居中的几种方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-14
  • CSS在固定宽高的div内实现垂直居中的实例详解

    这篇文章主要介绍了CSS在固定宽高的div内实现垂直居中的实例详解,即在div内部元素相对于div垂直居中的方法,需要的朋友可以参考下
    2016-06-03
  • CSS实现垂直居中的几种方法小结

    在前端布局过程中,我们实现水平居中比较简单,一般通过margin:0 auto;和父元素 text-align: center;就能实现。今天小编给大家带来了CSS实现垂直居中的几种方法小结,感兴
    2019-05-14

最新评论