CSS3第十五课：flex弹性布局，一维布局最好的方法（下）_CSS教程

过年最大的好处就是可以和孩子出门疯玩，不到天黑不回家。

一晃眼，又坐在教室里，开始上课写文章了。

一直写博客，但是今年想尝试一下自媒体，写写教育类的文章，算是新年的一个flag吧。

进入正题……

上一篇讲了作用在flex container上的6个属性，这篇文章讲解作用在flex items上面的6个属性。

没看上一篇的建议先补上再看这篇。

CSS3第十五课：flexbox弹性布局，一维布局最好的方法（上）

一、应用在flex items上的6个属性

order
align-self
flex-grow
flex-shrink
flex-basis
flex

1、order

用于排列flex items子项的顺序。默认值为0，可以为正值，负值。

.flex-item{
    order:-1;
    order:5;
    order:0;
}

这个和z-index层级有点像，但是没有那么复杂，默认值为0，大家都一样，谁的值小，就排在前面，按照值从小到大排列。

三个子项已经设置了对应的order值，通过改变第三个子项的order值看看排列顺序的变化。

See the Pen order by zhaolanzhen (@mrszhao) on CodePen.

2、align-self

用于对齐flex items子项中的某一项。可以覆盖为flex container定义的align-items的值。

align-items是父容器为子元素全体定义对齐方式，align-self是定义一个子项个体。

align-self: auto | stretch | flex-start | flex-end | center | baseline;

相比align-items的值，多了一个auto，如果用auto的话，表示继承父元素设置的align-items的值。

看如下测试，为flex container设置了align-items:baseline，然后为第一个flex item设置不同的align-self值，看看有什么变化。

See the Pen align-self by zhaolanzhen (@mrszhao) on CodePen.

3、flex-grow

该属性IE12以上支持。

grow具有生长、扩展的意思，flex-grow用于设置子项如何扩展，占据父容器的剩余空间。

感觉有点像分家产呢，如果比例一样，就平分父母剩余的家产，如果比例不一样，就按照比例分配。

flex-grow的默认值为0，可以为小数，不能为负数。

父容器剩余空间的总量看做1.

分为两种情况：

第一种：只有一个子项设置了flex-grow。

flex-grow小于1，则按照比值扩展。比如flex-grow:0.25，则扩展父容器剩余空间的25%。
flex-grow大于等于1，则占用父容器所有剩余空间。

改变第二个子项的flex-grow的值，看看变化。

See the Pen flex-grow1 by zhaolanzhen (@mrszhao) on CodePen.

第二种：多个子项设置了flex-grow的值。

flex-grow值的总和小于1，则父容器剩余空间没有占用完，每个子项扩展的值等于和父容器总量的比值。比如，一个子项的flex-grow:0.25,则扩展了25%的父容器剩余空间。一个flex-grow:0.5，则扩展50%的空间，剩余的25%没有占用。
flex-grow值的总和大于等于1，则父容器剩余空间全部占用，各个子项的扩展空间等于它们flex-grow的比值。

如下案例，第一个子项flex-grow为0.5，第二个，第三个为0，改变第二个子项的值，看看变化。

See the Pen flex-grow2 by zhaolanzhen (@mrszhao) on CodePen.

当为0.25的时候，父容器还剩下25%没有占据，为0.5的时候，和第一个子项各占据一半，父容器空间被用完。为1的时候，,0.5:1，各自扩展父容器剩余空间的2:1的比例。为2的时候，是4：1，为0的时候，不扩展，第一个子项占据父容器剩余空间的50%。

4、flex-shrink

shrink具有“收缩”的含义。

该属性用于当父容器空间不够的时候，子项如何收缩。

可以有小数，不支持负数，和flex-grow不一样的是，默认值为1，表示默认要收缩，设置为0，表示不收缩。

父容器不足的空间为收缩空间，总量为1.

当某个子项不收缩的时候，可能导致溢出父容器，所以这种情况要确保其他子项要收缩并且总宽度不溢出。

多个子项设置了flex-shrink，按照比值来收缩以适应父容器。如果都是1:1:1，则收缩的比值都是一样。是1:2:1，第二个子项收缩的范围是第一个和第三个的两倍。

See the Pen flex-shrink by zhaolanzhen (@mrszhao) on CodePen.

5、flex-basis

设置flex items子项的初始大小。默认是内容框大小，除非设置了box-sizing为border-box。

注意：如果为元素设置了flex-basis（除auto之外）和width（或flex-direction：column的高度），则flex-basis优先。

flex-basis的默认值为auto，表示内容宽度。可以设置为px、%、em等单位的值。

也有关于“content”的各种属性值，但是谷歌目前不支持。

当父容器空间不足的时候，子项的宽度也许并不是flex-basis的值，因为默认子项会收缩。

下面案例父容器的总宽度是400px，当子项的flex-basis总和超过父容器的时候，会自动收缩，这时的宽度并不是flex-basis的值。

See the Pen flex-basis by zhaolanzhen (@mrszhao) on CodePen.

6、flex

flex是flex-grow、flex-shrink、flex-basis的缩写。

flex可以有一个、两个或三个值。

有一个值的时候：

flex : auto ; 等价于flex : 1 1 auto ; 子项会扩展剩余空间，会收缩以适应容器，会根据内容宽高自动调整。
flex : none ; 等价于flex : 0 0 auto ; 子项不灵活，不会扩展或收缩，会根据内容宽高调整大小。
flex : initial ; 这是默认值，等价于 flex : 0 1 auto ; 子项不扩展，但是会收缩，会根据内容宽高调整。
flex : 无单位的正数 ; 等价于 flex : 正数 1 0；指定子项的扩展空间的比例。此时的flex-basis为0.
flex : 有单位的正值 ; 比如 flex : 40px ; flex : 3em ; 此时这个值表示flex-basis。flex : 30%等价于：flex : 1 1 30%。

有两个值的时候：