聊聊Flexbox布局中的flex的演算法

到目前为止，Flexbox布局应该是目前最流行的布局方式之一了。而Flexbox布局的最大特性就是让Flex项目可伸缩，也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Flex项目适配Flex容器不足的宽度。而这一切都是依赖于Flexbox属性中的flex属性来完成。一个Flex容器会等比的按照各Flex项目的扩展比率分配Flex容器剩余空间，也会按照收缩比率来缩小各Flex项目，以免Flex项目溢出Flex容器。但其中Flex项目又是如何计算呢？他和扩展比率或收缩比率之间又存在什么关系呢？在这篇文章中我们将一起来探来。

在Flexbox布局中，容器中显示式使用display设置为flex或inline-flex，那么该容器就是Flex容器，而该容器的所有子元素就是Flex项目。

简介

在这篇文章中，我们将要聊的是有关于flex属性的事情，特别是如何使用该属性来计算Flex项目？在开始之前，先来简单的了解一下flex属性。

在Flexbox中，flex属性是flex-grow（扩展比率）、flex-shrink（收缩比率）和flex-basis（伸缩基准）三个属性的简称。这三个属性可以控制一个Flex项目（也有人称为Flex元素），主要表现在以下几个方面：

flex-grow：Flex项目的扩展比率，让Flex项目得到（伸张）多少Flex容器多余的空间（Positive free space）
flex-shrink：Flex项目收缩比率，让Flex项目减去Flex容器不足的空间（Negative free space）
flex-basis：Flex项目未扩展或收缩之前，它的大小是多少

在Flexbox布局中，只有充分理解了这三个属性才能彻底的掌握Flex项目是如何扩展和收缩的，也才能更彻底的掌握Flexbox布局。因此掌握这三个属性，以及他们之间的计算关系才是掌握Flexbox布局的关键所在。

Flex项目的计算

在Flexbox布局当中，其中 flex-grow、flex-shrink和flex-basis都将会影响Flex项目的计算。接下来我们通过一些简单的示例来阐述这方面的知识。

flex-basis

flex-basis属性在任何空间分配发生之前初始化Flex项目的尺寸。其默认值为auto。如果flex-basis的值设置为auto，浏览器将先检查Flex项目的主尺寸是否设置了绝对值再计算出Flex项目的初始值。比如说，你给Flex项目设置的width为200px，那么200px就是Flex项目的flex-basis值。

如果你的Flex项目可以自动调整大小，则auto会解析为其内容的大小，这个时候，min-content和max-content变会起作用。此时将会把Flex项目的max-content作为 flex-basise的值。比如，下面这样的一个简单示例：

flex-grow和flex-shrink的值都为0，第一个Flex项目的width为150px，相当于flex-basis的值为150px，而另外两个Flex项目在没有设置宽度的情况之下，其宽度由内容的宽度来设置。

如果flex-basis的值设置为关键词content，会导致Flex项目根据其内容大小来设置Flex项目，叧怕是Flex项目显式的设置了width的值。到目前为止，content还未得到浏览器很好的支持。

flex-basis除了可以设置auto、content、fill、max-content、min-content和fit-content关键词之外，还可以设置<length>值。如果<length>值是一个百分比值，那么Flex项目的大小将会根据Flex容器的width进行计算。比如下面这个示例：

Flex容器显式设置了width（和box-sizing取值有关系，上图为border-box的示例结果），那么flex-basis会根据Flex容器的width计算出来，如果Flex容器未显示设置width值，则计算出来的结果将是未定义的（会自动根据Flex容器的宽度进行计算）。

在Flexbox布局中，如果你想完全忽略Flex项目的尺寸，则可以将flex-basis设置为0。这样的设置，基本上是告诉了浏览器，Flex容器所有空间都可以按照相关的比例进行分配。

来看一个简单的示例，Flex项目未显式设置width情况之下，flex-basis不同取值的渲染效果。

到写这篇文章为止，使用Firefox浏览器查看效果更佳。

当Flex项目显式的设置了min-width或max-width的值时，就算Flex项目显式的设置了flex-basis的值，也会按min-width和max-width设置Flex项目宽度。当计算的值大于max-width时，则按max-width设置Flex项目宽度；当计算的值小于min-width时，则按min-width设置Flex项目宽度：

