display:flex总结

flex布局是一个非常有用以及常见的布局方式
在使用了display：flex之后，float，clear等属性均失效；

display：inline-flex；将对象作为内联块级弹性伸缩盒显示，父元素宽度未设定时；根据子元素宽度自适应；

display：flex；父元素宽度默认为100%；

容器的flex属性：

排列方向：flex-direction：

row（默认）；从左到右；
row-reverse：从右到左；
column ：从上到下；
column-reverse：从下到上；

换行问题 flex-wrap：

no-wrap：(默认)不换行；
wrap：换行；
wrap-reverse：换行，第一行在下方。

元素主轴排列：justify-content：

flex-start主轴方向上：由左或者上开始排列
flex-end主轴方向上：由右或者下开始排列
center：主轴方向上居中排列
space-between：主轴方向上元素与元素，元素与两端间距相等；
space-around：主轴方向上每个元素两侧的间隔相等。所以，元素之间的间隔比元素与边框的间隔大一倍。

元素交叉轴排列：align-items：

flex-start：交叉轴的起点对齐；
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐；
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度；
baseline: 项目的第一行文字的基线对齐。

align-content（实际很少见）

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

flex-start | flex-end | center | space-between | space-around | stretch; 

在每个item上的属性

对齐方式（交叉轴方向上）：align-self

item允许自己与其他item不同的对齐方式，优先级高于容器设置的对其方式；
auto | flex-start | flex-end | center | baseline | stretch;

flex-grow

item在主轴方向上空间有富余时，item放大比例，默认为0，表示不放大，即item本来大小；
如果所有item的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个item的flex-grow属性为2，其他item都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink

item在主轴方向上空间不足时，item缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果该item设置为0，其他设置为1，则该item不缩小，其他等比例缩小

负值对该属性无效。

flex-basis

属性定义了在分配多余空间之前，item占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。优先级大于width；

order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。