寫在前邊
網頁佈局，是前端入門的時候必學、必須熟練的一門技術，學到什麼程度算是入門了呢？隨便給你一個網站，你就可能快速的分析出網頁的結構，然後搭建出模型，這是前端網頁佈局入門的最基本要求。
作爲一個前端初學者，在學習的時候可能會用到一些盒模型傳統的佈局方式（display + position + float），很多小夥伴用着用着就覺得這種傳統佈局寫一些樣式比較麻煩、不方便，比如垂直居中的傳統實現方式如。
第一種實現方式：
原本外容器沒有設置高度的時候會緊貼內元素，但是設置容器內的上下內邊距相同的數值時，此時就實現了垂直居中。
第二種實現方式：
使用 Vertical-align 屬性實現垂直居中。
但是這個屬性往往初學者容易弄混，不知道何時才使用，有時元素設置這個屬性並生效，這是怎麼回事呢？也是初學者往往最頭疼的一個問題，這個屬性涉及到的內容不是一篇兩篇文章寫完的，這篇我們不多涉及到。
第三種實現方式：
使用 line-height 設置父容器行高的方式進行垂直居中，但是隻適用單行文本。
其實垂直居中網頁佈局中傳統實現方式很多種，但是這麼多種不同情況下進行選擇太麻煩了，我們有沒有規定一個方式就能無論是行內元素還是塊元素就能實現垂直居中呢？
我們嘗試今天要分享的 Flex 試一下垂直居中實現如下：
只需在外容器的 CSS 中設置這兩個屬性就可以輕鬆實現垂直居中。
完整代碼實現如下：
是不是第二種非常的方便？其實就是一句垂直居中代碼，align-items: center;
那麼今天小鹿就來分享一種新佈局方式，可能對於剛學習前端的小夥伴來說是種新的，但是作爲一些進階者，這種佈局經常在項目中被靈活使用，得到了很多開發者的喜愛，用着用着就愛上了這種佈局的方式 —— Flex佈局。
看完這篇文章，小鹿也會通過生動有趣的動畫，讓你愛上 Flex 佈局。
思維導圖
1、什麼是 Flex 佈局？
Flex 佈局又爲彈性佈局，所謂彈性，就很大的提供了頁面佈局的靈活性。
我們可以把一個容器（div、span等），設置它的 CSS 的 display 屬性爲 flex 之後，我們就可以使用 Flex 的佈局方式了。
PS：一旦容器設置display: flex佈局之後，我們使用的傳統佈局中的float、vertical-align、clear等屬性就完全失效了。但是我們可以通過 Flex 設置的屬性去進行佈局。
2、認識 Flex 佈局
因爲我們再用傳統佈局的時候，對齊元素進行垂直居中，代碼特別的麻煩，爲了更好的解決這個問題，Flex 佈局就規定設置橫、縱兩個方向，我們無論在水平排列還是垂直排列的時候，這樣寫起來更方便了。
而且 Flex 佈局設置了三個位置，左邊、中間、右邊，而且都有對應的屬性，就可以很輕鬆的設置元素的位置了。
光說不練假把式，我們就開始動手寫代碼實踐一下，跟着小鹿一起打開編譯器。
3、容器的基本屬性
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、容器內單個元素屬性
我們上邊是針對外容器的一些屬性設置，我們下邊的一些屬性是針對於容器內元素的一些屬性設置。讓我們呢一個個來看一下最常用的。
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 篇的動畫技術文章，和各位小夥伴共同努力一起學習！公衆號回覆 “資料” 送一從零自學資料大禮包！
【轉載說明】：轉載請說明出處，謝謝合作！~