Flex布局的三个属性要深刻理解！

• flex-grow：grow的中文意思是扩大，用来分配父元素剩余空间的相对比例。默认值为0。我们先看一个例子：

/* 父元素 */
.flex-box{display: flex;width: 300px;height: 300px;margin:0 auto;background-color: #000;
}

/* 子元素left */
.left{flex-grow: 1;width: 100px;background-color: orange;
}
/* 子元素right */
.right{flex-grow: 0;width:100px;background-color: cyan;
} 

上面我们可以看出子元素left和right的宽度之和为200px，而父元素宽度为300px，也就是说父元素还有空余空间，而真正的效果如图所示。

/* 子元素left */
.left{...flex-grow: 3;...
}
/* 子元素right */
.right{...flex-grow: 1;...
} 

这样处理的话也就是剩余空间按照left:right为3:1处理，多出来的空间：300px-(100px+100px)=100px；left的宽度：100px+100px*(100px*3/(100*3+100*1)) = 175px;right的宽度：100px+100px*(100px*1/(100*3+100*1)) = 125px；这就解析了当所有子元素宽度之和小于父元素宽度之和时，子元素如何处理？这个问题了。

注意地，如果所有子元素的flex-grow的值是一样的话，那么剩余空间就按照平均分配。

2 flex-shrink

• flex-shrink：shrink的中文意思是收缩，用来指定flex元素的收缩规则。默认值为1。我们先看一个例子：

/* 父元素 */
.flex-box{display: flex;width: 300px;height: 300px;...
}
/* 子元素left */
.left{flex-shrink: 3;width: 200px;background-color: orange;
}
/* 子元素right */
.right{flex-shrink: 1;width:200px;background-color: cyan;
} 

3 flex-basis

• flex-basis：basis的中文意思是基准，用来指定子元素内容盒尺寸大小。默认值为auto。我们先看一下下面这个例子：

 .flex-box{display: flex;width: 300px;height: 300px;margin:0 auto;background-color: #000;}.left{width: 200px;flex-basis: 100px;background-color: orange;}.right{width:100px;background-color: cyan;} 

• flex-grow：值大于0，主要是解决父元素宽度大于所有子元素宽度之和时，子元素合理分配父元素剩余空间。值为0时，子元素盒子空间不做扩大处理。
• flex-shrink：值大于0，主要是解决父元素宽度小于所有子元素宽度之和时，子元素缩小宽度以适应父元素宽度，值为0时，子元素盒子空间不做缩小处理。
• flex-basis：其实也可以理解为在flex布局下，一个高优先级的宽度。

4 结合flex属性使用

除了上面各自分开使用这三个属性，还可以盒子一起使用也就是：

flex:flex-grow flex-shrink flex-basis;
/*记忆法：g（拱）s（？）b（？）后面两个字懂了吧^_^*/ 

flex属性可以灵活处理这三个属性，可以单值、双值处理，这样的话，flex属性分别代表什么？

• 当flex为单值时，可代表一个无单位数（默认为flex:number 1 0;）、一个有效宽度值（flex:100px，即是flex-basis）、或者特殊值（none、auto、initial）

none：元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为flex: 0 0 auto。

auto：会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 flex: 1 1 auto。

initial：它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。

• 当flex为双值时，第一个数必须为无单位数（代表flex-grow）、第二个数为一个无单位数（flex-shrink）或一个有效宽度（flex-basis）

5 一道笔试题

• 以下布局在页面上的宽度比是？

/*父元素*/
.flex{display: flex;width: 200px;height: 100px;margin:0 auto;background-color: #000;
}

/*子元素*/
.left{flex:3 2 50px;background-color: orange;
}

/*子元素*/
.right{flex:2 1 200px;background-color: cyan;
} 

从上面我们可以看到子元素的flex值太复杂，其实我们可以先不看前面两值，先看最后一值（flex-basis）。如果所有子元素的flex-basis之和小于父元素之和考虑第一个值，如果所有子元素的flex-basis之和大于父元素之和考虑第二个值。上面所有子元素宽度50px+200px=250px大于父元素宽度200px，所以考虑第二个值也就是子元素left和子元素right的flex-shrink属性比2:1，超出部分50px这样处理left的宽度缩小为：50px-50px*(50px*2/(50px*2+200px*1)) = 33.34;right的宽度为：200px-50px*(200px*2/(50px*2+200px*1)) = 166.66。 所以上面题目答案为33.34:166.66 = 1:5

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取