[POST] flexbox reading list

The Flexbox Reading List: Techniques and Tools

By Cosima Mielke, Feb 23rd, 2016 https://www.smashingmagazine.com/2016/02/the-flexbox-reading-list/

重量級文章雖然內容沒講到什麼 flexbox 的技術但是這文章是篇指路文鉅細地介紹目前各熱門文章在講什麼非常有閱讀價值

Using Flexbox today

by Chris Wrigh, Jan 25, 2015 https://chriswrightdesign.com/experiments/using-flexbox-today/ …

以兩種 layout 樣式逐步地示範 flexbox 怎麼玩，跟提一下當時的 bug~

card layout
split layout\

Solved by Flexbox

Cleaner, hack-free CSS https://philipwalton.github.io/solved-by-flexbox/

github repo: https://github.com/philipwalton/solved-by-flexbox

主要是 demo 如何使用 flexbox 來處理傳統 CSS 常見佈局

Grid system
Holy Grail (多欄等高、聖杯佈局)
input group，自動分散對齊的 input 輸入框
media object，超泛用的排版方式
sticky footer，少量內容時可以讓 footer 黏在頁尾
垂直置中

這邊它的 CSS naming 是採用 SUIT component 式的命名法，不錯~ 特別值得去學習的有 grid 的 gutter、跟 fixed width grid media layout 在處理 reverse 還蠻趣味的，它的命名都還蠻清晰的，理解起來應該不會太難主要寫法記得看頁尾的 code block 比較準；devtool 裡的有時它會另外塞些多餘的 code~

Quantity Ordering With CSS

By Drew Minns, July 14th, 2015 https://www.smashingmagazine.com/2015/07/quantity-ordering-with-css/#quantity-queries

這篇主要是在講怎麼用 quantity query 來控制選擇 CSS 的項目

Playing With Flexbox and Quantity Queries

by Aaron Gustafson, 26 March 2015 https://www.aaron-gustafson.com/notebook/playing-with-flexbox-and-quantity-queries/

上一個 Quantity Ordering 主要是要用在這邊是拿來控制 grid gutter & breakpoint 的寬度變化這邊用的方法之前應該有看過了~

codepen demo: http://codepen.io/aarongustafson/pen/VYRZBP

(( 重點是要處理之前先把圖畫好，不然超容易搞混的 XDD

Flexbox Grid Finesse

by Heydonworks, 5 Dec 2015 http://www.heydonworks.com/article/flexbox-grid-finesse#dealing-with-remainders-of-1

這篇則是應用上面那兩個 quantity query 來處理一些極端特殊狀況：作者想避免最後一行的 grid 是孤兒而搞了一堆 CSS query 在處理之前自己有 fork 回來，把他的 CSS 調整成參數化的 SCSS http://codepen.io/Rplus/pen/KVgKVg

這技巧太偏門了，就算改成公式解也很難通用，慎用。

Useful Flexbox Technique: Alignment Shifting Wrapping

by CHRIS COYIER // JUNE 19, 2015 https://css-tricks.com/useful-flexbox-technique-alignment-shifting-wrapping/

這篇很簡單，就是用非預設值的 flex-grow 來填滿整個剩餘空間的技巧~

Flexbox’s Best-Kept Secret

by Sam Provenza, Nov 19, 2015 https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6#.byxqvyhah

這篇前幾天有挖到用 margin: auto 來擠出一個神秘的剩餘空間跟上則 flex-grow 比較不一樣的是 box-model 的位置~ 可應用的地方非常多

Star Rating Re-imagined with Flexbox

by Zell Liew, 4th February, 2016 http://zellwk.com/blog/star-rating/

這則則是應用 reversed 的 flex-flow 來達到大多數的星評效果混合 :hover, :hover ~ .class, :hover .class 這幾個狀態來覆寫出 active 的樣式~

好懷念~ 我也用純 CSS 刻過一樣的東西 XDD 應該是可以再簡化一點~ 也不是必定要用到 flexbox 的 reverse : P

Flexbugs

https://github.com/philipwalton/flexbugs

flexbox 有 bug ? 來這邊找就對了！沒找到就快開一個 issue ~~

flexibility `flexbox polyfill`

Use flexbox while supporting older Internet Explorers

https://github.com/10up/flexibility

讓你的 IE8 跟 IE9 也能把 flexbox 乖乖吞下去的神奇 polyfill XDD

因為要在 CSS 上加特殊的標記 -js-display: flex; 可以搭配 postCSS 的 plugin: PostCSS Flexibility 來輔助完成 https://github.com/7rulnik/postcss-flexibility

不直接吃 display: flex 應該是因為每家都不太一樣，乾脆特化一個比較好辨識

花了一個小時在看文章再花一個小時寫這一篇。。。

end.

Rplus / rplus.github.io