CSS3的伸缩布局

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用，使得开发人员一下子就过上了小康的生活。

伸缩盒模型经历了几次演变，大致分为旧版伸缩布局、过渡伸缩布局、新版伸缩布局，同样为了避免混淆，我们以学习新版伸缩布局为主

新版伸缩布局

这里我们需要引入一些新的概念：

主轴：Flex容器的主轴主要用来配置Flex项目。

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

主轴和侧轴并不是固定不变的，通过flex-direction可以调整。

1、指定一个盒子为伸缩盒子 display: flex

2、设置属性来调整此盒的子元素的布局方式 例如 flex-direction

3、明确主侧轴的方向

4、可互换主侧轴，也可改变方向

其相关属性可参照源代码里的解释如flex-direction、flex-wrap、flex-flow、align-items、align-content、justify-content、align-self、flex、order等

另个两个版本伸缩布局其实现思路与新版基本一致，区别在于其属性及属性值不同，熟练掌握新版伸缩布局后，要参照对比另外两个版本的不同。