動畫：Flex佈局 | 別再用傳統方式進行網頁佈局了（上）

寫在前邊

網頁佈局，是前端入門的時候必學、必須熟練的一門技術，學到什麼程度算是入門了呢？隨便給你一個網站，你就可能快速的分析出網頁的結構，而後搭建出模型，這是前端網頁佈局入門的最基本要求。

做爲一個前端初學者，在學習的時候可能會用到一些盒模型傳統的佈局方式（display + position + float），不少小夥伴用着用着就以爲這種傳統佈局寫一些樣式比較麻煩、不方便，好比垂直居中的傳統實現方式如。

第一種實現方式：

本來外容器沒有設置高度的時候會緊貼內元素，可是設置容器內的上下內邊距相同的數值時，此時就實現了垂直居中。

第二種實現方式：

使用 Vertical-align 屬性實現垂直居中。

可是這個屬性每每初學者容易弄混，不知道什麼時候才使用，有時元素設置這個屬性並生效，這是怎麼回事呢？也是初學者每每最頭疼的一個問題，這個屬性涉及到的內容不是一篇兩篇文章寫完的，這篇咱們很少涉及到。

第三種實現方式：

使用 line-height 設置父容器行高的方式進行垂直居中，可是隻適用單行文本。

其實垂直居中網頁佈局中傳統實現方式不少種，可是這麼多種不一樣狀況下進行選擇太麻煩了，咱們有沒有規定一個方式就能不管是行內元素仍是塊元素就能實現垂直居中呢？

咱們嘗試今天要分享的 Flex 試一下垂直居中實現以下：

只需在外容器的 CSS 中設置這兩個屬性就能夠輕鬆實現垂直居中。

完整代碼實現以下：

是否是第二種很是的方便？其實就是一句垂直居中代碼，align-items: center;

那麼今天小鹿就來分享一種新佈局方式，可能對於剛學習前端的小夥伴來講是種新的，可是做爲一些進階者，這種佈局常常在項目中被靈活使用，獲得了不少開發者的喜好，用着用着就愛上了這種佈局的方式 —— Flex佈局。

看完這篇文章，小鹿也會經過生動有趣的動畫，讓你愛上 Flex 佈局。

思惟導圖

一、什麼是 Flex 佈局？

Flex 佈局又爲彈性佈局，所謂彈性，就很大的提供了頁面佈局的靈活性。

咱們能夠把一個容器（div、span等），設置它的 CSS 的 display 屬性爲 flex 以後，咱們就可使用 Flex 的佈局方式了。

PS：一旦容器設置display: flex佈局以後，咱們使用的傳統佈局中的float、vertical-align、clear等屬性就徹底失效了。可是咱們能夠經過 Flex 設置的屬性去進行佈局。

二、認識 Flex 佈局

由於咱們再用傳統佈局的時候，對齊元素進行垂直居中，代碼特別的麻煩，爲了更好的解決這個問題，Flex 佈局就規定設置橫、縱兩個方向，咱們不管在水平排列仍是垂直排列的時候，這樣寫起來更方便了。

並且 Flex 佈局設置了三個位置，左邊、中間、右邊，並且都有對應的屬性，就能夠很輕鬆的設置元素的位置了。

光說不練假把式，咱們就開始動手寫代碼實踐一下，跟着小鹿一塊兒打開編譯器。

三、容器的基本屬性

3.1 flex-direction

這個屬性主要用來調節佈局元素的方向的，好比你想縱向排列。以下：

flex-direction: column

flex-direction: row

經常使用的就是上邊這兩個，其餘兩個相反方向的排列方式：

flex-direction: column-reverse;

flex-direction: row-reverse;

3.2 flex-wrap

這個做爲換行屬性，若是當元素一行擺放不開了，咱們須要選擇如何換行？不換行仍是換行，仍是換行到第一行的上方呢？

(1)nowrap不換行

(2)wrap換行

(3)wrap-reverse換到第一行

咱們經過上邊的屬性很容易實現的。

3.3 justify-content

以前咱們傳統佈局的水平居中有這幾種方式：

可是在 Flex 佈局幾種水平位置的佈局。這樣用起來讓頁面的佈局更加的靈活、多變。

(1)flex-start(默認) ：左對齊

(2)flex-end：右對齊

(3)center：居中

(4)space-between：兩端對齊，項目之間的間隔都相等

(5)space-around：每一個項目兩側的間隔相等。

3.4 align-items

既然有水平居中，那麼就有垂直居中，垂直居中上邊咱們也說過，傳統的佈局比較麻煩，因此咱們要見識一下 Flex 佈局的強大之處。

經過這個align-items屬性值，很輕鬆的實現垂直居中。

(1)flex-start：交叉軸的起點對齊。

(2)flex-end：交叉軸的終點對齊。

(3)center：交叉軸的中點對齊。

(4)baseline：項目的第一行文字的基線對齊。

(5)stretch：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

四、容器內單個元素屬性

咱們上邊是針對外容器的一些屬性設置，咱們下邊的一些屬性是針對於容器內元素的一些屬性設置。讓咱們呢一個個來看一下最經常使用的。

4.1 flex-grow

該屬性主要用來定義元素的放大比例，它的默認值是 0。

若是容器內的全部元素都設置爲 1，則平分剩餘的空間；若是其中一個設置爲 2，則按比例平分剩餘的空間。

4.2 flex-shrink

該屬性主要用來定義元素的縮小比例，默認值爲 1。

若是全部元素的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個元素的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。

4.3 flex-basis

瀏覽器會根據該屬性進行對主軸計算是否有多餘的空間。默認值爲 auto。

4.4 flex

該屬性是以上三個屬性的縮寫形式，默認值爲0 1 auto。

還有兩個其餘的快捷屬性，auto（1 1 auto） 和none（0 0 auto），瀏覽器會根據其推算相關的數值。

小結

咱們今天學了 Flex 佈局以後，是否是很是的簡單，媽媽不再用擔憂你的佈局了。

之因此分享這篇文章，由於我在交流羣裏看到不少初學者一直在用傳統的 DIV 進行佈局，因此簡單的經過一篇文章的介紹，讓你知道除了傳統佈局外，還有 Flex 佈局、網格佈局，在快捷的佈局就是UI框架了。好比Bootstrap、Element-ui等。

通常框架會在項目開發中使用的較多，對於初學者的話，仍是建議本身親手搭建佈局，上邊幾個 Flex 屬性是經常使用的，若是想深刻學習，請查看官方文檔。

❤️ 不要忘記留下你學習的腳印 [點贊 + 收藏 + 評論]

文章+動畫寫了好幾個小時，不妨點贊支持一下。嘻嘻，你不點贊說明你很自私，你怕那麼好的文章讓別人也看到。開個小小玩笑。

能夠關注小鹿公衆號：「小鹿動畫學編程」，後臺回覆：「資源」。送你一份小鹿以前自學的資料和拉你進免費學習羣哦！

做者Info：

【做者】：小鹿

【原創公衆號】：小鹿動畫學編程。

【簡介】：和小鹿同窗一塊兒用動畫的方式從零基礎學編程，將 Web前端領域、數據結構與算法、網絡原理等通俗易懂的呈獻給小夥伴。先定個小目標，原創 1000 篇的動畫技術文章，和各位小夥伴共同努力一塊兒學習！公衆號回覆 「資料」 送一從零自學資料大禮包！

【轉載說明】：轉載請說明出處，謝謝合做！~