网站前端布局方式之：前端弹性布局

(flex container)是指在页面中任何一个元素只要设置了display:flex属性时，那么当前盒子都称为弹性盒子。弹性盒子默认有两条轴： 默认水平显示的主轴 和 始终要垂直于主轴的侧轴(也叫交叉轴)，在弹性盒子中所有的子元素都是沿着主轴方向显示。

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：

1、在不同方向排列元素
2、重新排列元素的显示顺序
3、更改元素的对齐方式
4、动态地将元素装入容器

在使用中有关em/rem弹性单位的使用说明：

第1. rem/em区别
rem是相对于html元素的font-size大小而言的，而em是相对于其父元素。

第2.使用em或rem让布局更加灵活
使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。传统时使用的是绝对单位px（像素）。如果从网站易用性方面考虑，字体大小应该是可变的。时，占据大部分浏览器市场的IE无法调整那些使用px作为单位的字体大小。

第3.em/rem单位的自适应性
的特点是，包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「静态/固定布局」）。早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种情况下。使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。

第4.方便浏览器对em/rem的数值计算
浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。

第5. 对padding或margin属性良好的支持性
用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等情况（因为em/rem相对于字体大小，会同步改变）。例如：p{ text-indent: 2em; }。

第6. em/rem本身的属性受到开发人员的喜欢
由于中em/rem属性的优势让更多的技术开发人员喜欢并选择，使用rem单位的弹性布局尤其在移动端很受欢迎。

第7.em/rem属性一些小小的不足
其实在移动端使用所谓的弹性布局，是比较勉强的。移动端流行起来的原因归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用。其实，使用vw、vh等后起之秀的单位，可以实现完美的流式布局（高度和文字大小都可以变得“流式”），弹性布局就不再必要了。