Flex弹性布局——属性总结（二）

Flex不止有“容器属性”来控制底下各个子元素的布局，还有专门用于子元素自身设置的“子元素属性”。

紧接着上一篇，继续总结：

（二）子元素属性

1、order

定义子元素的排列顺序。数值越小，排列越靠前，默认为0。

假设有以下标签：
<div class="total">
	<div class="one">apple</div>
	<div class="two">banana</div>
	<div class="three">orange</div>
	<div class="four">pear</div>
</div>
样式设置如下：
.total{display:flex}
.one{order:0}
.two{order:-1}（banana会排第一，因为order值最小）
.three{order:3}（orange排最后，因为orange最大）
.four{order:2}

2、flex-grow

定义子元素的放大比例，默认为0，即如果存在剩余空间，也不放大。

假设有以下标签：
<div class="total">
	<div class="one">apple</div>
	<div class="two">banana</div>
	<div class="three">orange</div>
	<div class="four">pear</div>
</div>
样式设置如下：
.total{display:flex}
.one{flex-grow:2}
.two{flex-grow:1}
.three{flex-grow:1}
.four{flex-grow:1}

这样设置的话，那么在父容器的布局里面，各个子元素的分布比例会变成：apple：banana：orange：pear=2:1:1:1，并且各个子元素的宽度也会自动压缩好以适应这个比例，省去了不少布局麻烦。

3、flex-shrink

定义了子元素的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

注意：负值对该属性无效。

4、flex-basis

定义了在分配多余空间之前，子元素占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

5、align-self

允许单个子元素有与其他子元素不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

div{
/*共有四个参数*/
	align-self:flex-start;(默认值，从交叉轴的开始位置开始排列)
	align-self:flex-end;（从交叉轴的结束位置开始排列）
	align-self:center;（与交叉轴的中点对齐）
	align-self:stretch;（拉伸铺满）
	align-self:baseline;（根据子元素的第一行文字基线对齐）
	align-self:auto;（继承父元素中的align-items值）
}