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等
另个两个版本伸缩布局其实现思路与新版基本一致,区别在于其属性及属性值不同,熟练掌握新版伸缩布局后,要参照对比另外两个版本的不同。