您在這裡

比Boostrap更狂更屌炸天的排版框架「FlexBoxGrid」

前言

相信大多數人對Boostrap一定不陌生,他提供了一套CSS framework的可以讓我們輕鬆引入他所自訂的grid system,可以解決各種Responsive的網頁排版,但Boostrap還存有浮動這個麻煩的問題,而我現在要提的FlexBox grid,他有擁有酷似Boostrap的grid system,而且還整合了Css3的 FlexFlex 有多厲害,想必大家都有所耳聞,不只不用去煩惱清除浮動問題,且 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可供參考AlignmentDistribution的部份

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

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可供參考ReorderingReversing的部份

結語

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

文章標籤: