运用CSS3的flexbox完成水平竖直垂直居中与3列等高

在开启网页页面的情况下，发现了火狐默认设置主页上有这样1个物品。

第1个css特性就沒有看懂。因而乎，刚开始各种各样找材料，各种各样看书。随后把针对css3伸缩合理布局盒（flexbox）实体模型的了解写成文章内容，目地是对flexbox做1个简易的详细介绍。

1.有关css3中flexbox必须把握的专业知识

由于针对3列等高自融入合理布局和水平竖直垂直居中对齐必须1些对css3中flexbox基本定义的了解，因此会对flexbox的定义做1个简易的详细介绍，认为后边的案例做1个铺垫。自己1直觉得，无论学习培训任何专业知识，针对定义的了解都10分关键。

a：伸缩器皿：是指根据display特性显示信息地给1个元素设定为flex或inline-box（规范版本号），这个器皿便是1个伸缩器皿。

b：伸缩新项目：1个伸缩新项目是伸缩器皿的子元素。1个伸缩器皿的內容具备零个以上的伸缩新项目--伸缩器皿的每一个子元素都会变成1个伸缩新项目（包含文本，称为密名伸缩新项目）。

c：伸缩流方位：是指伸缩器皿中的主轴方位，能够了解成x轴的方位。伸缩流方位关键根据flex-direction特性（规范规范版本号）来设定，默认设置值为row。

d：伸缩行换行：伸缩新项目在伸缩器皿中有时会外溢伸缩器皿。在伸缩器皿特性中，关键根据flex-wrap特性来设定伸缩器皿是不是换行，默认设置值为nowrap。

e：伸缩性：界定伸缩新项目可更改伸缩器皿的宽度或高宽比弥补能用的室内空间。能够将伸缩器皿的附加室内空间派发给其伸缩新项目或将她们变小防止止伸缩新项目外溢。

2.flexbox完成水平竖直垂直居中对齐

随后，让body变成伸缩器皿，设定display特性为box，设定box-pack和box-align来操纵主轴对齐和侧轴对齐，让其特性值都为center。

最终，.content元素变成伸缩器皿，这样其內部文本块会变成密名伸缩新项目。此时的.content元素即为伸缩器皿，又为伸缩新项目。作为为伸缩器皿的情况下，h1元素为其伸缩新项目；作为为伸缩新项目的情况下，body为其伸缩器皿。一样为.content设定box-align和box-pack，来操纵侧轴对齐和主轴对齐方法 。

实际效果图以下，.cotent元素和h1都完成了水平竖直垂直居中对齐。

3.3列等高自融入，页脚地区黏附底部的合理布局

针对3列合理布局的方式有十分多种多样，能够根据对float+百分比宽度来完成，还可以用inline-block相互配合百分比完成，可是很难完成页脚黏附访问器可视性对话框底部的合理布局。这里只对css33列等高合理布局做详细介绍。

做任何的合理布局实际效果，都离不开HTML构造。

假定头顶部和页脚的宽度为100%，上下两栏宽度为200px，而主內容自融入宽度。

这里为body设定box-sizing是以便让盒实体模型的宽度=內容宽度+border+padding，防止在设定padding值时必须测算width的宽度。

接下来，应用伸缩合理布局盒实体模型box（旧版本号，依然可使用），让#page元素变成伸缩器皿，设定box-flex让其子元素有着伸缩性，自融入伸缩器皿的剩下室内空间。

上面编码中，应用为#page元素设定了display特性让其变成1个伸缩器皿。这里要留意的是务必设定width。假如沒有设定width，这里的#main元素的box-flex特性会无效，缘故在于父器皿沒有宽度，当然没法填充伸缩器皿的附加室内空间，（这里的附加室内空间指的是#page元素所占的面积，而不单是指宽度）。为#main元素设定box-flex特性是让其自融入伸缩器皿的附加宽度。由于webkit核心的访问器（Chrome，Safari）和Gecko核心（Firefox）不适用box-flex特性和box特性，因此务必加上厂商前缀。

上面案例中，必须改动1下主內容和左侧栏，右侧栏的排序方法，应用box-ordinal-group特性。

上面编码中，应用了box-ordinal-group特性，这个特性是用于改动伸缩新项目在伸缩器皿中的显示信息次序，默认设置值为1，也便是依照DOM文本文档流出現的前后次序开展排列。下面重设了box-ordinal-group特性以后的实际效果。

至此，这个网页页面就早已做好了。可是出現了1个难题，便是页脚地区不容易黏附在访问器对话框可视性地区底部，这让客户体验十分不尽人意。

应用css3的flexbox特性完成就很简易。最重要的技能便是让body元素变为1个伸缩器皿，而且应用伸缩性特性box-flex让页脚地区以前的div具备伸缩性（也便是#page元素）。也便是说，页脚地区前的div会变为1个伸缩新项目，会依据伸缩器皿的高宽比自融入填充伸缩器皿的附加室内空间，也便是全自动拉伸页脚地区前的div填充访问器可视性地区中的全部室内空间。

假如期待全部网页页面的合理布局要和访问器对话框可视性地区1样高，

最先务必设定html和body元素的高宽比和访问器对话框可视性地区高宽比1样高。假如少了body高宽比的设定，body自身就沒有高宽比，自然伸缩新项目的伸缩性也就没法反映。

最终，设定页脚地区前的div（#page元素）中的box-flex特性，让其依据伸缩器皿（这里是指body）的高宽比自融入伸缩器皿body的附加室内空间，也便是全自动拉伸#page元素的高宽比。这样就会是页脚1直在访问器可视性对话框底部显示信息。

上面编码中，#page元素自身是1个伸缩器皿，如今变为伸缩新项目。在伸缩合理布局盒实体模型中，伸缩新项目在侧轴的对齐方法box-align（旧版本号）默认设置值为stretch，（css中可不写box-align特性）导致#page元素的3个伸缩新项目都会全自动拉伸，无论內容高宽比有是多少都具备伸缩器皿#page的高宽比，从而完成3列等高合理布局而且页脚黏附访问器可视性地区底部的实际效果。最终附上实际效果图。

总结
以上便是这篇文章内容的所有內容，文章内容总结的還是很详尽的，期待对大伙儿的学习培训或工作中带来1定的协助，假如有疑惑大伙儿能够留言沟通交流。