[知其因此然]探究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项目尺寸大小之和小于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属性是如何计算。最后借用一张清晰的图来作个总结吧。

关于咱们

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

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