Flex弹性盒子布局的使用经验

1、水平垂直居中

1、flex-direction   主轴的方向

2、flex-wrap    flex子项是否换行

3、flex-flow  flex-direction/flex-wrap的简写

4、justify-content  flex子项在主轴上的对齐方式。

5、align-items  flex子项在交叉轴上的对齐方式

6、align-content 多条主轴在交叉轴上的对齐方式

1、order     定义子元素的排列顺序。

数值越小，排列越靠前，默认为0，可以为负值。

2、flex-grow  定义子元素在主轴的放大比例，前提是存在剩下空间用于放大。

该属性来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。【默认为0，表示不放大。】

3、flex-shrink  定义了子元素的缩小比例。

前提是空间无法装下盒子大小，默认为1，即如果空间不足，该子元素将缩小。负值对该属性无效。

如果值为0，表示不减小。

4、flex-basis   定义了子元素在主轴上占据的大小(==width:nrem)

它的默认值为auto，即子元素的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则子元素将占据固定空间。如果子元素上同时设置了在主轴方向上的width/height和flex-basis,那么flex-basis会覆盖width/height的值。

5、flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写

默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

6、align-self 控制单个元素在交叉轴上的对齐方式

 align-self属性允许单个子元素有与其他子元素不一样的对齐方式，可覆盖align-items属性（还有五个值写法和align-items一样）。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。