前言

相信大多數人對Boostrap一定不陌生，他提供了一套CSS framework的可以讓我們輕鬆引入他所自訂的grid system，可以解決各種Responsive的網頁排版，但Boostrap還存有浮動這個麻煩的問題，而我現在要提的FlexBox grid，他有擁有酷似Boostrap的grid system,而且還整合了Css3的 Flex，Flex 有多厲害，想必大家都有所耳聞，不只不用去煩惱清除浮動問題，且 Flex 可以讓你的排版更彈性，各種對齊方式（水平置中、垂直置中,分散對齊)通通一次到位，還有排序和和自動分配child元素比例等,都有被整合到FlexBox grid,廢話不多說！我們直接來看FlexBox grid的強大之處吧!

FlexBox grid

1.Responsive

含mobile first觀點，有著對應不同media query的class名稱

• lg (large)
• md: (medium)
• sm: (small)
• xs: (extra small)

權重為： lg > md > sm > xs

也就是說 xs 會被 " sm 何其以上的class name " 的樣式複寫 另外： xs 是針對 media query 0px 以上 來做樣式,所以你也可以當作全域樣式或配合sm md lg使用，將xs視為手機版的樣式使用

2.grid 格線系統

flex-grid 包含自適應功能，以行動優先的流動格線系統，並且隨著設備或可視區域大小縮放，格線系統會自動擴大最大至 12 個欄位。與Bootstrap十分相似

實際引用：

• 母元素"parent"加入"row"的class
• 子元素"child"加入指定的class name col-"指定query name"-"col數" 例如: col-xs-8

example:

<div class ="parent row">
<div class ="child-item col-xs-8"></div>
<div class ="child-item col-xs-4"></div>
</div>

demo:

如果你已經使用過Bootstrap或是其他種用來排版的framework,你對上述的結果定一定不感到意外，但為何我會選擇flexgrid？
當你檢視他child元素時，你會發現已經不是使用float的屬性來做編排，而是使用css3 flex 的方式來做編排，可以避免許多有關於浮動的問題，相信大家一定有為清除浮動的問題煩惱過！ 當然flexgrid厲害的地方不只這些，讓我們繼續往下看

3.columns auto width 自適應寬度

在上面的demo中，你已經知道可以針對不同的child元素指定他的columns數,而flexgrid還有一個十分厲害的功能，就是他可以自動分配你child的column數

實際引用：

• 母元素"parent"加入"row"的class
• 子元素"child"加入col-"指定query name"的class (例如: col-xs)

example1:

<div class ="parent row">
<div class ="child-item col-xs">auto</div>
<div class ="child-item col-xs">auto</div>
<div class ="child-item col-xs">auto</div>
</div>

demo:

詳細：

上面example中上面3个child元素會自動以1:1:1的方式排列，因為flex會根據剩餘的空間依照數字的比例去伸長 你的child元素

example2:

<div class ="parent row">
<div class ="child-item" style ="width:100px">100px</div>
<div class ="child-item col-xs">auto</div>
<div class ="child-item col-xs">auto</div>
</div>

demo:

詳細：

上面example中上面3个child元素我們指針對後面个child元素做自適應寬，而第一個"child元素"有自己100px的寬度，所以flex會先減去掉第一個child元素的寬（100px）在根據剩餘的空間在依照剩餘兩個child元素數字的比例去伸長

4.Offsets 偏移

有使用過Bootstrap的人對Offsets一定不陌生,而flex-grid也有一樣的功能存在，可指定child元素利用margin-left的方式，往右邊移動指定的column數

實際引用：

• 母元素"parent"加入"row"的class
• 子元素"child"加入指定的class name col-"指定query name"-"offset"-"col數" (例如:col-xs-offset-9)

example:

<div class="row">
    <div class="col-xs-offset-3 col-xs-9">
        <div class="box">offset</div>
    </div>
</div>

demo

詳細：

你可以看到一個3 column 的child元素被往右推了9个column

詳細的example和demo 官網裡已有詳細的demo可供參考Offsets的部份

5.Alignment 對齊方式

含有css3 flex 的對齊方式，假設你已經熟悉flex的語法，你一定知道flex的對齊的方式是多麼的強大,垂直至中,分散對齊 等等通通都不在話下 而且flex grid 對齊方式中也整合了 responsive ，可以輕鬆的選擇在 特定query 下，有著不同的對齊方式

以下class name 都要在parent元素，也就是在含有"row" class name的元素引用 另外下方 class name 的 "-" 後面 需加入對應的media query名稱（例如：start-xs）

• 靠左對齊：.start-
• 靠右對齊：.end-
• 水平置中：.center-
• 靠上對齊：.top-
• 靠下對齊：.bottom-
• 垂直置中：.middle-
• 分散對齊(左右貼邊)：.between-
• 分散對齊（左右不貼邊）：.around-

詳細的example和demo 官網裡已有詳細的demo可供參考Alignment和Distribution的部份

補充：兩種分散對齊方式我在此只有簡單帶過,想要更詳細了解其差別和原理，可以參考此篇文章

6.Reordering 重新排序

以下class name 都要在parent元素，也就是在含有"row" class name的元素引用

• 反轉child元素的順序：.reverse

以下class name 都要在child元素，也就是在含有"row" class name的元素引用 另外下方 class name 的 "-" 後面 需加入對應的media query名稱（例如：.first-xs）

• 指定單一child元素為第一个項目：.first-
• 指定單一child元素為最後个項目：.last-

詳細的example和demo 官網裡已有詳細的demo可供參考Reordering和Reversing的部份

結語

看完後有沒有很心動，可以在完全不動css的情況下，就能完成大多數有Responsive 的網站排版，也不用去解決麻煩的浮動問題，不過在使用前，你還是得先考慮到瀏覽器間容性的問題，叫舊版本的瀏覽器是沒有支援Flex的，這點要注意，間容的問題，小弟認為'FlexBox grid是排版上的最佳選擇！ (如有不清楚或是不正確的地方，歡迎大大們交正和指教)