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;