Flex弹性布局二——设置在 flex item 上的属性

接上文Flex 弹性布局一——flex 容器及设置在容器上的属性

 三、设置在 flex  item 上的属性

1. order
2. flex-basis
3. flex-grow
4. flex-shrink
5. flex
6. align-self

1、order: 定义元素在容器中的排列顺序，数值越小，排列越靠前，默认值为 0 

.item {
    order: <integer>;
}

2、flex-basis: 定义了在分配多余空间之前，元素占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间

.item {
    flex-basis: <length> | auto;
}

默认值：auto，即项目本来的大小, 这时候 item 的宽高取决于 width 或 height 的值。 当 flex-basis 值为 0 % 时，是把该元素视为零尺寸的，故即使声明该尺寸为 140px，也并没有什么用。 当 flex-basis 值为 auto 时，则根据尺寸的设定值(假如为 100px)，则这 100px 就为元素的大小。

3、flex-grow: 定义元素的放大比例

.item {
    flex-grow: <number>;
}

默认值为 0，即如果存在剩余空间，也不放大。 当所有元素都以 flex-basis 的值进行排列后，仍有剩余空间，那么这时候 flex-grow 就会发挥作用。

如果所有元素的 flex-grow 属性都为 1，则它们将等分剩余空间。(如果有的话)

如果一个元素的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

当然如果当所有元素以 flex-basis 的值排列完后发现空间不够时，且 flex-wrap：nowrap 时，此时 flex-grow 则不起作用了，这时就需要flex-shrink 这个属性。

grow 在 flex 容器下的子元素的宽度和比容器和小的时候起作用。 grow 定义了子元素的尺寸增长因子，容器中除去子元素之和剩下的尺寸会按照各个子元素的 grow 值进行平分加大各个子元素上。

4、flex-shrink: 定义了项目的缩小比例

.item {
    flex-shrink: <number>;
}

默认值: 1，即如果空间不足，该元素将缩小，负值对该属性无效。

如果所有元素的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。

如果一个元素的 flex-shrink 属性为 0，其他元素都为 1，则空间不足时，前者不缩小。

5、flex: flex-grow,flex-shrink 和 flex-basis 的简写

.item{
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

flex 的默认值是以上三个属性值的组合。

假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。

快捷值：auto (1 1 auto) 和 none (0 0 auto)

关于 flex 取值，还有许多特殊的情况，可以按以下来进行划分：

(1) 当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

(2) 当 flex 取值为 0 时，对应的三个值分别为 0 1 0%

.item {
    flex: 0;
}
.item {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 0%;
}

(3) 当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.item-2 {flex: 24px;}
.item-2 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

(4) 当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：

.item {flex: 2 3;}
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

(5) 当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 11 32px;}
.item {
    flex-grow: 11;
    flex-shrink: 1;
    flex-basis: 32px;
}

flex-shrink 和 flex-grow 只有一个能起作用，这其中的道理显而易见：空间足够时，flex-grow 就有发挥的余地，而空间不足时，flex-shrink 就能起作用。当然，flex-wrap 的值为 wrap / wrap-reverse 时，表明可以换行，既然可以换行，一般情况下空间就是足够的，flex-shrink 当然就不会起作用

6、align-self:允许单个项目有与其他项目不一样的对齐方式 

单个项目覆盖 align-items 定义的属性

默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

.item {
     align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

这个跟 align-items 属性时一样的，只不过 align-self 是对单个项目生效的，而 align-items 则是对容器下的所有项目生效的。

---

Flex 弹性布局一——flex 容器及设置在容器上的属性