什麼是 Flexbox ?
Flexbox 是 flexible box 的簡稱，意思是“靈活的盒子容器”，是 CSS3 引入的新的規劃形式。它決定了元素怎地樣在頁面上排列，使它們能在不一樣的屏幕尺寸與設備下可猜測地浮現出來。
它之因此被稱為 Flexbox ，是因為它能擴展與膨大 flex 容器內的元素，以最大限度地填表可用空間。與以前規劃方式(如 table 規劃與浮動元素內嵌塊元素)相形，Flexbox 是1個更超強的方式：
在不一樣方向排列元素
重新排列元素的表現順序
變動元素的對齊方式
動態地將元素裝入容器
什麼情況下不建議使用 Flexbox ?
固然 Flexbox 非常適合縮放，對齊與重新排序元素，但以下情況應該儘量避免使用 Flexbox 規劃：
整體頁面規劃
完全支持舊瀏覽器的站點
瀏覽器支持 Flexbox 的情況：
舊版瀏覽器，如IE 11或更低版本，不支持或僅部分支持 Flexbox 。如果你想安全的使用頁面一般呈現，你應該退回到其他的 CSS 規劃方式，比如別離float 的 display: inline-block 或者 display: table 等。但是，如果您只針對現代瀏覽器，那麼 Flexbox 絕對值得一試。
術語
在 Flexbox 模具中，有三個核心概念：
– flex 項，需要規劃的元素
– flex 容器，其包羅 flex 項
– 排列方向(direction)，這決定了 flex 項的規劃方向
最好的學習方式是從經驗與例子中學習，因此讓檸檬科技科技夥伴們開始吧!
Level 1 — 功底
1)建立1個 flex 容器
要建立1個 flex 容器，您只需要將1個 display: flex 屬性增添到1個元素上。默認情況下，全部的直接子元素都被認為是 flex 項，並從左到右依次排列在一行中。如果 flex 項的寬度總與大於容器，那麼 flex 項將按比例縮小，直到它們適應 flex 容器寬度。
2)將 flex 項排成一列
能通過(在 flex 容器中)設置 flex-direction: column 使 flex 項垂直規劃。也能通過設置 flex-direction: column-reverse 或 flex-direction: row-reverse 來使 flex 項以相反的順序排列。
Level 2— 新手
1)靠右對齊的 flex 項
回想一下，每個 Flexbox 模具都有 flex 方向(主軸)。justify-content 用於指定 flex 項在 flex 方向(direction)上的對齊位置。在上面的例子中，justify-content:flex-end 表示 flex 項在水平方向上靠 flex 容器的煞尾對齊。這就是為什麼他們被放在了右首。
2)居中對齊的 flex 項
3)鋪開的 flex 項
您能通過使用以下 justify-content 屬性的三個間距值之一來指定容器中 flex 項之間應表現多少空間：
space-evenly : flex 容器起首邊際與第1個 flex 項之間的間距與每個相鄰 flex 項之間的間距是相稱。(作者注：該屬性以前很少看到，原因是以前瀏覽器不支持，chrome 也是 60 版本以後才支持。延長一下，align-content: space-evenly 也是這個邏輯，建議在 chrome 60 下查看 這個demo 。 )
space-between : 任何兩個相鄰 flex 項之間的間距是一樣的，但不願定即是第1個/最後1個 flex 項與 flex 容器邊際之間的間距;起首邊際與第1個項目之間的間距與煞尾邊際與最後1個項目之間的間距是相稱的。
space-around : flex 容器中的每個 flex 項的每一側間距都是相稱的。請注意，這意味著兩個相鄰 flex 項之間的空間將是第1個/最後1個 flex 項與其日前頭沿之間的空間的兩倍。
作者注：網上找了一張圖片能更好的說明 justify-content 屬性值的表現，如圖：
4)flex 項在交叉軸上的對齊
一般，檸檬科技科技夥伴們想沿著 flex 方向(主軸)排列 flex 項，還能在垂直於它的方向(交叉軸)上對齊 flex 項。通過設置 justify-content:center與align-items:center，能使 flex 項水平與垂直襬設在 flex 容器的中間。
5)對齊某個特定的 flex 項
能在某個特定的 flex 項上使用 align-self CSS 屬性，來使該特定的 flex 項與容器中的其他 flex 項進行對齊。
Level 3 — 中級
1)允許 flex 項多行/列排列
默認情況下， flex 項不允許多行/列排列，如果 flex 容器尺寸對於全部 flex 項來說不夠大，那麼flex 項將被調整大小以適應單行或列排列。
通過增添 flex-wrap: wrap ，能將溢出容器的 flex 項將被排列到另一行/列中。
2)flex 項反向多行/列排列
flex-wrap:wrap-reverse 仍舊使 flex 項以多行/列排列，但是它們從 flex 容器的末尾開始排列的。
3)多行/列排列的 flex 項在交叉軸上的對齊方式
默認情況下，當 flex 容器的交叉軸(cross axis)上存在富餘空間時，您能在 flex 容器上設置 align-content，以控制 flex 項在交叉軸(cross axis)上的對齊方式。可能的值是 flex-start，flex-end，center，space-between，space-around ，space-evenly 與 stretch(默認)。
Level 4 — 初級
1)拉伸 flex 項
flex-grow 只有在 flex 容器中有剩餘空間時才會生效。flex 項的 flex-grow 屬性指定該 flex 項對峙於其他 flex 項將拉伸多少，以填表 flex 容器。默認值為1。當設置為 0 時，該 flex 項將不會被拉伸去補充剩餘空間。在這個例子中，兩個項的比例是 1:2，意思是在被拉伸時，第1個 flex 項將佔用 1/3，而第二個 flex 項將佔據剩下的空間。
作者注：這裡特別要注意的是 flex-grow 控制的是 flex 項的拉伸比例，而不是佔據 flex 容器的空間比例。
企業籤、超級籤、TF簽名、H5封裝免籤等！有需要聯繫、24小時在線售後！如果沒有蘋果企業賬號可藉助第三方平臺（如：檸檬科技ios企業簽名）獲得蘋果企業簽名服務。
2)膨大元素
flex-shrink 只有在 flex 容器空間不足時才會生效。它指定 flex 項對峙於其他 flex 項將縮小多少，以使 flex 項不會溢出 flex 容器。 默認值為 1。當設置為0時，該 flex 項將不會被膨大。在這個例子中，比例是1：2，意思是在膨大時，第一項將膨大 1/3 ，而第二個項目將被膨大 2/3 。作者注： flex-shrink 與 flex-grow 剛好相反
3)設置元素的大小
您能使用 flex-basis 定製 flex 項尺寸來代替元素的初始大小。默認情況下，其值為 flex-basis: auto，這意味該尺寸著從非 Flexbox CSS規則計算的。您還能將其設置為某個絕對值或對峙於 flex 容器百分比的值;譬如 flex-basis:200px 與flex-basis:10%。
4)將 flex-grow, flex-shrink, 與 flex-basis 放在一齊
flex 是 flex-grow，flex-shrink 與 flex-based 的縮寫。在這個例子中，第1個 flex 項設置為flex-grow: 1，flex-shrink: 0，flex-basis: 100px，第二個 flex 項設置為flex-grow: 2，flex-shrink: 0，flex-basis: 10%。
分析一下上面的這個例子，由於在 flex 容器(200px)中存在剩餘空間 (90px)，只有 flex-grow 本領起功能，flew-shrink 被疏忽。第1個 flex 項的flex-grow 為 1，第2個 flex 項的flex-grow 為 2，因此第1個 flex 項拉伸 30px，第2個 flex 項拉伸 60px。
總結
Flexbox 輕易學習與操作。 因為 Web 開闢週期短，迭代速度很快，因此對其使用的知識尤其有用。如果你想在你的項目中使用 Flexbox 之行進行more地嘗試，您能訪問Flexyboxes 與 Flexbox Froggy 練習。
閱讀更多 王壯實1 的文章
