保姆级 Flex Box 布局详解(中)—项目属性

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

最近时间比较宽裕，像坐下来好好写点东西。原因为只要时间充裕就能够写出好东西，其实哪有那么简单。有的时候我们在旁边看，觉得我去我也行，其实往往比你优秀那么一点，就要付出很多。

align-self

我们之前了解如何使用 align-items 对所有元素，沿侧轴(cross axis)上设置元素分布。那么如何对单独某一个的项目设置沿轴向的分布样式呢，就可以用 align-self 来实现。

.container{
    /* width: 600px; */
    height: 480px;
    background-color: antiquewhite;
    border: 3px solid darkgray;
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    /* justify-content: center; */
    align-items:flex-start;
    justify-content: space-between;
    /* align-content: flex-end; */
}
.box{
    /* height: 100px; */
    width: 100px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 1.75em;
}

.box:nth-child(1),.box:nth-child(4){
    background-color:cadetblue;
    align-self: center;
    /* font-size: 1.25em; */
}

为一些项目在侧轴分布方式自定义分布方式，这里为其中两个项目单独设置了 align-self:center 居中，align-self 将覆盖在容器设置的align-items

.box:nth-child(1),.box:nth-child(4){
    background-color:cadetblue;
    align-self: stretch;
    /* font-size: 1.25em; */
}

我们将其属性值修改为 stretch ，大家可以自己尝试其他属性值，也可以配合别的属性组合看看效果

flex

到现在为止，我们对于每一个项目(item)的尺寸都是保持一致的。flex 可以定义了 flex 项目(item)如何增长或收缩以适应容器中的可用空间。

• flex-grow
• flex-shrink
• flex-basis

flex-basis

有点像宽度，但不是，指定了 flex 元素在主轴方向上的初始大小。

{
    align-items:center;
    justify-content: space-between;
}

.box{
    line-height: 50px;
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 1.75em;

}

.box{
    /* height: 100px; */
    /* width: 100px; */
    line-height: 50px;
    flex-basis: 120px;
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 1.75em;
}

可以设置 flex-basis 宽度为 120px。

.container{
    /* width: 600px; */
    height: 480px;
    background-color: antiquewhite;
    border: 3px solid darkgray;
    display: flex;
    flex-direction: row;
    /* flex-wrap:wrap; */
    /* justify-content: center; */
    align-items:center;
    justify-content: space-between;
    /* align-content: flex-end; */
}
.box{
    /* height: 100px; */
    /* width: 100px; */
    line-height: 50px;
    flex-basis: 50%;
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 1.75em;
}

在开始介绍 flex-basis 前我们来做一些准备工作。当我们将 flex 显示设置为 nowrap 也会显示一行，这时具体宽度。

• flex-basis 控制是然主轴方向项目(item)的宽度，这一点不同于 width
• 在同时设置了 width 和 flex-basis ，flex-basis 将胜出。

.container{
    /* width: 600px; */
    height: 480px;
    background-color: antiquewhite;
    border: 3px solid darkgray;
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    /* justify-content: center; */
    align-items:stretch;
    justify-content: space-between;
    /* align-content: flex-end; */
}
.box{
    /* height: 100px; */
    /* width: 100px; */
    /* line-height: 50px; */

    flex-basis: 50%;
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 1.75em;
}

.box:nth-of-type(3n){
    flex-basis: 100%;
}

flex-grow

定义了未使用的空间应如何分布在 flex 项目中。

flex-grow: 1;

.box{

    flex-basis: 10px;
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 1.75em;
}

我们将 flex-basis 设置为 10px 这样一来很多剩余空间，如果我们将 box-1 也就是最左侧的 item 设置 flex-grow:1;

.box:nth-child(1),.box:nth-child(4){
    background-color:cadetblue;
    flex-grow: 1;
    /* align-self: stretch; */
    /* font-size: 1.25em; */
}

如果我们把每一个 box 都设置了 flex-grow:1 这样三个 item 都会平分 1 份剩余的空间。

.box{

    flex-basis: 10px;
    flex-grow: 1;
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 1.75em;
}

如果在上面基础上我们把第一个 item flex-grow 更改 2

.box:nth-child(1),.box:nth-child(4){
    background-color:cadetblue;
    flex-grow: 2;
}

• 剩余空间：x
• 假设有三个flex item元素，flex-grow 的值分别为a, b, c
• 每个元素可以分配的剩余空间为： a/(a+b+c) * x，b/(a+b+c) * x，c/(a+b+c) * x

假设剩余 200px 空间，然后 a 会在原来 10 像素上增加 100 为 110 而其他两个为 60。

考虑是否可以把 flex-grow 设置的值小于 1，而且 flex-grow 的和也小于 1 呢？只要把上面公式的分母（flex-grow 的和）设置为 1 就好啦！

flex-shrink

剩余空间的概念就转化成了溢出空间

• 3个 item 的 width: w1, w2, w3
• 3个 item的 flex-shrink：a, b, c
• 计算总压缩权重： sum = a * w1 + b * w2 + c * w3
• 计算每个元素压缩率： S1 = a * w1 / sum，S2 =b * w2 / sum，S3 =c * w3 / sum
• 计算每个元素宽度：width - 压缩率 * 溢出空间

.box{
    /* height: 100px; */
    /* width: 100px; */
    /* line-height: 50px; */

    flex-basis: 300px;
    /* flex-grow: 1; */
    flex-shrink: 1;
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 1.75em;
}

.box:nth-child(1),.box:nth-child(4){
    background-color:cadetblue;
    flex-shrink: 2;
}