flex的项目属性

flex布局经常会用到，但是经常见到一些类似 {flex: 1; flex-shrink: 0}之类的属性，以前没怎么关注过，今天整体对照着看了一遍，做一个记录。

首先我们平时使用的{display:flex;justify-content:center;align-items:center;}这些是容器属性，也就是父级元素里面设置的，但是如果我们想对某一项子级元素单独设置属性，这就要用到flex的项目属性了。

1.order
属性设置 {order: 数字;}
当给子项添加了该属性，他们会按照order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
感觉不怎么常用，可能需要前端排序的时候会用到。

2.flex-grow
属性设置 {flex-grow: 数字;}
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
先看张图：

正常的flex布局后是这样的，当我们给4设置了flex-grow: 1以后，会变成这样：
可以看到4元素直接把父元素的剩余部分全部都占满了，当其他元素也设置此属性，他们会按照设置的数值大小比例来平分父元素剩余空间。
所以我们可以知晓这个属性是在项目不占满容器的时候使用的，并且让元素放大。

3.flex-shrink
属性设置 {flex-shrink: 数字;}
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。明显看到该属性和felx-grow正好相反，这个是为设置缩小使用的。
当我们把原图父元素的宽度缩小时：

可以发现，每项子元素都会跟着缩小自己的宽度，这是flex布局的正常现象
但是当我们给1设置了flex-shrink: 0的时候

我们发现1的宽度又重新回到了初始宽度，并不会跟随父元素缩小了，而其他元素则比之前更小了。
所以我们可以知晓这个属性是在项目占满容器的时候使用的，并且设置元素的缩小。

4.flex-basis
属性设置 {flex-basis: 单位;}默认auto
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。实际就是给项目设置的宽度，我们使用width一样可以设置，但是如果设置了width又设置了这个属性，会优先按这个属性来。
感觉这个属性不太实用，一般应该设置width就可以了。

5.flex
属性设置 {flex: flex-grow flex-shrink flex-basis;}
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，我们可以直接使用这个属性来同时设置前三个属性，他有两个快捷写法：{flex: auto}和{flex: none}，flex:auto表示 (1 1 auto)；flex:none表示(0 0 auto)。
常见的flex: 1 实际上就是flex:auto，是三个属性的缩写：flex-grow: 1; flex-shrink: 1 flex-basis: auto;
我们使用的时候可以直接使用这个属性来设置，方便了很多浏览器也容易辨认

6.align-self
属性设置 {align-self: auto | flex-start | flex-end | center | baseline | stretch;}
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
也就是我们想对某子项单独设置交叉轴的对齐方式可以使用该属性。