flex的几个属性

flex弹性布局已经是本人开发css布局的第一首选了，各种布局都能够非常轻松的实现，只是一直只使用两个属性justify-content、align-items。当我深入学习了一下各种属性之后，发现之前的用法有点没眼看。

容器属性

inline-flex

之前并不知道可以设置行内flex，所以每次一个元素即需要行内又需要flex布局的时候就会在父元素设置flex，其实并不需要：

flex-direction

这个用的比较少，一般用flex都是为了水平，不过有两个属性row-reverse、column-reverse挺有意思的，会自动帮你倒序布局： flex: row;

flex: row-reverse;

justify-content

基础用法，几个属性flex-start、flex-end、center、space-between、space-around。

align-items

基础用法，几个属性flex-start、flex-end、center、baseline、stretch,stretch是默认值，baseline不常用： align-items: baseline;第一行文字的基线对齐:

flex-wrap

换行不换行，也算是基础用法，有一个属性比较不常用wrap-reverse，向上换行： flex-wrap: wrap;

flex-wrap: wrap-reverse;

flex-flow

flex-direction属性和flex-wrap属性的简写。

align-content

定义是属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直），自己试了试，跟align-items一样的效果，所以不知道具体怎么解释。

子元素属性

flex-grow

定义元素的放大比例，比如我要某一个是平分的两倍或者三倍。默认为0，如果存在剩余空间，也不放大。有一个前提是空间足够大，如果空间不够大不会放大或者放大剩余的所有空间。如果剩余空间大于你需要的放大倍数，也会占满剩余所有空间。

flex-shrink

定义了元素的缩小比例，默认为1，如果空间不足，该元素将缩小。如果设置为0，那就不会缩小：

flex-basis

元素占据的宽度，可以是百分比和具体像素px，跟flex-shrink有点相似，具体给了多少宽度，设置flex-shrink不会被缩小，或者直接设置flex-basis具体像素。

flex

flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。常用的就是设置flex: 1;让某个元素占满剩余空间。

order

元素的排列顺序，数值越小越前，默认为0。总觉得在某些场景下非常有用：

align-self

单个元素的对齐方式，覆盖容器的align-items。可能在某些场景也是有用的吧，本来以为水平也有单个的，试了发现没有：

总结了一下，常用的除外，inline-flex、row-reverse、column-reverse、flex-basis、flex-shrink、flex-grow、order这几个属性还是得好好了解才能把flex布局玩出花来。