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

背景

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

定义

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

基本概念

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

容器默认存在两根轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。（所以Flex 布局默认direction 为 row）

main start/main end：主轴开始位置/结束位置；

cross start/cross end：交叉轴开始位置/结束位置；

main size/cross size：单个项目占据主轴/交叉轴的空间；

属性

容器上的6个属性	项目的6个属性
flex-direction	order
flex-wrap	flex-grow
flex-flow	flex-shrink
justify-content	flex-basis
align-items	flex
align-content	align-self

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

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

首先我们先看一下 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属性是如何计算。最后借用一张清晰的图来做个总结吧。

关于我们

快狗打车前端团队专注前端技术分享，定期推送高质量文章，欢迎关注点赞。

参考链接：
[1]: www.w3cplus.com/css/flex-it…
[2]: ithelp.ithome.com.tw/articles/10…