历经各种偷懒、鬼混，我终于迎来了这个系列的结束篇！撒花！
闲话少说，赶紧进入正题（今天别的学习任务还没完成呢，很急，让我们油门踩到底）。在前两篇文章中，对于flex布局的内容我们已经谈的差不多了，这里最后剩下一个内容就是项目属性，接下来我就按我的理解给大家阐述一下这个内容。
项目属性
flex布局中项目属性为一下6个：
- order //号码，就是一个队列里你排几号
- flex-grow //膨胀，就是有多余空间时的放大方式
- flex-shrink //收缩，就是空间不足时的收缩方式
- flex-basis //基值，每个项目在未膨胀未收缩前所占的空间
- flex //前面三个的结合
- align-self //私人对齐方式，这个后面再详细介绍，这里不太好说
整体上来说项目属性就是上面这6个内容，接下来我一个个的谈一下。
1）order 号码
这个属性用来标注这个项目在队列中的号码，号码越小越靠前，其取值是<integer>，即任意的整数，具体用什么就看自己选了。
这里我重点讲两个细节，首先是这个属性的默认值是0；再然后就是当这个属性值存在相同的情况时，相同的部分就按正常结构中的顺序排列（这是不是该交文本流？这个概念我一直记不清名字）。
2）flex-grow 膨胀
这个属性我选择了我比较中意的解释，膨胀。至于其详细点的解释就是在存在剩余空间时项目放大分割剩余空间的比例。其取值是<number>，即任意的数字（字面上是这样的，但在具体使用这应该是限制在 >= 0范围内的），具体使用也是需要去具体考虑的。
关于这个内容我也将两点细节，首先是这个属性的默认值是0，但不同于上面的0，这个0还有一些小内容，就是当这个值为0时，即便存在剩余的空间也不会变化；再然后就是这个比率其实是个相对的概念，比如同一容器内所有项目都为1，那有剩余空间需要分配时大家分到的都是一样的，如果都是100，那依然是一样的。但是如果一个为2，别的全是1，那分配时这个为2的分到的就是别的项目的两倍，大体上就是这个意思，我相信机智的读者是能够理解的。
3）flex-shrink 收缩
这个属性其实是和上面那个属性对应的，即在空间不够放置项目时收缩的比例。取值也是<number>，对照上面的内容，简单的一批。
然后继续说细节，依然是两个点，首先是默认值，这个属性不同于膨胀，其默认值为1，即如果没改动的话，当空间不足时所有项目都等比收缩；其次等同于上面的内容，这个属性的值也是需要相对于同容器别的项目来看的，这里我就不多说了，对照上面的内容应该能很快理解的。
4）flex-basis 基值
这个属性决定的是项目未膨胀也未收缩时的所占的主轴空间，这里顺便强调一下，前面两个值也是以主轴空间为空间做变换的，就是很多时候都是宽这个属性对应的。这个属性的值主要分两类<length> | auto，即一个具体的长度或者自动。
接下来谈一些细节，第一点，当该属性值为auto时，决定项目默认占据空间的就是项目自身的width（少数情况里也会是height，就是主轴垂直方向的时候），并且auto是默认值；第二点，当项目本身存在width，flex-basis又是一个具体的长度时，项目依据flex-basis来渲染。
5）flex 前面三个结合
这个属性就很直接了，就是三个的结合，这里可能存在歧义，我就详细的写出来吧，是flex-grow、flex-shrink和flex-basis的结合，其取值也是有三个值组成，分别对应这三个属性。
细节上依然是两个内容，首先默认值为 0 1 auto（其实就是三个属性的默认值，具备效果前面谈过这里就不多说了）；还有就是该属性有两个快捷值auto（1 1 auto）和none（0 0 auto）。
6）align-self 私人对齐方式
看见self这个单词想必大家就已经懂了，就一个私人的属性，再结合align，有点CSS基础的兄弟应该都懂，这肯定是私人对齐方式了。说正式点就是允许单个项目有自己的对齐方式。这个属性覆盖的是容器中的align-items属性，默认为auto，即由容器决定。取值上除了auto就是和align-items完全一样了。
到这里关于flex布局的内容我总算是写完了，瘫倒在地。这里再次重申，我写这个文章主要还是对自己所学知识的复习和总结，大多是自己的记忆和理解，可能存在问题，大家如果学习相关内容最好有别的内容对照，并且图文并茂会更容易的理解这一内容。
网友评论