Flex布局方案非常适合应用和多列等高布局场景。本文将深入分析flex-grow、flex-shrink和flex-basis三个属性，以充分理解这些属性与增长和收缩的关系使用flex子元素是掌握flex布局的关键。flex语法flex-grow、flex-shrink和flex-basis的三个属性都作用于flex子元素，主要控制一个flex子元素的以下几个方面：flex-grow：剩余空间有多少这个flex子元素得到了什么？flex-shrink：这个flex子元素应该收缩多少空间？flex-basis:flex子元素伸缩前的原始大小是多少？flex-basisQ1：浏览器如何确定flex子元素的空间大小？使用flex-basis属性来确定flex子元素的空间大小。取值如下（以主轴水平方向为例）：flex-basis:|内容;其中<宽度>=自动|<长度>|<百分比>|最小含量|最大内容|适合内容|fit-content()flex-basis值为auto：如果设置了width，则flex子元素的原始大小为width；否则，flex子元素的原始大小为max-content。/*设置`width`为100px，flex子元素的原始大小为100px*/.test>div:nth-child(1){background-color:red;弹性基础：自动；宽度：100px；}/*如果不设置width，则flex子元素的原始大小为max-content*/.test>div:nth-child(1){background-color:red;弹性基础：自动；}flex-basis值为|<百分比>(XXpx,XX%)，将使用<长度>|作为flex子元素的原始大小。/*设置flex-basis为100px，flex子元素的原始大小为100px*/.test>div:nth-child(1){background-color:red;弹性基础：100px；}/*设置flex-基础为100px，宽度设置为200px。flex子元素原来的大小还是100px*/.test>div:nth-child(1){background-color:red;弹性基础：100px；宽度：200px；}一个元素同时设置了flex-basis（auto除外）和width，flex-basis的优先级更高。如果flex-basis值为0，则flex子元素的原始大小为min-content。Q2：关键字min-content和max-content是什么意思？从字面上看，它指的是最小内容空间和最大内容空间：min-content：所有文本自动换行。test>div:nth-child(1){背景颜色：红色；弹性基础：自动；宽度：最小内容；}2.max-content：没有自动换行。如果flex容器太窄，它会溢出容器。test>div:nth-child(1){background-color:red;弹性基础：自动；宽度：最大内容；}flex-growQ1：哪一部分空间是flex-grow的剩余空间？Flex布局中有flex容器和flex子元素。flex子元素包含在flex容器中。那么当flex子元素在主轴上的原始大小之和小于flex容器时，flex容器中就会有多余的空间没有被填满，这些空间称为剩余空间。Q2：如何分配未分配的剩余空间？如果你想使用所有的空间，你应该如何考虑分配剩余的空间？剩余空间的分配应该是高度灵活的。毕竟，不可能每个设计师都有相同的空间分配策略。flex-grow可以决定剩余空间的分配方式。由于每个flex子元素都可以有不同的flex-grow值，因此flex-grow值可以作为空间分配权重来决定子元素获得多少剩余空间。例如如果flex容器为800px，flex子元素有3个div1、div2、div3，分别为100px、200px、300px，则剩余空间为200px（800-100-200-300）。假设三个flex的flex-grow值为1,1,2。剩余空间分配如下：$$div1(剩余空间)=200px*(1/(1+1+2))=50px$$$$div2(剩余空间)=200px*(1/(1+1+2))=50px$$$$div3(剩余空间)=200px*(2/(1+1+2))=100px$$上面的思路应该很容易理解，无非就是确定剩余的权重通过flex-grow分配空间。因此，flex子元素的总空间为：$$div1(总空间)=100px+50px=150px$$$$div2(总空间)=200px+50px=250px$$$$div3(总空间)=300px+100px=400px$$继续想，如果我不想分配所有剩余空间，而是想分配剩余空间的40%（80px）怎么办？是否可以在不添加额外参数的情况下指定总剩余空间分配？其实还是由flex-grow决定的。如果每个子元素的flex-grow之和小于1，说明剩余空间没有分配满。每个子元素的flex-grow之和就是分配的剩余空间的百分比。例如如果flex容器为800px，flex子元素有3个div1、div2、div3，分别为100px、200px、300px，则剩余空间为200px（800-100-200-300）。假设三个flex的flex-grow值分别为0.1、0.1、0.2。剩余空间分配如下：$$div1(剩余空间)=200px*(0.1+0.1+0.2)*(1/(1+1+2))=20px$$$$div2(剩余空间)=200px*(0.1+0.1+0.2)*(1/(1+1+2))=20px$$$$div3(剩余空间)=200px*(0.1+0.1+0.2)*(2/(1+1+2))=40px$$$$div1(总空间)=100px+20px=120px$$$$div2(总空间)=200px+20px=220px$$$$div3(总空间)=300px+40px=340px$$$$分配后剩余空间=200px*(1-0.1-0.1-0.2)=200px*0.6=120px$$继续思考，一个很常见的布局是每个flex子元素平分flex容器的空间,那么是不是意味着需要准确计算出每个flex子元素需要获取多少剩余空间呢？如果所有的剩余空间都不足以平分flex子元素的空间怎么办？答案显然是否定的，你只需要完成以下两步：将所有flex子元素的flex-basis值设置为0，告诉浏览器flex子元素的原始大小被视为0，即即，所有空间都是剩余空间；设置所有flex子元素的flex-grow值为1（相同即可），告诉浏览器flex子元素平分剩余空间。flex-shrinkflex-shrink属性指定了flex收缩值，即flex子元素相对于其他flex子元素收缩的程度。Q1：flex子元素什么时候收缩？ 很明显，当flex子元素的原始大小之和小于flex容器时，就会发生收缩。因为如果元素不收缩，肯定会造成溢出。Q2：flex子元素的最小收缩空间是多少？可以减少到0px吗？假设flex子元素空间收缩为0，则无法显示flex子元素信息。因此，当浏览器将最小搜索值宽度设置为min-content时，flex子元素会利用一切机会换行以减少元素宽度。Q3：flex子元素如何确定收缩空间？$$总收缩空间=flex子元素原始大小之和-flex容器大小$$ 想一想，如果你是设计师，你是如何安排每个flex子元素的收缩空间的？例如：如果flex容器为300px，flex子元素有三个div1、div2、div3，分别为100px、200px、300px，则假设三个flex的flex-shrink值是1、1和1。显然，总收缩空间为：$$总收缩空间 = (100px+200px+300px)-300px=300px$$由于flex-shrink值为1,1,1，是不是类似于flex-growpress比例是1:1:1分配总收缩空间，即div1,div2,div3都收缩100px空间？这种分配策略直接导致div1缩小到0px，而div3还是200px。浏览器并没有采用这种粗略的分配方案，而是采用了一种更公平的分配方案，即空间多的flex子元素应该收缩得更多，以保证空间小的flex子元素不会太小。因此，分配方案以flex子元素原始大小乘以flex-shrink值作为权重：$$flex子元素应收缩空间=总收缩空间×（flex子元素原始大小*收缩值)/\sum(flex子元素原始大小*收缩值)$$所以例子中的收缩空间分配为：$$总收缩空间 = (100px+200px+300px)-300px=300px$$$$\sum(flexsubElement原始大小*收缩值)= 1*100+1*200+1*300=600$$$$div1(应该收缩空间)=300px*(1*100)*(600)=50px$$$$div2(应该缩小空间)=200px*(1*200)*(600)=100px$$$$div3(应该缩小空间)=200px*(1*300)*(600)=200px$$Q4：如果不想完全分配收缩空间，如何设置flex-shrink值？收缩空间分配不完全会导致溢出行为，类似于flex-grow，如果每个子元素的flex-shrink之和小于1，则表示收缩空间分配不完全，并且每个子元素的flex-shrink之和子元素是分配收缩空间的百分比。这里我就不细说了。Q5：在收缩空间的过程中，flex子元素达到min-content时，flex空间分配会受到怎样的影响？继续思考，原来flex子元素的大小是100px，min-content是20px，但是flex子元素的收缩空间是100px，那么flex子元素只会收缩到20px。这个元素未收缩的20px是否会影响容器中其他flex元素的空间？例如：如果flex容器为300px，flex子元素有三个div1、div2、div3，分别为100px、200px、300px，假设三个flex的flex-shrink值为1，1,1，最小内容为60px。根据Q3收缩空间分配的计算结果，在不考虑min-content的情况下，div1、div2、div3分别收缩50px、100px、200px。但是由于min-content的影响，div1不能收缩到50px，只能收缩到60px，剩下的未收缩的10px会加到div2和div3的总收缩空间中，然后计算div2和div3根据Q3的收缩空间分配原则最后得到div2、div3收缩分配的结果。
