传统布局
基于盒模型，依赖float+display+position进行页面布局。这种方式兼容性好，但是布局过程繁琐。
传统布局的不便：
（1）各种居中对齐；
（2）块级元素同行显示，设置浮动；
（3）清除浮动；
（4）各种细节的调整；
css3提出了一种自适应的布局模式——弹性布局（弹性盒模型），用来辅助或者替代传统布局。
弹性盒模型
概念它是一种当页面需要适应不同的屏幕大小以及设备类型时，确保里面元素拥有恰当行为的一种布局模式。
目的
提供一种更加有效的方式来对一个容器中的子元素进行排列，对齐或剩余空间分配。
弹性盒模型结构
弹性盒子是由弹性容器和弹性项目构成的。
弹性容器：包含弹性项目的父元素。
弹性项目：弹性容器里面的每个子元素。
主轴：弹性项目排列在一行显示的方向就是主轴。
侧轴：与主轴垂直的方向。
给父元素（弹性容器）设置的属性
display:flex | inline-flex设置盒子为弹性容器
display：flex；设置块级弹性容器，对里面的子元素来说，就是弹性容器，对其兄弟元素来说，就是普通的块级元素。display：inline-flex；设置行级弹性容器，对里面的子元素来说，就是弹性容器，对其兄弟元素来说，就是一个普通的行级元素。
弹性容器的特点
弹性容器里面的弹性项目可以同行显示，排列不下的，按比例压缩显示。弹性容器不设置高度时，高度可以自适应，高度由内容决定。
弹性容器对兄弟元素没有影响。
弹性容器只对直接子元素有影响。
flex-wrap
设置弹性容器中弹性项目排列不下时是否换行。no wrap ： 默认值，不换行。
wrap：换行。
flex-direction
控制主轴的方向，控制弹性项目的排列方向。row：默认值，沿着水平主轴让元素从左到右依次排列。
row-reverse：沿着水平主轴让元素从右到左依次排列。
column：沿着垂直主轴让元素从上到下依次排列。
column-reverse：沿着垂直方向为主轴，从下到上依次排列。
富裕空间
概念：在弹性容器中，除去弹性项目之后剩下的空间，就是富裕空间。分为两部分：
（1）主轴上富裕空间：justify-content；
（2）侧轴上富裕空间：align-items 和 align-self；
justify-content
处理主轴上的富裕空间，将主轴上富裕空间进行分配。flex-start：默认值，将富裕空间分配在弹性项目之后。
flex-end：将富裕空间分配在弹性项目之后。
space-between：首尾紧靠弹性容器，中间均分富裕空间。
space-around：每个弹性项目两侧均分富裕空间。
space-evenly：每个弹性项目之间间距完全一样，包括第一个和最后一个分弹性容器之间的间距。
center：让弹性项目居中显示。
align-items
处理侧轴上的富裕空间，将侧轴上富裕空间进行分配。flex-start：默认值，侧轴上的富裕空间均分放在每行弹性项目之后。
flex-end：侧轴上的富裕空间均分在每行弹性项目之前。
center：让弹性项目在当前行居中。
stretch：当弹性项目没有设置高度时，默认值将弹性项目拉伸撑满整个容器。
给子元素（弹性项目）设置的属性
align-self
处理当前的弹性项目的富裕空间分配。flex-start：默认值，侧轴上的富裕空间均分放在每行弹性项目之后。
flex-end：侧轴上的富裕空间均分在每行弹性项目之前。
center：让弹性项目在当前行居中。
stretch：当弹性项目没有设置高度时，默认值将弹性项目拉伸撑满整个容器。
flex-shrink
设置当弹性容器的宽度不够时，弹性项目的压缩因子。原理：当弹性容器的宽度一行排列不下当前所有弹性项目时，就会按照设置flex-shrink的值将项目进行压缩，以达到不换行的目的。flex-shrink会按照设置的值将需要压缩的宽度等量划分，减少对应的弹性项目的尺寸。
前提：弹性容器宽度必须小于弹性项目的总宽度，弹性项目不换行。
语法：
flex-shrink:数字；
默认值为1.
计算公式
弹性项目的压缩空间=（弹性项目的总宽度-弹性容器的宽度）/压缩因子的总数* 压缩因子。
弹性项目大小=弹性项目的宽度-弹性项目的压缩空间。
flex-grow
设置弹性项目的弹性因子，用来消化富裕空间。需设置一个数字，默认值为0.
计算公式：
弹性项目的弹性空间=富裕空间/弹性因子的总数* 弹性因子
弹性项目的大小=弹性项目的宽度+弹性空间
弹性空间
概念：弹性项目消化掉的富裕空间。将富裕空间变成了弹性项目中的一部分，即弹性项目尺寸会发生改变。
flex-basis
设置弹性项目的默认宽度，其优先级大于width。语法：
flex-basis：宽度；
默认值，不写就是auto。
flex
复合属性：flex-grow、flex-shrink、flex-basis语法：
flex：flex-grow flex-shrink flex-basis
order
能改变某个弹性项目的显示位置。语法：
order:数字
数字越大，位置越靠后，数字越小，位置越靠前。数字相同，按照代码结构依次显示。
默认为0；
应用场景：
不改变代码结构的情况下，鼠标拖拽盒子的显示顺序。
将某个模块拖拽到最后。
