[知其所以然]探究Flex盒子的‘’弹性‘’

我们使用Flexbox 实现垂直水平居中、自适应容器宽度乐此不疲，因为确确实实很方便。可以简便、完整、响应式地实现各种页面布局，目前已得到所有现代浏览器的支持。但Flex属性如何计算呢？

定义

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

基本概念

采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，称为Flex项目(Flex item)，简称“项目”。

属性

正题: 项目属性 flex 是如何计算 ？

flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

相关概念

• 剩余空间: 当所有Flex项目尺寸大小之和小于Flex容器时，Flex容器就会有多余的空间没有被填充，那么这个空间就被称为Flex容器的剩余空间（Positive Free Space）

  

• 不足空间: 当所有Flex项目尺寸大小之和大于Flex容器时，Flex容器就没有足够的空间容纳所有Flex项目，那么多出来的这个空间就被称为负空间（Negative Free Space）

  

首先我们先看一下 flex-basis 可以设置的值有哪些

/* Specify <'width'> */
flex-basis: 10em;     
flex-basis: 3px;
flex-basis: auto;

/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item’s content */
flex-basis: content;

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

The flex-basis property is specified as either the keyword content or a <'width'>. 好多新的属性值，和width的 属性值 类似。

我们再次了解一下max/min-content、fit-content 及 fill-available 等width值

描述

• max-content: 假设我们的容器有足够的宽度，足够的空间，此时，所占据的宽度是就是 max-content 所表示的尺寸。
• min-content: 采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。
• fit-content: 缩小以适应
• fill-available: 自动填满剩余的空间

效果—1 max-content

效果—2 min-content

效果—3 fit-content

效果—4 fill-available

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项目分配相应的空间
• 如果Flex项目显式的设置了min-width或max-width值时，当flex-basis计算出来的值小于min-width则按min-width值设置Flex项目宽度，反之，计算出来的值大于max-width值时，则按max-width的值设置Flex项目宽度

flex-grow

当Flex容器有一定的剩余空间时，flex-grow可以让Flex项目分配Flex容器剩余的空间，每个Flex项目将根据flex-grow因子扩展，从而让Flex项目布满整个Flex容器（有效利用Flex容器的剩余空间）。当所有的Flex项目具有一个相同的flex-grow值时，那么Flex项目将会平均分配Flex容器剩余的空间。

flex-shrink

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

示例：

假设：一个 宽度 837px 的 Flex 容器 下有2 个 Flex项目，如图：

如何 grow ？

// Flex 项目1
  height: 100px;
  background-color: red;
  flex-grow: 5;
  flex-shrink: 5;
  flex-basis: 200px;
复制代码

// Flex 项目2
  height: 100px;
  background-color: blue;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 200px;
复制代码

grow 计算:

容器 宽度 837px - flex-basis[1] - flex-basis[2] > 0 即 有剩余空间
剩余空间 = 容器 宽度 837px - flex-basis[1] - flex-basis[2]  = 837px - 200px -200px = 437px
flex-grow 发挥作用如下：
flex-grow [1] * x + flex-grow[2] * x = 437px 
5x  +  1x = 437 
x= 72.83px 
所以 
Flex 项目1 的总宽度  =  flex-basis[1]  + flex-grow[1] * x  = 200px + 72.83px * 5  =  564.17px
Flex 项目2 的总宽度  =  flex-basis[2]  + flex-grow[2] * x  = 200px +  72.83px * 1 =  272.83px 
复制代码

如何 shrink ？

// Flex 项目1
  height: 100px;
  background-color: red;
  flex-grow: 5;
  flex-shrink: 5;
  flex-basis: 800px;
复制代码

// Flex 项目2
  height: 100px;
  background-color: blue;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 800px;
复制代码

shrink 计算:

容器 宽度 837px - flex-basis[1] - flex-basis[2] < 0 即 有不足空间
不足空间 = 容器 宽度 837px - flex-basis[1] - flex-basis[2]  = 837px - 800px -800px = -763px
flex-shrink 发挥作用如下：
flex-shrink [1] * x + flex-shrink[2] * x = 763px 
5x  +  1x = 763px 
x = 127.17px
所以
Flex 项目1 的总宽度  =  flex-basis[1]  - flex-shrink[1] * x  = 800px - 127.17px * 5  =  164.17px
Flex 项目2 的总宽度  =  flex-basis[2]  + flex-shrink[2] * x  = 800px -  127.17px * 1 =  672.83px 
复制代码

flex grow & shrink 演算法

总结

希望本篇文章能帮助大家进一步了解Flex属性是如何计算。最后借用一张清晰的图来做个总结吧。