當你站在面試官的角度二（flex佈局）

前言

本文章的一些問題都是我在複習知識點的時候本身站在面試官的角度思考或是在網上查找所得。正所謂人最大的敵人就是本身，因此站在面試官的角度戰勝本身，也許你就吧，正在奮鬥的咱們。

flex佈局的一些小問題

面試官： flex佈局用過沒，講講 flex 佈局的屬性

我： 用過，佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局很是不方便，好比，垂直居中就不容易實現，因此2009年，w3c提出了一種新的佈局方案，就是flex佈局，他能夠完整，簡便，響應式地實現各類頁面佈局，目前它已經獲得各類瀏覽器的支持。
而flex佈局任何一個容器都能用，連行內元素都能使用flex佈局（display:inline-flex)

面試官： 我這裏插一下，-webkit-flex有什麼做用？

我： 額。。。，我給您舉個例子吧，就好比咱們如今出現的市場的手機，大部分都是都是充電接口和耳機接口一體的，並且最可氣的是，當你買手機的時候，他還不送原裝耳機，因此當你在上班想摸魚看電影的時候，咳咳..口誤口誤，是聽歌放鬆一下的時候，看着桌上圓孔耳機的時候，你會默默流淚地想起你須要一個耳機轉接器。 webkit-flex其實也是差很少，當你想在webkit內核的瀏覽器上使用flex佈局時，你必須加上display:-webkit-flex，這條語句

註釋：戲劇性的話語，會迅速拉近你和麪試官的距離

面試官： 好的，我知道了，你繼續講flex的一些屬性吧！

我： 關於flex佈局的屬性： flex佈局的屬性，通常分爲兩大類：容器的屬性，項目的屬性

而容器的屬性整體有6大屬性：flex-direction，flex-wrap，flex-flow，justify-content， align-items，align-content

項目也有六大屬性了：order,flex-grow,flex-shrink,flex-basis,flex,align-self

分析：（在這裏說六大屬性的時候，你說前面幾個基礎屬性的時候你能夠快速一點銜接，可是說比較重要的屬性的時候你能夠停頓一下，裝做一時沒想起，若是幾秒後面試官問你：還有嗎？你能夠說出，若是沒問，你也能夠說出來，而後面試官就會對這最後一個屬性印象深入，而後他就有很大可能叫你介紹一下這個屬性，這是，你就從棋子變成了棋手了）

註釋：人每每會忽視太容易獲得的東西，而對於很可貴到的東西刻苦銘心，這是人的劣根性。

在這裏，我會讓「面試官」把全部的屬性都問一遍，別問我爲何這麼作，我只是想複習一遍flex佈局

面試官： 那你給我介紹一下全部**屬性唄！

我： flex-direction是決定主軸的方向，它有四個值對應四個方向，row是默認值，使主軸是水平的，並且是自西向東的，而row-reverse恰好相反，它設定的主軸是自東向西，column是從北到南，column-reverse是從南到北

我： 對於flex-wrap屬性，這讓我想起了大一的時候食堂吃飯的時候，我不知道那些人怎麼能夠那麼快，每當我和室友晃悠到食堂的時候，看見那麼長的隊伍時，我心裏是絕望的，可是有時候隊伍太長了，食堂阿姨就會恍如天使般的對咱們招手，叫咱們另起一隊。而flex-wrap也是起到這麼一個做用，當一條軸線排不下的時候，如何換行。

flex有三個值nowrap是默認值，不換行，wrap換行第一行在上面，wrap-reverse換行，第一行在下面

我： flex-flow其實就是flex-direction和flex-wrap的簡寫形式，默認值爲：row nowrap；而後後面的我剛剛上面說了，上面查去

我： justify-content屬性定義了主軸上的對齊方式，有五個值

• flex-start 是左對齊
• flex-end 右對齊
• space-between是兩端對齊，項目之間的間隔都相等
• space-around 每一個項目兩邊的距離是相等的，因此項目之間的距離是項目和邊框距離的兩倍。

