web前端开发学习指南之弹性盒布局模型详细讲解

零基础学前端学什么?下面就跟着小编一起来了解一下web前端开发学习指南，全方位了解弹性盒布局。

概念

弹性盒布局是css3引入的一种新的布局模式，也称为flexbox布局，即伸缩性布局盒模型，这种布局方式是用来提供一个更好的有效地方式制定、调整和分布一个容器里的项目布局，即使容器中的项目的尺寸未知或者是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的项目的尺寸和顺序来最好地填充所有可用空间。弹性盒布局是与方向无关的，在传统的布局方式中，block布局是把块在垂直方向从上到下依次排列，而inline布局则是在水平方向来排列，而弹性盒布局并没有这样内在的方向的限制，可以由开发者自由定义。

弹性盒布局中有两个互相垂直的坐标轴，一个是主轴，一个是侧轴。在未声明时，主轴默认方向是水平方向，侧轴是垂直方向，但是方向并不是固定的，可以通过css声明首先定义主轴的方向是水平还是垂直，从而侧轴的方向也能确定下来。

主要功能

1、 屏幕和浏览器窗口大小发生变化也可以灵活调整布局;

2、 制定伸缩项目沿着主轴或者侧轴按比例分配额外空间，从而调整伸缩项目的大小;

3、 指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间;

4、 指定如何将垂直于元素布局轴的额外空间分布到该元素的周围;

5、 控制元素在页面上的布局方向;

6、 按照不同于标准流所指定的排序方式对屏幕上的元素重新排序。

web前端开发学习指南之弹性盒布局模型详细讲解
基本布局

1、 定义弹性盒：

声明伸缩容器(父元素)：display：flex;需要加前缀

display&#