工程師轉職的路上，靈魂不小心跌入充滿 code 的洪流裡 . . .
切版之神：「請問你掉的是 Flexbox 還是 Grid ？」
我：「喔沒欸...我不會切版。」
切版之神：「你很誠實，現在 Flexbox 和 Grid 都是你的了！」
然後我就會切版了，比 XX 天學會網頁切版還快呢！
（以上純屬夢境請醒醒）
在我還在轉職的過程中，遇到不少一同奮戰的朋友，在切版時因為對 Flexbox 等排版方式都一直搞不太定，看了他們的 code 後發現原來同學們只是不了解屬性的背後在幹嘛，所以想藉此機會寫文章，讓自己了解及熟讀屬性的特性，同時透過筆記分享自己的學習過程（順便撈一下我那個還在河裡的 Grid ???）。如果你掉的是 Flexbox 和 Grid 的切版屬性，接下來的文章也許多少對你有些幫助。
另外，我其實也還是個剛成功轉職的超級菜鳥，進入一間新創公司不到一個月，在前端的各方面的理解很多可能還不夠深入，所以此次比賽文章可能還沒辦法提供太多切版上的經驗談；如果文章內容裡有什麼錯誤的地方，還請各位大大多多指教，謝謝。
主要重心： 著重在 flexbox 和 Grid 屬性上的了解、發現屬性的特色
主要來源： CSS大全 第四版、MDN、W3C
寫作方式： 筆記敘述式（我高興怎麼寫就怎麼寫，有不順或忘記的地方請見諒 XD）
建議rrr： 實作的部分可能還是要各位自己玩玩看各個屬性才會比較清楚喔！
| 天數 | 標題 |
|---|---|
| Day01 | 請問你掉的是 Flexbox 還是 Grid ？ |
| Day02 | 你知道什麼是 W3C 嗎？ |
| Day03 | 你可能不知道的切版歷史 |
| Day04 | Flexbox 基本認識 |
| Day05 | Flexbox 彈性容器 |
| Day06 | 軸向概念 / flex-direction |
| Day07 | flex-wrap 換行 / flex-flow |
| Day08 | flexbox justify-content |
| Day09 | flexbox align-content |
| Day10 | flexbox align-items |
| Day11 | Flexbox 彈性項目 |
| Day12 | flexbox align-self |
| Day13 | flex 屬性: flex-grow |
| Day14 | flex 屬性: flex-shrink |
| Day15 | flex 屬性: flex-basis |
| Day16 | flexbox order 順序 |
| Day17 | Grid 基本認識 |
| Day18 | Grid 網格容器 |
| Day19 | grid-template 屬性之 rows/columns |
| Day20 | grid-template 屬性之 areas |
| Day21 | grid-auto 屬性之 flow |
| Day22 | grid-auto 屬性之 rows/columns |
| Day23 | grid 縮寫 |
| Day24 | grid gap 相關屬性 |
| Day25 | grid 容器對齊屬性 |
| Day26 | Grid 網格項目 |
| Day27 | grid-row-start / grid-row-end + grid-column-start / grid-column-end |
| Day28 | grid-row / grid-column + grid-area |
| Day29 | grid 項目對齊屬性 |
| Day30 | grid z-index 分層 / order 順序 |
第一次參賽也很臨時，不像大家都為屯很多貨（我相信一定有人為了參賽在開賽前就全部寫完了），老實說我剛開始對自己真的很沒有把握，原本的我大概是個只知道 flex 可以用 justify-content 和 align-items 都用 center 可以置中的笨蛋，一方面要開始適應新工作，另一方面又要閱讀及編寫文章，真是忙到一個不亦樂乎（？到後來連圖片都沒什麼在放了。
不過每每從舊有的東西中發現新的概念時，我腦袋中奇怪的知識又增加了（？，我也在工作上應用起了我所學到的東西，不論是 flexbox 還是 grid 甚至式其它所學的東西，切版速度也快了很多，這或許就是寫作的精隨吧，我們不是要得到什麼獎，「我們要跟著程式一起成長」。
不錯的資源就集中在這裡吧。
css
flexbox
grid
iThome鐵人賽
看影片追技術