我： align-items是定義項目在交叉軸上如何對齊的，有五個值

• flex-start 是交叉軸的起點對齊
• flex-end 交叉軸的終點對齊
• center 交叉軸中點對齊
• baseline 項目的第一行文字的基線對齊
• stretch 若是項目未設置高度，或者設置的爲auto，將填滿整個容器的高度

我： align-content 定義了多根軸線的對齊方式

• flex-start 與交叉軸的起點對齊
• flex-end 與交叉軸的終點對齊
• center 與交叉軸的中點對齊
• space-btween 與交叉軸的兩端對齊，軸線之間的間隔平均分配
• space-around 每根軸線兩邊的間隔都是相等的，因此軸線之間的間隔是軸線和邊框的間隔的兩倍
• stretch 軸線佔滿整個交叉軸

我： order 定義項目排列順序 數值越小，排列越靠前 默認爲零

我： flex-gorw定義項目的放大比例，默認值爲0，即就算存在剩餘空間也不放大，若是全部項目數值爲1的話就是全部項目等分剩餘空間，若是有一個項目的flex-grow屬性爲2，其他項目都爲1時，則前者佔據的剩餘空間是後者的兩倍。

我： flex-shrink 定義了項目的縮小比例，默認值爲1，即若是空間不足的話，全部項目等比例縮小，若是有一個項目的flex-shrink的屬性爲0，其餘項目的爲1，則空間不足時，前者不縮小，後者等比例縮小。

我： 屬性定義了，在分配多餘空間以前，項目佔據的主軸空間（main size），瀏覽器根據這個屬性計算出主軸是否有剩餘空間，它的默認值爲auto即項目自己的大小，它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間。

flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，默認值爲0 1 auto，該屬性有兩個快捷值auto（1 1 auto）和none(0 0 auto)

align-self屬性的話，它容許單個項目與其餘項目不同的對齊方式，可覆蓋align-items的屬性，默認值爲auto，表示繼承父元素的屬性，若是沒有父元素，則等同於stretch，該屬性可能取6個值，除了auto，其餘都與align-items屬性徹底一致。

註釋：當面試官面對千篇一概的回答時，你用清新脫俗的話語會讓你成爲一股清流，流淌在他心間。

面試官： 當flex-basis屬性的百分比大於100%時，會佔據外邊距嘛

我： 不會，若是項目具備margin值，margin值會存在，即margin值的那部分空間會佔據，不管總flex-basis是10000%，margin值也不會被移除。

面試官： 你給我說一下flex-shrink的計算規則

我： 　

• flex-shrink僅在內容默認寬度之和大於容器的時候纔會有效　　
• 容器內子容器的content、border、padding都要參與計算才能獲得正確的收縮指數值
• border和padding即便參與了計算，但寬度始終不會改變，假如收縮後的總寬度仍然超過容器寬度，則會超出盒子，即便設置box-sizing爲border-box也不能使border和padding收縮

假設有一個id爲content容器中有5個小盒，content容器定寬500px，

每一個小盒的初始內容寬度是120px + 邊框3px * 2 = 126px，

如今前三個小盒flex-shrink數值爲1，後兩個數值爲2，下面計算：

小盒初始寬度總和與content容器寬度差值

　　Δ = 126 * 5 - 500 = 130

收縮指數

　　Δt = 130 ÷ （1 * 3 + 2 * 2）

前三個盒子寬度

　　box = 126 - Δt

後兩個盒子寬度

　　box1= 126 - 2Δt

總結

其實吧，寫這篇文章以前，我也沒面試過，寫的這些都是創建在理論和想象基礎上，能夠參考，可是千萬別去死記，由於我也不知道我面對面試的時候，會不會有寫文章時這麼淡然。因此，紙上得來終覺淺，得知此事要躬行，實踐是最好的老師，加油加油。