有关于flex-basis属性相关的运用简单的小结一下：

flex-basis默认值为auto
如果Flex项目显式的设置了width值，同时flex-basis为auto时，则Flex项目的宽度为按width来计算，如果未显式设置width，则按Flex项目的内容宽度来计算
如果Flex项目显式的设置了width值，同时显式设置了flex-basis的具体值，则Flex项目会忽略width值，会按flex-basis来计算Flex项目
当Flex容器剩余空间不足时，Flex项目的实际宽度并不会按flex-basis来计算，会根据flex-grow和flex-shrink设置的值给Flex项目分配相应的空间
对于Flexbox布局中，不建议显式的设置Flex项目的width值，而是通过flex-basis来控制Flex项目的宽度，这样更具弹性
如果Flex项目显式的设置了min-width或max-width值时，当flex-basis计算出来的值小于min-width则按min-width值设置Flex项目宽度，反之，计算出来的值大于max-width值时，则按max-width的值设置Flex项目宽度

flex-grow

前面提到过，flex-grow是一个扩展因子（扩展比例）。其意思是，当Flex容器有一定的剩余空间时，flex-grow可以让Flex项目分配Flex容器剩余的空间，每个Flex项目将根据flex-grow因子扩展，从而让Flex项目布满整个Flex容器（有效利用Flex容器的剩余空间）。

flex-grow的默认值是0，其接受的值是一个数值，也可以是一个小数值，但不支持负值。一旦flex-grow的值是一个大于0的值时，Flex项目就会占用Flex容器的剩余空间。在使用flex-grow时可以按下面的方式使用：

所有Flex项目设置相同的flex-grow值
每个Flex项目设置不同的flex-grow值

不同的设置得到的效果将会不一样，但flex-grow的值始终总量为1，即Flex项目占有的量之和（分子）和分母相同。我们来具体看看flex-grow对Flex项目的影响。

当所有的Flex项目具有一个相同的flex-grow值时，那么Flex项目将会平均分配Flex容器剩余的空间。在这种情况之下将flex-grow的值设置为1。比如下面这个示例，Flex容器（width: 800px，padding: 10px）中有四个子元素（Flex项目），显式的设置了flex-basis为150px，根据前面介绍的内容，我们可以知道每个Flex项目的宽度是150px，这样一来，所有Flex项目宽度总和为150px * 4 = 600px。容器的剩余空间为780px - 600px = 180px。当显式的给所有Flex项目设置了flex-grow为1（具有相同的值）。这样一来，其告诉浏览器，把Flex容器剩余的宽度（180px）平均分成了四份，即：180px / 4 = 45px。而flex-grow的特性就是按比例把Flex容器剩余空间分配给Flex项目（当然要设置了该值的Flex项目），就该例而言，就是给每个Flex项目添加了45px，也就是说，此时Flex项目的宽度从150px扩展到了195px（150px + 45px = 195px）。如下图所示：

特别声明，如果Flex项目均分Flex容器剩余的空间，只要给Flex项目设置相同的flex-grow值，大于1即可。比如把flex-grow设置为10，就上例而言，把剩余空间分成了40份，每个Flex项目占10份。其最终的效果和设置为1是等效的。

上面我们看到的均分Flex容器剩余空间，事实上我们也可以给不同的Flex项目设置不同的flex-grow值，这样一来就会让每个Flex项目根据自己所占的比例来占用Flex容器剩余的空间。比如上面的示例，把Flex项目的flex-grow分别设置为1:2:3:4。也就是说把Flex容器的剩余空间分成了10份（1 + 2 + 3 + 4 = 10），而每个Flex项目分别占用Flex容器剩余空间的1/10、2/10、3/10和4/10。就上例而言，Flex容器剩余空间是180px，按这样的计算可以得知，每一份的长度是180px / 10 = 18px，如此一来，每个Flex项目的宽度则变成：

Flex1: 150px + 18px * 1 = 168px
Flex2: 150px + 18px * 2 = 186px
Flex3: 150px + 18px * 3 = 204px
Flex4: 150px + 18px * 4 = 222px

最终效果如下图所示：

