【教将来男友学前端】flexbox 收缩算法（下）

老阿姨手抖，不当心删掉了文章，再发一次。

前几天对 flex 的深刻学习，笔者写了一篇flex的收缩算法文章，文章刚出，就被朋友甩来一道flex题，咋地！要考察我？小题一道我还能不会，哈哈哈！不过我相信确定有人不会这道题，尤为复杂的flex计算状况，指定懵。因而这篇文章就诞生了，教你计算flex item的大小。不对，是教将来男盆友哒☺️

找事呢？

就是这道题，先不要看答案，尝试花3分钟分析，给出答案，而后再对照下边的答案。

题目在线：查看在线代码

正确答案: 左25px, →175px，你作对了吗？

简要分析:

• 左：扩张因子1，收缩因子1；
• 右：扩张因子1，收缩因子为0，不收缩，自由宽度150px；

右不能收缩可扩张，可扩张权值：200 - 150 = 50px， 50 / 扩张因子之和 2 = 25px，左右各扩张25px。

考察点:

• 对 flex 属性的了解程度
• 对 flex item 的计算规则

原本不想讲基础的，但是不说基础，恐怕没办法对这道题进行细致分析，有些小盆友就算看了我上面的简要分析，仍是不知因此然。要不咱们就来点MDN文档吧。

你应该知道的 flex 属性

题中的flex:

.left {
	flex: 1;
	// …
}
.right {
	flex: 1 0 150px;
	// …
}
复制代码

flex 单属性，和三个属性，你都清楚是什么吗，都表明什么意思吗？不知道还怎么作我蓝盆友。

咦惹的表情图

flex的基础介绍，来自MDN：

/* 基础属性 */
flex: auto;
flex: initial;
flex: none;
flex: 2;

/* 一个值, 无单位正数：flex-grow */
flex: 2;

/* 一个值, 宽度/高度: flex-basis */
flex: 10em;
flex: 30px;

/* 两个值: flex-grow | flex-basis */
flex: 1 30px;

/* 两个值: flex-grow | flex-shrink */
flex: 2 2;

/* 三个值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial;
flex: unset;
复制代码

flex 属性能够指定1个，2个或3个值。

基础语法:

• auto 元素会根据自身的宽度与高度来肯定尺寸，可是会伸长并吸取 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这至关于将属性设置为 "flex: 1 1 auto"。
• initial 元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸取 flex 容器中的额外自由空间来适应 flex 容器 。至关于将属性设置为"flex: 0 1 auto"。
• none 元素会根据自身宽高来设置尺寸。它是彻底非弹性的：既不会缩短，也不会伸长来适应 flex 容器。至关于将属性设置为"flex: 0 0 auto"。

单值语法: 值必须为如下其中之一:

• 一个无单位数: 它会被看成 flex-grow 的值。
• 一个有效的宽度值: 它会被看成 flex-basis 的值。

双值语法: 第一个值必须为一个无单位数，而且它会被看成 flex-grow 的值。第二个值必须为如下之一：

• 一个无单位数：它会被看成 flex-shrink 的值。
• 一个有效的宽度值: 它会被看成 flex-basis 的值。

三值语法:

• 第一个值必须为一个无单位数，而且它会被看成 flex-grow 的值。
• 第二个值必须为一个无单位数，而且它会被看成 flex-shrink 的值。
• 第三个值必须为一个有效的宽度值， 而且它会被看成 flex-basis 的值。

再来看题中的 flex:

.left {
	flex: 1; 
	// …
}
.right {
	flex: 1 0 150px; 
	// …
}
复制代码

• flex: 1; 它会被当作 flex-grow: 1;
• flex: 1 0 150px; 它会被当作 flex-grow:1; flow-shrink: 0; flex-basis: 150px;

这里明白了，之后无论几个值的flex，你都能一眼看清楚。

复杂的 flex item 到底怎么计算

针对 flex 的子元素的宽度到底怎么计算，其实跟 在主轴方向上控制flex子元素的尺寸和伸缩性有关。理解flex子元素如何工做的关键是理解有多少东西参与影响flex子元素

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

flex item 的基本大小

1. flex-basis设置为auto吗，这个flex子元素设置了宽度吗？若是设置了, flex子元素的大小将会基于设置的宽度.
2. flex-basis 设为 auto 仍是content (在支持的浏览器中)? 若是是auto, flex子元素的大小为原始大小.
3. flex-basis是不为0的长度单位吗？若是是这样那这就是flex子元素的大小.
4. flex-basis 设为 0呢? 若是是这样，则flex子元素的大小不在空间分配计算的考虑以内.

有可用空间吗

1. 把全部的flex子元素的宽度相加，总和是否小于flex容器的总宽度？若是是这样，那么你有多余空间，flex-grow会发挥做用.
2. 把全部的flex子元素的宽度相加，总和是否大于flex容器的总宽度？若是是这样，那么你有溢出空间，flex-shrink会发挥做用.

具体若是发挥做用，请参考笔者的上一篇文章flex收缩算法（一）

空余空间和溢出空间的其余处理方式?

• 空间增长到子元素中
• 空间添加到子元素之间或周围 （对准属性justify-content）

有个例外：flex: 1 1 0

一个容器，多个子元素，子元素没有设定宽度的状况下，flex: 1 1 0; flex子元素的天然大小计算值是0，意味着全部空间都用来争夺，而且全部flex子元素具备相同的flex-grow值，它们flex子元素每一个都得到相等的空间分配。 最终结果是三个宽度相等的可伸缩 flex子元素。

再来看这道题

请问left和right的宽度分别是多少？

<document> 
    <style type="text/css"> .container{ width: 200px; height: 200px; display: flex; flex-direction: row; align-items: stretch; } .left{ flex: 1; border: 1px solid #ccc; } .right{ flex: 1 0 150px; border: 1px solid #ccc; } </style> 
    <div class="container"> 
        <div class="left"></div> 
        <div class="right"></div>
    </div>
</document>
复制代码

第一步：分析容器和元素

一个宽度200px的容器，内部两个子元素，容器设置了 align-items: stretch; 使两个子元素的高度撑满容器高度，这个属性暂时跟宽度不要紧，先无论它。

• 左元素：flex: 1，它会被当作 flex-grow: 1; flex-shrink: 1; flex-basis: auto; 扩张因子1，收缩因子1；
• 右元素：flex: 1 0 150px;，它会被当作 flex-grow: 1; flex-shrink: 0; flex-basis: 150px;：扩张因子1，收缩因子为0，不收缩，自由宽度150px；

第二步：分析子元素的收缩性

• 左元素能够伸缩和扩张，没有自由宽度
• 右元素不能收缩可扩张，自由宽度 150px

第三步：计算可扩张权益值和扩张因子和

扩张权益值：200 - 150 = 50px 扩张因子和：1 + 1 = 2

第四步：计算左右两个子元素的实际宽度

• 左元素 0 + 50px / 2 * 1 = 25px
• 右元素 150px + 50 / 2 * 1 = 175px

左、右元素各扩张25px，总宽度仍是200px。算完啦，蓝盆友，你学会了吗？

如上内容均为本身总结，不免会有错误或者认识误差，若有问题，但愿你们留言指正，以避免误人，如有什么问题请留言，会尽力回答！