flex布局

一、容器的属性

1、flex-direction属性--------决定主轴的方向 即项目的排列方向

    flex-direction：row | row-reverse | column | column-reverse；

2、flex-wrap属性-------定义如果一条轴线排不下，如何换行

     flex-wrap：nowrap | wrap | wrap-reverse；

     nowrap：不换行，默认的           wrap：换行，第一行在上方           wrap-reverse：换行，第一行在下方

3、flex-flow属性--------是上面两个属性的简写形式  默认值为row nowrap

     flex-flow:<flex-direction> || <flex-wrap>;

4、justify-content属性---------定义项目在主轴上的对齐方式

justify-content：flex-start（左对齐） | flex-end （右对齐）| center （居中）| space-between（两端对齐，项目之间的间隔相等） | space-around（每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍）；

5、align-items属性------定义项目在交叉轴上如何对齐

align-items：flex-start（上对齐） | flex-end（下对齐） | center（项目中点对齐） | baseline（项目的第一行文字的基线对齐） | stretch（默认值 若项目未设置高度或者设为auto，将占满整个容器的高度。）；

6、align-content属性--------定义多根轴线（多行）的对齐方式。若只有一根轴线，该属性不起作用。

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

二、项目的属性

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

order：2；

2、flex-grow属性-----------定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

flex-grow:4；

3、flex-shrink属性-----定义项目的缩小比例，默认为1，即如果空间不足也不缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

flex-shrink：3；

4、flex-basis属性---------定义了在分配多余空间之前，项目占据的主轴空间。默认值为auto即项目本来大小

5、flex属性------是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto

6、align-self属性-----允许单个项目有与其他项目不一样的对齐方式，科覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，若没有父元素，则等于stretch。

align-self：auto | flex-start | flex-end | center |baseline | stretch；

更多详情请见  flex布局