[知其因此然]探究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…