前面两个示例向大家演示了，Flex项目均分和非均分Flex容器剩余的空间。从示例中可以看出来，flex-grow的值都是大于或等于1的数值。事实上，flex-grow还可以设置小数。比如，给所有Flex项目设置flex-grow的值为0.2。由于Flex项目的flex-grow的值都相等，所以扩展的值也是一样的，唯一不同的是，所有的Flex项目并没有把Flex容器剩余空间全部分完。就我们这个示例而言，四个Flex项目的flex-grow加起来的值是0.8，小于1。换句话说，四个Flex项目只分配了Flex容器剩余空度的80%，按上例的数据来计算，即是180px * .8 = 144px（只分去了144px），而且每个Flex项目分得都是36px（144px / 4 = 36px 或者 144px * 0.2 / 0.8 = 36px）。最终效果如下图所示：

上面的示例中，flex-basis都显式的设置了值。事实上，flex-grow和flex-basis会相互影响的。这也令我们的Flex项目计算变得复杂化了。比如说，flex-basis的值为auto，而且没有给Flex项目显式的设置width。根据前面的内容我们可以得知，此时Flex项目的大小都取决于其内容的max-content大小。此时Flex容器的剩余的空间将由浏览器根据Flex项目的内容宽度来计算。比如接下来的这个示例，四个Flex项目都是由其内容max-content大小决定。同时将flex-grow都设置为1（均匀分配Flex容器剩余空间）。具体的数据由下图所示（Chrome浏览器计算得出的值）：

特别注意，不同浏览器对小数位的计算略有差异，上图是在Chrome浏览器下得出的值。所以最终加起来的值略大于Flex容器的宽度708px。

针对这样的使用场景，如果你想让所有Flex项目具有相同的尺寸，那么可以显式的设置Flex项目的flex-basis值为0（flex: 1 1 0）。从flex-basis一节中可以得知，当flex-basis值为0时，表示所有空间都可以用来分配，而且flex-grow具有相同的值，因此Flex项目可以获取均匀的空间。如此一来Flex项目宽度将会相同。

flex-basis还可以由其他值为设置Flex项目的宽度，这里不再一一演示。感兴趣的同学可以自己根据flex-basis的取值写测试用例。换句话说，如果你理解了前面介绍的flex-basis内容，就能更好的理解flex-grow和flex-basis相结合对Flex项目分配Flex容器剩余空间的计算。也将不会再感到困惑。

flex-shrink

flex-shrink和flex-grow类似，只不过flex-shrink是用来控制Flex项目缩放因子。当所有Flex项目宽度之和大于Flex容器时，将会溢出容器（flex-wrap为nowrap时），flex-shrink就可以根据Flex项目设置的数值比例来分配Flex容器的不足空间，也就是按比例因子缩小自身的宽度，以免溢出Flex容器。

flex-shrink接收一个<number>值，其默认值为1。也就是说，只要容器宽度不足够容纳所有Flex项目时，所有Flex项目默认都会收缩。如果你不想让Flex项目进行收缩时，可以设置其值为0，此时Flex项目始终会保持原始的fit-content宽度。同样的，flex-shrink也不接受一个负值做为属性值。

基于上面的示例，简单的调整一下参数，所有Flex项目都设置了flex: 0 0 300px，可以看到Flex项目溢出了Flex容器：

在这个示例中，由于flex-shrink显式的设置了值为0，Flex项目不会进行收缩。如果你想让Flex项目进行收缩，那么可以把flex-shrink设置为1。

从上图的结果我们可以看出，当所有Flex项目的flex-shrink都设置为相同的值，比如1，将会均分Flex容器不足空间。比如此例，所有Flex项目的宽度总和是1200px（flex-basis: 300px），而Flex容器宽度是780px（width: 800px，padding: 10px，盒模型是border-box），可以算出Flex容器不足空间为420px（1200 - 780 = 420px），因为所有Flex项目的flex-shrink为1，其告诉浏览器，将Flex容器不足空间均分成四份，那么每份则是105px（420 / 4 = 105px），这个时候Flex项目就会自动缩放105px，其宽度就由当初的300px变成了195px（300 - 105 = 195px）。

