CSS之Flexbox制作CSS布局易如反掌

伸缩盒模型（flexbox）是一个新的盒子模型，主要优化了UI布局。作为实际布局的第一个CSS模块（浮动真的应该主要用来制作文本围绕图片这样的效果），它使很多任务容易多。Flexbox的功能主要包手：简单使用一个元素居中（包括水平垂直居中），可以让扩大和收缩元素来填充容器的可利用空间，可以改变源码顺序独立布局，以及还有其他的一些功能

案例1：水平和垂直居中（网页设计的圣杯）

HTML:

CSS：

你可能注意到了，h1元素的文本也在内部垂直居中。这里没使用margin或者line-height，但是我们再次使用了flexbox，让文本变成了一个匿名伸缩项目（在这个案例中，行文本是h1内的元素）。无论h1元素有多高，文本将永远垂直居中

总结：通过设置html和body都是100%让其充满屏幕显示，然后使用align-items和justify-content属性来保证内容的水平垂直居中，我们通过设置body为flex，让其中所有子元素(不包括绝对定位的元素)都变成了伸缩项目

案例2：伸缩尺寸

HTML和CSS类似于前一个示例。使用相同的方法，把所有元素在页面中居中显示。此外，我们让标题（header元素内）保持不变的尺寸，其他五个盒子（section元素）根据浏览器宽度自动调整大小。因此我们要使用一个新的属性“flex”

我们做的是让每个section元素占有1flex单元。因为我们还没有给五个section元素明确的设置宽度，而每个section元素都有相同的宽度。把“header”设置了一个宽度（277px），因为他不是伸缩性的。我们把body剩下的宽度计算到每个section元素中。现在，我们来改变浏览器窗口大小，section元素将会扩展或收缩

注：现在可用的空间除以6，而在悬浮状态是占有2份。注意：一个元素的2flex单元并不一定就是1flex单元宽度的两倍。它只获得了添加两倍比例到他的可用空间的首先宽度。在我们的示例中，首先宽度是0（默认状态下）