flex布局是一种无论对于块级元素还是行内元素都可以被采用的布局，且它使用起来也是十分的方便
首先是要指定flex布局
当我们指定flex布局方式的时候，其属性值 float、clear、vertical-align就失效了
无论是块级元素还是行内元素，当他们指定使用flex布局的时候，就被称为“ 容器 ”（flex container）
他们的子元素自动成为容器成员，被称为“ 项目 ”（flex item）。
flex布局是通过两根轴决定的，其实现方式其实和直角坐标系很像，都是通过轴来进行定位
每个容器都有两根轴，分别为水平的 主轴 （main axis）和垂直的 交叉轴 （cross axis）。主轴开始位置为main start，结束位置为main end。交叉轴的开始位置为cross start，结束位置为cross end
容器内的项目都是沿着主轴排列的，这点和块级元素有较大的不同，因为每个块级元素默认是占有一整行的，且排列方式为由上到下排列。
每个项目都占有一定的主轴空间和交叉轴空间，分别被称为main size和cross size
flex布局下，容器和项目都有其各自的属性
决定主轴的方向，即决定项目的排列方向，其属性值有
决定了当一行放不下所有的项目时，其换行与否以及换行方式
定义了项目在主轴上的对齐方式，假设主轴是从左向右的水平排列
定义了项目在交叉轴上的对齐方式，假设交叉轴是从上到下排列
在这里重点说一下上面这两个属性。
这样可以很方便的设置水平垂直居中
另外说一下align-items：baseline这个属性值。如描述，这个属性值是通过文字来进行对齐，而不是每个项目的边界或是中心
在容器内具有多根主轴线时，可以定义这些轴线的对齐方式
align-content属性和justify-content属性，这两者的属性值有较大的相似之处，这是因为，justify-content属性定义的是多个项目在主轴上的对齐方式，而align-content属性定义的是多根主轴在交叉轴上的对齐方式，这两者描述的对象就几乎一致
定义了多个项目的排列顺序，其使用方式和z-index属性值有异曲同工之处，都是指定属性值，属性值为整数。对于order属性，属性值越小，则排列越靠前；对于z-index属性，则属性值越小，就越在底层
设置了项目的放大比例，其默认值为1。
设置了项目的缩小比例，默认值为1。
在分配多余空间之前，为项目定义其占据的主轴空间
用来设置单个项目与其他项目不同的对齐方式，其属性值和align-items的属性的属性值基本一致，不过其默认值为auto，表示继承父元素的属性值。
我们知道，标准流中的，父容器里的多个块级的子元素会默认从上往下排列。但我们如果使用伸缩布局，就可以使子元素们在不脱离标准流的情况下，水平方向上，从左至右排列
flex 布局的优势
1、flex 布局的子元素不会脱离文档流，很好地遵从了“流的特性”。
2、flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。
但flex 的缺点在于，它不支持低版本的 IE 浏览器。
我们来明确几个概念
弹性盒子
弹性盒子指的是使用 display:flex 或 display:inline-flex 声明的父容器。
子元素/弹性元素
子元素/弹性元素指的是父容器里面的子元素们（父元素是弹性盒子）。
使用 display:flex 或 display:inline-flex 声明一个父容器为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。我们一般使用display:flex。
1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
min-width 最小值 min-width: 280px 最小宽度 不能小于 280
max-width: 1280px 最大宽度 不能大于 1280
flex-direction：用于设置盒子中子元素的排列方向。属性值可以是：
flex-direction这个属性默认子元素从左到右排列的。
子盒子如何在父盒子里面水平对齐方式如下所示，
子盒子如何在父盒子里面垂直对齐（单行），如下所示
flex-wrap控制是否换行，如下
flex-flow是flex-direction、flex-wrap的简写形式
align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。必须对父元素设置自由盒属性display:flex，并且设置排列方式为横向排列flex-direction:row并且设置换行，flex-wrap:wrap这样这个属性的设置才会起作用。