这个示例演示的是Flex项目设置的值都是相同的值，其最终结果是将会均分Flex容器不足空间。其实flex-shrink也可以像flex-grow一样，为不同的Flex项目设置不同的比例因子。比如1:2:3:4，这个时候Flex项目就不会均分了，而是按自己的比例进行收缩，比例因子越大，收缩的将越多。如下图所示：

就上图而言，所有Flex项目的flex-shrink之和为10（1 + 2 + 3 + 4 = 10），此时把Flex容器不足空间420px分成了十份，每一份42px（420 / 10 = 42px），每个Flex项目按照自己的收缩因子相应的去收缩对应的宽度，此时每个Flex项目的宽度就变成：

Flex1: 300 - 42 * 1 = 258px
Flex2: 300 - 42 * 2 = 216px
Flex3: 300 - 42 * 3 = 174px
Flex4: 300 - 42 * 4 = 132px

按照该原理来计算的话，当某个Flex项目的收缩因子设置较大时，就有可能会出现小于0的现象。基于上例，如果把第四个Flex项目的flex-shrink设置为15。这样一来，四个Flex项目的收缩因子就变成：1:2:3:15。也就是说把Flex容器不足空间分成了21份，每份占据的宽度是20px（420 / 21 = 20px）。那么Flex项目的宽度就会出现0的现象（300 - 15 * 20 = 0）。这个时候会不会出现无空间容纳Flex项目的内容呢？事实上并不会这样：

在Flexbox布局当中，会阻止Flex项目元素宽度缩小至0。此时Flex项目会以min-content的大小进行计算，这个大小是它们利用任何可以利用的自动断行机会后所变成的

如果某个Flex项目按照收缩因子计算得出宽度趋近于0时，Flex项目将会按照该元素的min-content的大小来设置宽度，同时这个宽度将会转嫁到其他的Flex项目，再按相应的收缩因子进行收缩。比如上例，Flex项目四，其flex-shrink为15，但其宽度最终是以min-content来计算（在该例中，Chrome浏览器渲染的宽度大约是22.09px）。而这个22.09px最终按照1:2:3的比例分配给了Flex项目一至三（Flex1,Flex2和Flex3）。对应的Flex项目宽度就变成：

Flex1: 300 - 20 * 1 - 22.09 / 6 * 1 = 276.334px
Flex2: 300 - 20 * 2 - 22.09 / 6 * 2 = 252.636px
Flex3: 300 - 20 * 3 - 22.09 / 6 * 3 = 228.955px
Flex4: min-content，在该例中大约是22.09px

对于该情形，计算相对而言就更为复杂一些了。但浏览器会很聪明的帮你处理这些场景，会倾向于给你合理的结果。只不过大家需要知道这样的一个细节，碰到类似的场景才不会一脸蒙逼（^_^）。

flex-grow可以设置一个小于0的值，同样的，flex-shrink也可以设置一个小于0的值，比如我们给所有的Flex项目设置flex-shrink的值为0.2，你将看到的结果如下：

从结果的示例图中我们可以看出来，当所有Flex项目的收缩因子（flex-shrink）总和小于1时，Flex容器不足空间不会完全分配完，依旧会溢出Flex容器。好比该例，flex-shrink的总和是.8，分配了Flex容器剩余空间420px的80%，即336px（还有84px剩余空间未完全分配完），由于每个Flex项目的收缩因子是相同的，好比前面的示例，都设置了1类似，把分配的空间336px均分为四份，也就是84px，因此每个Flex项目的宽度由当初的300px变成了216px（300 - 84 = 216px）。这个其实和flex-grow类似，只不过flex-shrink只是收缩而以。

Flex项目计算公式

Flex项目伸缩计算是一个较为复杂的过程，但它们之间还是有据可查。@Chris和@Otree对该方面就有深入的研究。他们给Flex项目的计算总结出了一套计算公式，具体公式如下：

@Chris还依据这套公式写了一个JavaScript的案例，来模拟Flex项目计算。

flex常见的值

大部分情形之下，我们都是使用flex属性来设置Flex项目的伸缩的值。其常见值的效果有：

