摘要：我希望實(shí)現(xiàn)一個(gè)左中右三列的布局，其中左右部分固定寬度，中間部分自適應(yīng)實(shí)現(xiàn)起來很簡(jiǎn)單，代碼如下到此為止一切都很美好。解決方法是給加上此時(shí)的完整代碼如下寬度為的內(nèi)容完整的在這里實(shí)戰(zhàn)經(jīng)驗(yàn)到此結(jié)束，下面我們?cè)偕钊雽W(xué)習(xí)涉及到的知識(shí)點(diǎn)。

歡迎關(guān)注我的公眾號(hào)睿Talk，獲取我最新的文章：

最近在項(xiàng)目里遇到了一個(gè) Flex 布局的問題，才發(fā)現(xiàn)自己對(duì)它的理解還是停留在淺顯的水平，遇到一些特殊情況就不知道如何處理。于是找了些資料深入學(xué)習(xí)一下，然后將我的學(xué)習(xí)心得總結(jié)成這篇文章。

先講講我遇到的問題。我希望實(shí)現(xiàn)一個(gè)左中右三列的布局，其中左右部分固定寬度，中間部分自適應(yīng)：

實(shí)現(xiàn)起來很簡(jiǎn)單，代碼如下：

  
left
  

    middle
  
  
right


.container {
  display: flex;
  width: auto;
  height: 300px;
  background: grey;
}

.left {
  flex-basis: 200px;
  background: linear-gradient(to bottom right, green, white);
}

.middle {
  flex: 1;
  background: linear-gradient(to bottom right, yellow, white);
}

.right {
  flex-basis: 300px;
  background: linear-gradient(to bottom right, purple, white);
}

到此為止一切都很美好。但遇到中間部分內(nèi)容很長(zhǎng)的時(shí)候，UI 就變形了：

為了固定住左右部分的寬度，需要給 left 和 right 加上flex-shrink: 0。但加上后容器的寬度就被撐開了，頁(yè)面底部出現(xiàn)了滾動(dòng)條：

而我期望的效果是滾動(dòng)條出現(xiàn)在中間部分，整個(gè)頁(yè)面不能滾動(dòng)。解決方法是給 middle 加上overflow: scroll：

此時(shí)的完整代碼如下：

  
left
  

    middle
    
    
long
  
  
right


.container {
  display: flex;
  width: auto;
  height: 300px;
  background: grey;
}

.left {
  flex-basis: 200px;
  flex-shrink: 0;
  background: linear-gradient(to bottom right, green, white);
}

.middle {
  flex: 1;
  overflow: scroll;
  background: linear-gradient(to bottom right, yellow, white);
}

.right {
  flex-basis: 300px;
  flex-shrink: 0;
  background: linear-gradient(to bottom right, purple, white);
}

.long {
  width: 800px;
}

完整的 codepen 在這里

實(shí)戰(zhàn)經(jīng)驗(yàn)到此結(jié)束，下面我們?cè)偕钊雽W(xué)習(xí)涉及到的知識(shí)點(diǎn)。

先來講講上面用到的屬性flex: 1。它其實(shí)是一個(gè)縮寫，等價(jià)于flex: 1 1 0，也就是

flex-grow : 1;
flex-shrink : 1;
flex-basis : 0;

flex-grow 表示當(dāng)有剩余空間的時(shí)候，分配給項(xiàng)目的比例

flex-shrink 表示空間不足的時(shí)候，項(xiàng)目縮小的比例

flex-basis 表示分配空間之前，項(xiàng)目占據(jù)主軸的空間

下面來講講 flex 空間分配的步驟。

flex-grow（默認(rèn)值 0）

假設(shè)有一個(gè)寬度為 800 的容器，里面有 3 個(gè)項(xiàng)目，寬度分別是 100，200，300：

  
left
  
middle
  
right


.container {
  display: flex;
  width: 800px;
  height: 300px;
  background: grey;
}

.left {
  flex-basis: 100px;
  background: linear-gradient(to bottom right, green, white);
}

.middle {
  flex-basis: 200px;
  background: linear-gradient(to bottom right, yellow, white);
}

.right {
  flex-basis: 300px;
  background: linear-gradient(to bottom right, purple, white);
}

效果如下：

這時(shí)候就出現(xiàn)了多余的 200 的空間（灰色部分）。這時(shí)候如果我們對(duì)左中右分別設(shè)置flex-grow為 2，1，1，各個(gè)項(xiàng)目的計(jì)算邏輯如下：

首先將多余空間 200 除以 4（2 + 1 + 1），等于 50

left = 100 + 2 x 50 = 200

middle = 200 + 1 x 50 = 250

right = 300 + 1 x 50 = 350

flex-shrink（默認(rèn)值 1）

假設(shè)父容器寬度調(diào)整為 550，里面依然是 3 個(gè)項(xiàng)目，寬度分別是 100，200，300，這時(shí)候空間就不夠用溢出了。首先要理解清楚，當(dāng)我們定義一個(gè)固定寬度容器為flex的時(shí)候，flex會(huì)盡其所能不去改變?nèi)萜鞯膶挾?，而是壓縮項(xiàng)目的寬度。這時(shí)我們對(duì)左中右分別設(shè)置flex-shrink為 1，2，3，計(jì)算邏輯如下：

溢出空間 = 100 + 200 + 300 - 550 = 50

總權(quán)重 = 1 x 100 + 2 x 200 + 3 x 300 = 1400

left = 100 - (50 x 1 x 100 / 1400) = 96.42

middle = 200 - (50 x 2 x 200 / 1400) = 185.72

right = 300 - (50 x 3 x 300 / 1400) = 267.86

如果我們不想項(xiàng)目被壓縮，就必須將flex-shrink設(shè)為 0。還是用上面的例子，當(dāng)左中右的flex-shrink都為 0 的時(shí)候，就會(huì)沖破寬度限制，container的寬度將會(huì)從 550 變?yōu)?600。

codepen 在這里

flex-basis（默認(rèn)值 auto）

flex-basis指定項(xiàng)目占據(jù)主軸的空間，如果不設(shè)置，則等于內(nèi)容本身的空間：

本文從問題出發(fā)，講解了Flex布局在實(shí)戰(zhàn)中的應(yīng)用，并深入到flex-grow，flex-shrink和flex-basis的細(xì)節(jié)，描述了項(xiàng)目空間在填充和溢出情況下的計(jì)算方式，希望對(duì)你有所幫助。