前言
在之前的一篇文章《 》中，我們有一道題目是通過flex去實現三欄佈局的。
今天這篇文章我們來具體看看，flex是如何實現頁面佈局的，希望加深大家對flex的理解。
CSS
flex佈局的含義
flex佈局又名為‘彈性佈局’，主要是通過設置的屬性值自動調整元素的寬度和高度值，在容器空間充裕的情況下，使其填滿容器的剩餘空間；又或者在容器空間不足的情況下，收縮元素的高度和寬度，使其不會溢出容器。
使用flex佈局，可以靈活的控制元素在容器內的展示。尤其是對於移動端小屏幕來說，flex基本已成了主流的佈局方式。
flex佈局的基本概念
在flex佈局中，有幾個概念是我們必須掌握的，可以從下面這個圖中看出。
flex佈局
flex佈局，實際就是一個彈性容器內部元素的排列。
flex容器中存在一個主軸和側軸的概念，表示的是容器內元素排列的方向。在默認情況下，彈性項目會沿著主軸方向排列，即上圖所示的水平方向。當然也可以通過flex-direction屬性去設置。
在flex中有6個可以設置在容器上的屬性，有6個可以設置容器內項目的屬性，這些基本知識大家可以自行去查看官方文檔，下面我們看看flex佈局的計算過程。
flex佈局的實例
在很多網站中，我們可以看到這樣的效果，當鼠標移動到指定的元素後，該元素展示詳情，其他元素收縮。
基本效果如下圖所示。
flex佈局實例1
我們先看看代碼部分，再去分析為什麼會達到這個效果。
HTML代碼
HTML部分代碼很簡單，無需多講。
HTML代碼
CSS代碼
首先是容器的基本樣式，設置display為flex，為了更好的兼容性，在某些屬性上加上-webkit-前綴。
容器屬性
然後是給容器內子項目設置flex相關屬性，為了讓效果看起來更平滑，加上了動畫。
容器內子項目屬性
最後是很重要的一點，就是在鼠標滑過時，改變該子項目的寬度。
鼠標滑過
解析計算過程
通過以上的屬性，為什麼就能達到上面的效果呢？
初始寬度值
在鼠標未經過容器時，容器會根據設置的flex值自動計算每個子項目佔據的實際寬度值。
每個子項目的flex值為1, 1, auto。
第一個1表示的是，在容器有剩餘空間時，每個子項目都進行一等分剩餘空間。
第二個1表示的是，當容器空間不足時，每個子項目一等分的減少超出的空間。
第三個參數auto表示的是寬度值取決於其他屬性值，這個題目中是width值。
我們再來看看計算過程。
容器總寬度為450px，每個div寬度值為30px，則三個div就是30*3=90px。
那麼剩餘空間就是450px-90px=360px。
因為每個div的flex-grow屬性為1，則表示將剩餘空間分為1+1+1=3等分。
那麼每等分空間的寬度就是360/3=120px。
那麼最後每個div佔據的實際寬度就是120px+30px=150px。
鼠標滑過
當鼠標滑過時，設置了:hover類，其中width值變為200px，這裡會重新計算各個div的寬度值。
三個div佔據的寬度值為200px+30px+30px = 260px。
剩餘空間450px-260px=190px。
剩餘空間三等分後，每等分空間的寬度是190/3=63.33px。
那麼未滑過鼠標的div佔據的實際空間是63.33+30=93.33px。
滑過鼠標的div佔據是實際空間是63.33+200=263.33px。
通過以下的圖可以看出。
結果圖
結束語
今天這篇文章通過一個佈局實例，講解了flex佈局的計算過程，其實大家在掌握了flex屬性的幾個特定值後就可以很容易的算出佔據的寬度值。
今天這篇文章大家有沒有理解呢？
閱讀更多 coder分享 的文章
