C3之flex布局

• flex布局，也叫作伸縮布局盒模型，是一種更加有效的制定、調整和分布一個容器裡的項目布局的方式，即使它們的大小是未知的或者是動态的，當一個容器被設定為flex布局以後，子元素的float、clear和vertical-align屬性都将失效。
• 采用flex布局的元素，成為Flex容器，它的所有直系子元素自動成為容器成員，稱為flex項目，容器預設存在兩根軸，水準的主軸和垂直的交叉軸

• 在Flex布局下，可以

  使用display：flex；定義一個flexBox容器、

  使用flex-direction屬性定義主軸的方向、

  使用flex-wrap屬性定義flex項目溢出後的換行方式、

  使用justify-content屬性定義flex項目在主軸上的對齊方式、

  使用align-items屬性定義flex項目在交叉軸上的對齊方式、

  使用align-content屬性定義多根軸線的對齊方式，如果flex項目隻有一根軸線，該屬性無效、

  使用order屬性定義flex項目的排列順序，數值越小，排列越靠前、

  使用flex-grow屬性定義flex項目的剩餘空間放大比例、

  使用flex-shrink屬性定義項目溢出時的縮小比例，預設為1，

  使用flex-basis屬性定義項目在占據的主軸固定空間、

  使用align-self屬性為單個flex項目定義交叉軸對齊方式

容器屬性
display:flex;
flex-direction:row(預設值) | row-reverse | column | column-reverse;
flex-wrap:nowrap(預設值) | wrap | wrap-reverse;
flex-flow：[flex-direction] [flex-flow];
justify-content:flex-satrt(預設值) | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch(預設值);
align-content: flex-start | flex-end | space-between | space-wround | stretch(預設值);
項目屬性
order：integer；
flex-grow：number /*default 0*/；
flex-shrink: number /*default 1*/;
flex-basis: length | auto /*default auto*/;
flex: none | [flex-grow] [flex-shrink] [flex-basis];
item-self: auto | flex-start | flex-end | center | baseline | stretch;