flex语法

1、含义：

任何一个容器都可以指定为flex布局，行内元素也可以：inline-flex

注意：webkit内核的浏览器，必须加上-webkit前缀：display：-webkit-flex；flex布局后，子元素的float、clear和vertical-align属性将会失效

2、容器的属性

①flex-direction：决定排列方向

值：row、row-reverse、column、column-reverse

②flex-wrap：排列时放不下时，是否换行

值：nowrap、wrap、wrap-reverse

③flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

④justify-content：项目在主轴上的对齐方式

值：flex-start、flex-end、center、space-between、space-around

⑤align-items：项目在交叉轴上的对齐方式

值：flex-start、flex-end、center、baseline、stretch（默认全局）

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

值：flex-start、flex-end、center、space-between、space-around

3、项目的属性

①order：定义项目的排列方式。数值越小，排列越靠前，默认为0

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

③flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

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

⑤flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

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

值：auto | flex-start | flex-end | center | baseline | stretch;