子元素属性
flex弹性盒模型不仅能在父级元素设置各种样式，同样为其子元素提供了更多的样式设置。与margin等其他属性的结合使用，页面布局拥有极大的灵活性。
1）order属性
order属性定义了子元素的排列顺序，初始值为零；子元素根据order值由小到大按照指定对齐方式排列；当order值相同时，则根据代码顺序排列。
order属性与z-index属性很相似，前者定义了平面显示顺序；后者则定义了在Z轴上的显示层级。
order: 0 || positiveNumber
**默认顺序**
**第2个子元素设置了order值>0**
2）flex-grow多余空间占比
子元素的大小默认是根据其内容计算的，因此并不一定能够将所有父级容器占满。剩余的空间可以由子元素通过扩展自身的大小来填满，而多余空间的分配则是通过flex-grow来设置。
flex-grow默认为0，即不向外扩展。取值大于0的整数，则按照比例进行多余空间的填充。
**第一个元素扩展了自身**
上图中可以看到，第一个元素占用的空间远远超出其内容的宽度。原因在于第一个子元素的flex-grow设置为1，而第2个子元素的默认为0（不进行扩展）。这样的话，第1个子元素就会将多余的空间全部占用，填充满整个空间。
若第2个子元素的
flex-grow属性也设置为1，则两个子元素将多余空间各填充50%。
3）flex-shrink子元素收缩
与flex-grow恰恰相反，flex-shrink定义的是在父容器空间不足的情况下，子元素收缩的程度。默认值为1，即随着父容器变小时，子元素宽度也随之缩小。也就是完全收缩，可以缩小浏览器窗口来查看动态效果。
若取值为0，flex-shrink: 0;则关闭收缩状态。当父容器变小时，子元素会溢出到父容器之外。
**第2个子元素溢出到父容器之外**
4）flex-basis子元素宽度基准
flex-basis初始化子元素的宽度，取值可以是percentages || ems || rems || pixels||auto之一。
默认是auto，即根据内容自行计算自身宽度；通过百分比、像素值等可以规定子元素宽度，如第二个子元素设置为flex-basis: 100px;:
**flex-basis: 100px;**
flex-basis最有意思的是当其取值为0px时。这时所有元素的初始宽度都是0，那么整个容器空间都是多余空间；然后来设置每个元素flex-grow的值，即可按照比例来布局每个子元素。
**flex-basis:0; flex-grow: 1;**
5）属性简写
上面三个属性可以简写成一个属性，flex。其顺序不能打乱，依次为grow/shrink/basis。
如上图显示的三等分空间，子元素样式属性可简写为：flex: 1 1 0;
flex: 1 1 0;
/* 等价于 */
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1; /*默认值*/
6）align-self单个子元素对齐
单个子元素的对其方式与全部子元素的对齐方式无异，取值只多了auto一个，其余与align-items相同。
对于单个子元素的对齐，并不影响其他子元素的对齐方式。
| 属性值 | 描述 |
|---|---|
| auto | 与其他子元素相同对齐方式 |
| flex-start | 在排列方向的起始方向对齐，纵向起始方向 |
| flex-end | 在排列方向的结束方向对齐 |
| center | 排列在中心对齐 |
| stretch | 默认值，每个子元素扩展到最大高度，填充满纵向空间 |
| baseline | 以内容底部为基准线对齐 |
网友评论