网页设计中最常用的伸缩盒模型布局

　　网页是否美观最直接取决于如何布局，当前最流行的布局方式伸缩盒模型布局，它到底是什么意思?

　　CSS3引入的布局模式Flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度，高度，以最佳方式填充可用空间。

　　Flex容器使用Flex项目可以自动放大与收缩，用来填补可用的空闲空间。

　　更重要的是，Flexbox布局方向不可预知，不像常规的布局(块级从上到下，内联从左到右)，而那些常规的适合页面布局，

　　但对于支持大型或者复杂的应用程序就缺乏灵活性。

　　如果常规布局是基于块和内联文本流方向，那么Flex布局就是基于“Flex-flow”方向。先来了解一下伸缩盒模型的一些专用术语。

　　主轴：Flex容器的主轴主要用来配置Flex项目。他不一定是水平的，这主要取决于fle-direction属性。

　　主轴起点，主轴终点：Flex项目的配置从容器的主轴起点边开始，往主轴终点边结束。

　　主轴长度：Flex项目在主轴方向的宽度或高度就是项目的主轴长度，Flex项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。

　　侧轴：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。

　　侧轴起点，侧轴终点：伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。

　　侧轴长度：Flex项目在侧轴方向的宽度或高度就是项目的侧轴长度，Flex项目的侧轴长度属性是widht或height属性，由哪一个对着主轴方向决定