flex布局

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

容器的属性（父元素container）

• flex-direction:控制主轴方向

flex-direction: row;
flex-direction: row-reverse ;
flex-direction: column;
flex-direction: column-reverse;

• flex-wrap：默认情况下，排列在轴线上

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

• flex-flow:flex-direction属性和flex-wrap属性的简写形式

flex-flow:row nowrap

• justify-content:在主轴上的对齐方式

justify-content: flex-start;
justify-content:flex-end;
justify-content: center;
justify-content:space-between;
justify-content: space-around;

-align-items 在交叉轴上的对齐方式

align-items: flex-start; 
align-items: flex-end;
align-items:center;
align-items: baseline;
align-items: stretch;

• align-content:多根轴线的对齐方式,如果只有一根轴线则不起作用

align-content: flex-start; //与交叉轴的起点对齐
align-content:flex-end;    //与交叉轴的终点对齐
align-content: center;      //与交叉轴的中点对齐
align-content: space-between;   //与交叉轴两端对齐，轴线之间的间隔平均分布。
align-content: space-around;     //每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍。
align-content: stretch;   //轴线占满整个交叉轴。

项目的属性（子元素 item）

• order：项目的排列顺序，数值越小，排列越靠前，默认值为0
• flex-grow：如果存在剩余空间，放大的比例
• flex-shrink：如果存在空间不足，缩小的比例
• flex-basis：在主轴方向上占据空间大小的初值
• flex：是flex-grow、flex-shrink、flex-basis属性的缩写形式

flex: auto; === flex: 1 1 auto;
flex: none; === flex: 0 0 auto;
flex: initial; === flex: 0 1 auto;
flex: <number>; === flex: <number>1 auto;
flex: 1; === flex: 1 1 auto;

• align-self：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

align-self: auto; //继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self:flex-start;
align-self: flex-end ;
align-self:center;
align-self: baseline;
align-self: stretch;