写这篇文章的原因是：1、我很早就想写了；2、昨天面试阿里时，在面试结束的最后被尊敬的面试官随意问了一下display的属性值；引起我开始写作这篇文章。相信一些写pc端的初级开发者还是会想不起display有flex这个属性值的，哈哈。
很久以前就关注了flex布局，只是以前flex布局在pc端的浏览器兼容不是很友好，所以在开发中不是很经常使用，现在随着浏览器的更新换代，很多开发者采取不再兼容ie8以下的浏览器的策略，这使得很多开发者都把眼光放到了flex布局上来，还有就是移动端的快速发展，原本pc端的产品都会移植到移动端上，然而flex在移动端上的兼容很友好。
我相信很多同学都想知道一个问题，我们为什么不使用我们传统的开发形式：使用position和float来进行定位、浮动；却要使用一个对浏览器不是很友好的flex呢？答案非常简单：就是当你理解了它的使用方法时，你就会发现使用flex进行布局非常简单，而且是响应式的，三个字：“快、准、恨”。不过在开发中，偶尔还是会碰到一些块布局不准的问题。
其实我最想说的是“开始详解一下flex的使用”，参考了 阮一峰老师的文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
想看图像解说的请移步一峰老师的文章，已经对flex布局有一定的了解，想快速做每个属性或每个属性值的比较、快速复习、快速回忆属性值的，可以浏览这篇文章。
一、父容器的属性设定
1、flex容器的两个主要概念
水平主轴（main axis）和垂直交叉主轴（cross axis）
这两者是理解flex的开始，必须明白flex是有着这两个东西的，因为在flex父块内的子块的分布顺序排布方式与这两者是紧密关联的，请先记住一个是沿水平方向从左到右（或者从右到左。子元素的开始的位置称为main start，结束为main end）排列子元素的水平主轴，另一个是从上到下（或者从下到上 。子元素的开始的位置称为cross starts，结束为cross end）排列子元素的垂直交叉主轴。
2、在flex容器内可设置的6属性
1、flex-direction //控制主轴的布局方式（子元素的排列方向）
属性值：
1、row //子元素从水平方向的左端开始排列 （默认值）
2、 row-reverse //子元素从水平方向的右端开始排列
3、column //子元素布局从垂直方向，从上往下
4、column-reverse //子元素布局从垂直方向，从下往上
2、flex-wrap //子元素的布局排列的换行设定
属性值：
1、nowrap //不换行 （默认值）
2、wrap //换行，第一行在上方
3、wrap-reverse // 换行，第一行在下方
3、flex-flow //前面flex-direction和flex-wrap的组合形式，作用：子元素的排列方式和换 //行情况的设定
属性值：
1、flex-wrap : row nowrap //（默认值）
2、类似1这种使用flex-direction和flex-wrap的属性值的组合
4、justify-content //定义子元素在容器内的对齐方式（看一下前面的main start、main end 、cross start、cross end ）
属性值：
1、flex-start //按flex-direction设置的排列方式的开始位置对齐 （默认值）
2、flex-end //按flex-direction设置的排列方式的结束位置对齐
3、center //以排列方式的中间点向外扩散的形式，将子元素对齐排列
4、space-between //以main（start、end）或者cross（start、end），即布局方 式的两端作为同时开始的位置，向中间排列，每个子元素之间的间隔相等
5、space-around //每个子元素两边都拥有相等间隔，且子元素彼此的间隔不会重 叠，所以子元素之间的间隔比子元素与边框的间隔大一倍
5、align-items //设定子元素在垂直交叉轴上的对齐形式（flex-direction父类：row）或者水平主轴的对齐形式（flex-direction父类：column）
1、flex-start //起点对齐
2、flex-end //终点对齐
3、center //中点对齐
4、baseline //子元素的第一行文字的基线对齐
5、stretch //如果子元素未设定高度或者auto，将占满整个容器 （默认值）
6、align-content //设定子元素在多根轴线情况下的对齐方式
1、flex-start //起点对齐
2、flex-end //终点对齐
3、center //中间点对齐
4、space-between //两端对齐，轴线之间的间隔平均分布
5、space-around //子元素的两边的间隔都相等，且间隔不会重叠
6、stretch //轴线占满整个交叉轴 （默认值）
我想说明的一点是：
我们简单的看这些属性和属性的值是远远不够的，每一个属性都是紧密关联的，在看时，我们应该要是思考一些问题，比如：
1、flex-direction的优先级是高于justify-content的，我们只有设置了flex-direction（子元素的排列方式），再去考虑justify-content（子元素在容器内的对齐方式），因为justify-content是随flex-direction的变化而变化的。
2、margin：auto的优先级比justify高
3、多思考，多尝试写不同属性值的组合
二、子元素的6属性设置
1、order //定义各个子元素的排列顺序，数值越小，排列越靠前，默认为0，可为负数
order：-1;（-1、-3、0、1、6、2......任意数字）
2、flex-grow //定义子元素的放大比例，默认为0（不放大），前提是父容器有空余空间
3、flex-shrink //定义子元素的缩小比例，默认值为1，不能为负数，前提是父容器有空余空间
4、flex-basis //在子元素分配空余空间前，设定指定的子元素的空间大小，默认auto（原值）
5、flex //是flex-grow、flex-shrink、flex-basis的组合，默认值flex:0 1 auto;
6、align-self //允许单个子元素与其他子元素不一样的对齐方式，可以覆盖父元素设定的align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同stretch（填充满）。
属性值：
1、auto //继承父类的align-items的属性值
2、拥有和align-items一样的5个属性值，作用也是一样的。
请注意：使用flex布局的容器，子元素的float、clear和vertical-align属性将不起作用。
