CSS3的弹性盒子flex详解（2）

上篇讲了弹性盒子中盒子的一些属性，这篇讲子项的属性

1.order

2.aligh-self

3.flex-grow

4.flex-basis

5.flex-shrink

1.order

设置或检索弹性盒子子项出现的顺序，默认值为0，按数值大小由小到大排列

【例1】使用order将下列子项逆序

【代码】

<!DOCTYPE html>
<html lang="en">
<head><style>
.wrapper {margin: 20px;width: 150px;height: 150px;border: 1px solid #424242;display: flex;
}
.wrapper .content {text-align: center;width: 50px;height: 50px;line-height: 50px;background-color: #f88;color: #fff;border: 1px solid #88f;box-sizing: border-box;
}
.content:first-of-type {order: -1;
}
.content:nth-of-type(2) {order: -2;
}
.content:last-of-type {order: -3;
}</style>
</head>
<body><div class="wrapper"><div class="content">1</div><div class="content">2</div><div class="content">3</div></div>
</body>
</html>

结果

2.aligh-self

设置子项沿交叉轴的对齐方式

【例2】分别改变图2-1中第一个子项和第三个子项的对齐方式为flex-start和flex-end

css代码

.wrapper {margin: 20px;width: 150px;height: 150px;border: 1px solid #424242;display: flex;align-items: center;
}
.wrapper .content {text-align: center;width: 50px;height: 50px;line-height: 50px;background-color: #f88;color: #fff;border: 1px solid #88f;box-sizing: border-box;
}
.content:first-of-type {align-self: flex-start;
}.content:last-of-type {align-self: flex-end;
}

结果

3.flex-grow

当主轴方向上有剩余空间时，如图2-1，使用公式3-1去给每个子项分配剩余空间，其中i表示子项的总数，n表示第k个子项的flex-grow属性值（下面简称占几份），c表示剩余空间的像素值，x表示给第k个元素分配的像素值

【例3】将图3-1中的剩余空间分成五份，第一个子项占一份，第二个子项占一份，第三个子项占三份

代码：将【例1】中的样式修改如下

.wrapper {margin: 20px;width: 300px;height: 100px;border: 1px solid #424242;display: flex;
}
.wrapper .content {text-align: center;width: 50px;height: 50px;line-height: 50px;background-color: #f88;color: #fff;border: 1px solid #88f;box-sizing: border-box;
}
.content:first-of-type {flex-grow: 1;
}
.content:nth-of-type(2) {flex-grow: 1;
}
.content:last-of-type {flex-grow: 3;
}

结果子项1宽度 = 50 + [1 / (1 + 1 + 3)] * 150 = 80px，其他子项计算同理

4.flex-basis

当所有子项的flex-basis属性值之和小于盒子的宽度时，flex-basis的属性值会覆盖width的属性值，此时在计算盒子伸缩时以flex-basis为基准

【例4】

.wrapper {margin: 20px;width: 300px;height: 100px;border: 1px solid #424242;display: flex;
}
.wrapper .content {text-align: center;flex-basis: 60px;width: 50px;height: 50px;line-height: 50px;background-color: #f88;color: #fff;border: 1px solid #88f;box-sizing: border-box;
}
.content:first-of-type {flex-grow: 1;
}
.content:nth-of-type(2) {flex-grow: 1;
}
.content:last-of-type {flex-grow: 2;
}

结果，如第一个子项的宽度 = 60 + ( 1 / (1 + 1 + 2) ) * 120 = 90px

【注】flex-basis扩展——当子项中有不换行的文本且文本长度超出盒子的flex-basis值

1.flex-basis与width配合使用（文本内容可以撑开子项的宽度）

（1）当只有flex-basis或者flex-basis值大于width时，，其属性值决定了子项的最小宽度

（2）当flex-basis的值小于width时，flex-basis的值为子项的最小宽度，width的值决定了子项的最大宽度

2.flex-basis与flex-shrink配合使用

拥有超出flex-basis的子项不参与压缩计算，即将其flex-shrink值转为0；

5.flex-shrink

当主轴方向上子项的宽度和大于盒子宽度时，使用公式5-1去压缩子项，其中i表示子项的总数，L表示第k个子项的内容区的宽度，n表示第k个子项的flex-shrink属性值（下面简称占几份），c表示超出盒子的像素值，x表示第k个元素压缩的像素值

【例】

.wrapper {margin: 20px;width: 300px;height: 100px;border: 1px solid #424242;display: flex;
}
.wrapper .content {text-align: center;width: 200px;height: 50px;line-height: 50px;color: #fff;box-sizing: border-box;flex-shrink: 1;
}
.content:first-of-type {background-color: #f88;flex-shrink: 2;
}
.content:nth-of-type(2) {background-color: #f8f;width: 400px;flex-shrink: 2;
}
.content:last-of-type {background-color: #88f;width: 600px;flex-shrink: 3;
}

结果