5分钟掌握FlexItem布局

属性点梳理

按照国际惯例，真正理解属性之前，我们首先需要知道项目存在哪些知识点。

> 容器内部项目属性  

1）：order

容器内子项目的前后排列顺序。

2）：flex-grow

规定容器内项目尺寸放大的比例。

3）：flex-shrink

规定容器内项目尺寸缩小的比例。

4）：flex-basis

该属性用于设置或检索弹性盒伸缩基准值。

5）：flex
flex-grow、flex-shrink、flex-basis三个属性的集合，类似于margin这样的集合属性。
6）：align-self
该属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

这些定义如果现在看不懂也不要紧，接下来的部分我将以图文的方式详细得来展现各个属性的效果。

记忆和理解

好消息是这一块的属性，会涉及一些数学上的计算，那么1就是1,2就是2，会有助于我们进行理解。

order项目前后顺序

order属性只接受整数属性值。越小item项目排列顺序越靠前。

order

flex-grow项目尺寸放大比例

该属性只支持int数值，默认值为1，0和负数将不起作用。
单位1剩余空间：（容器主轴方向尺寸-(所有item项目的尺寸和)）/（所有item项目flex-grow相加的值）
那么在浏览器计算完成后，设置了该属性的item项目尺寸将会变成，初始尺寸值+单位1剩余空间值*本item的flex-grow值。要是想清楚的看到效果，尽量不要设置尺寸为auto。

flex-grow

分析上图案例：外层容器宽度350px，每一个文档流项目宽度为100px，所以，那么第一行多出来350-300=50px，那么第一行单位1宽度为12.5px=50/（1+2+1），所以文档流1号宽度将变成112.5px，2号将变成125px。那么分行也是这么进行计算。

flex-shrink项目尺寸缩小比例

类似于flex-grow属性，单位1缩减空间计算值：（所有item项目尺寸和-容器尺寸）/（全部item flex-shrink 值的和）。

flex-shrink

案例分析：flex容器主轴方向为水平左到右，宽度为200px，文档流项目宽度都为200px，单位1缩小尺寸=400/(1+2+4)=57.14px，那么就会产生一个问题：3号项目应该要缩小57.14*4=228.57px，这个时候如果3号项目没有内容，那么将不会进行展示，但是这个时候有内容，就撑起内容的宽度，导致出现计算上的偏差。

我的建议是：要想出现完美的缩小样式，还希望不要把容器的主轴尺寸设置的太小，并且也不要把项目的flex-shrink设置的太大，一旦缩小值比项目自身的尺寸还要大，要么就不会进行展示，要么就按照内部内容进行支撑。

flex-basis项目伸缩基准值

渲染项目主轴方向的尺寸之前，浏览器率先查看项目里面的basis属性的值。
那么我们就盘点该属性都有哪些可能的取值。

*1：auto
这个时候浏览器在计算布局的时候，先查看width或者是height，这个取决于主轴（flex-direction），是否有放大缩小的情况就取决于grow和shrink的属性设置。

2：非负数百分比
项目的尺寸的计算已经和本身的宽度和高度无关，那么初始尺寸就是flex容器尺寸flex-basis。

*3：非负数像素尺寸
项目的尺寸初始值就是basis的值，然后在判断是否需要伸缩尺寸。

align-self 特立独行

该属性覆盖了父容器中的align-items属性值，一个不服从管教的孩子，大家都坐在一排，他却偏要做到教师最后一排，就是这么有个性。
既然是自己给自己下命令，那么可能存在的属性值就和align-items属性相同。

总结

本篇介绍了item项目上的flex弹性盒子的属性，东西不是很多，学习要点就是写布局之前需要在脑海中多进行建模，和计算，不用很精细的去计算，只要达到效果就行，只要在误差内就是一种可行的方式。