设为 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：项目的排列顺序，数值越小，排列越靠前，默认值为0flex-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
;
