Flexbox布局

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项目与它们的基线对齐，即第一行文字的基线对齐

align-self各属性值的示例图

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容器上没有作用