flex: 0 auto和flex:initial，这两个值与flex: 0 1 auto相同，也是初始值。会根据width属性决定Flex项目的尺寸。当Flex容器有剩余空间时，Flex项目无法扩展；当Flex容器有不足空间时，Flex项目收缩到其最小值min-content。
flex: auto与flex: 1 1 auto相同。Flex项目会根据width来决定大小，但是完全可以扩展Flex容器剩余的空间。如果所有Flex项目均为flex: auto、flex:initial或flex: none，则Flex项目尺寸决定后，Flex容器剩余空间会被平均分给是flex:a uto的Flex项目。
flex: none与flex: 0 0 auto相同。Flex项目根据width决定大小，但是完全不可伸缩，其效果和initial类似，这种情况下，即使在Flex容器空间不够而溢出的情况之下，Flex项目也不会收缩。
flex: <positive-number>（正数）与flex: 1 0px相同。该值使Flex项目可伸缩，并将flex-basis值设置为0，导致Flex项目会根据设置的比例因子来计算Flex容器的剩余空间。如果所有Flex项目都使用该模式，则它们的尺寸会正比于指定的伸缩比。

默认状态下，伸缩项目不会收缩至比其最小内容尺寸（最长的英文词或是固定尺寸元素的长度）更小。可以靠设置min-width属性来改变这个默认状态。

如何掌握Flex项目的大小

通过前面的内容介绍，应该可以了解到Flex项目的大小计算是非常的复杂。如果要真正的理解Flex项目是如何工作的话，最为关键的是理解有多少东西参与影响Flex项目。我们可以按下面这样的方式来进行思考。

怎么设置Flex项目的基本大小

在CSS中设置一个元素的基本大小可以通过width来设置，或者通过min-width或max-width来设置元素的最小或最大宽度，在未来我们还可以通过content、min-content、max-content或fit-content等关键词来设置元素的大小。对于Flex项目，我们还可以通过flex-basis设置Flex项目大小。对于如何设置Flex项目的基本大小，我们可以围绕以下几点来进行思考：

flex-basis的值是auto？Flex项目显式的设置了宽度吗？如果设置了，Flex项目的大小将会基于设置的宽度
flex-basis的值是auto还是content？如果是auto，Flex项目的大小为原始大小
flex-basis的值是0的长度单位吗？如果是这样那这就是Flex项目的大小
flex-basis的值是0呢? 如果是这样，则Flex项目的大小不在Flex容器空间分配计算的考虑之内

更为具体的可以参阅flex-basis相关的介绍。

我们有可用空间吗？

如果Flex容器没有剩余空间，Flex项目就不会扩展；如果Flex容器没有不足空间，Flex项目就不会收缩：

所有的Flex项目的宽度总和是否小于Flex容器的总宽度？如果是这样，那么Flex容器有剩余空间，flex-grow会发挥作用，具体如何发挥作用，可以参阅flex-grow相关的介绍
所有的Flex项目的宽度总和是否大于Flex容器的总宽度？如果是这样，那么Flex容器有不足空间，flex-shrink会发挥作用，具体如何发挥作用，可以参阅flex-shrink相关的介绍

分配空间的其他方式

如果我们不想把Flex容器的剩余空间扩展到Flex项目中，我们可以使用Flexbox中其他属性，比如justify-content属性来分配剩余空间。当然也可以给Flex项目设置margin值为处理Flex容器剩余空间。不过这一部分没有在这里阐述，如果感兴趣的话，不仿阅读一下Flexbox相关的介绍。

总结

很久以为，一直以为Flexbox布局中，Flex项目都会根据Flex容器自动计算。而事实上呢？正如文章中介绍的一样，Flex项目的计算是相当的复杂。设置Flex项目大小的值以及flex-basis、flex-grow和flex-shrink的设置都会对其有较大的影响，而且它们的组合场景也是非常的多，并且不同的场景会造成不一样的结果。

当然，文章中所介绍的内容或许没有覆盖到所有的场景，但这些基本的演示或许能帮助大家更好的理解Flex项目是如何计算的。最后希望该文对大家有所帮助，如果你有更深的了解欢迎在下面的评论中与我一起分享。如果文章中有不对之处，还望各路大婶拍正。

原文链接
本文为云栖社区原创内容，未经允许不得转载。