flex布局有主轴和侧轴两个轴（main axis和cross axis），这两个轴是可以互换的。
默认情况下，主轴是整个容器的宽，侧轴是高。
flex容器的所有属性，即父容器
flex-direction：设置主轴为容器的宽或高，侧轴与之相应的改变，控制flex项目的排序
主轴和侧轴是可以通过flex-direction属性来定义的。对应的属性如下：
flex-direction : row ; //默认值，主轴为宽，从左往右
flex-direction : row-reverse ; //主轴为宽 ， 从右往左，包括div的排列顺序也会倒置，从右往左排起
flex-direction : column ; //主轴为高，侧轴为宽，从上往下
flex-direction : column ; //主轴为高，侧轴为宽，从下往上，div排列顺序也倒置
justify-content ： 主轴对齐（针对主轴），控制flex项目的对齐形式
先要清楚设定的主轴是什么，再来设置这个属性，属性值如下：
justify-content : flex-start //默认值，按照flex-direction设置的主轴顺序对齐排列
justify-content : flex-end //按照flex-direction设置的主轴顺序的结尾进行对齐排列
justify-content : center //中间点向两边延伸对齐
justify-content : space-between //在主轴上，即布局方式的两端作为同时开始的位置，向中间排列，每个子元素之间的间隔相等
justify-content : space-around //每个子元素两边都拥有相等间隔，且子元素彼此的间隔不会重叠，所以子元素之间的间隔比子元素与边框的间隔大一倍
align-items ：侧轴对齐，和 justify-content 主轴对齐的原理一样
先要清楚设定的侧轴是什么，再来设置这个属性，属性值如下：
align-items : flex-start ; //默认值
align-items : flex-end ;
align-items : center; //侧轴上居中对齐
align-items : baseline ; //伸缩flex项目与它们的基线对齐，即第一行文字的基线对齐
align-items : stretch ; //将伸缩flex项目从侧轴起点拉伸到侧轴终点
flex-wrap : 伸缩flex项目在主轴上的换行方式
每个伸缩容器都有且只有一个伸缩行。使用flex-wrap你可以为伸缩容器创建多个伸缩行。
对应的属性值如下：
flex-wrap : nowrap //不换行 （默认值）
flex-wrap : wrap //换行，第一行在上方(这里指的主轴为宽时，当为高时，左右之分)
flex-wrap : wrap-reverse // 换行，第一行在下方(这里指的主轴为宽时，当为高时，左右之分)
align-content ： 堆栈伸缩行，对齐的不是伸缩flex项目，而是整个主轴行
align-content会更改flex-wrap的行为。它和align-items相似，但是不是对齐伸缩项目，它对齐的是伸缩行。
对应的属性值：
align-content ： stretch
align-content ：flex-start
align-content ：flex-end
align-content ：center
align-content ：space-between
align-content ：space-around
flex-flow ：设置主轴与换行
flex-flow: [flex-direction] [flex-wrap]
flex项目的所有属性，即子元素的属性
order : 设置flex项目的显示顺序
设置伸缩项目的 order 可以调整它们渲染时的顺序
order : 0 ; //默认值为0， 数值越小，越靠前，可以设置负数
align-self : 侧轴对齐
允许单个子元素与其他子元素不一样的对齐方式，可以覆盖父元素设定的align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同stretch（填充满）
align-self : stretch ; //填充满真个侧轴
align-self : flex-start ; //以侧轴的开始头对齐
align-self : flex-end ; //以侧轴的末尾对齐
align-self : center ; //以侧轴的中点对齐
align-self : baseline ; //伸缩flex项目与它们的基线对齐，即第一行文字的基线对齐
flex-grow //定义子元素的放大比例，默认为0（不放大），前提是父容器有 空余空间
flex-shrink //定义子元素的缩小比例，默认值为1，不能为负数，前提是父 容器有空余空间
flex-basis //在子元素分配空余空间前，设定指定的子元素的空间大小，默 认auto（原值）
flex : 伸缩性，是flex-grow flex-shrink flex-basis 三部分的合并
flex ：flex-grow [flex-shrink] [flex-basis] //后两者为可选择填写
当 flex ：number 时，其实设置的就是flex-grow，默认值是0，表示不放大，不参与伸缩
flex: 0 //表示不放大，不参与伸缩，需要给该项目设置宽度，最好给一个flex-basis设置它的主 轴宽度
当 flex : 2 时，就是把所有flex不为0的可伸缩项目的数值加起来设为count，则该flex：2的项 目，所占的剩余的全部空间的2/count大小
flex: none //一个flex属性值被设为none的伸缩项目，在任何情况都不会发生伸缩。
flex: initial // 一个flex属性值被设为initial的伸缩项目，在有剩余空间的情况下不会有任何变 化，但是在必要的情况下会被收缩。
注意：
多列组中所有column-*属性、float、clear、vertical-align属性在flex容器上没有作用
