[Hexschool Web Layout Training] — Week_2 Flexbox 網頁排版術
Introduction & 前言
緊接著來到第二週的直播課程了，拖到了週日才練習作業跟寫部落格，絕對不是因為自己愛玩（誤
這週的直播其實有點卡，不知道是不是 Zoom 太多人導致還是其他原因，總之最後到了今天才看重播影片。
這週的重頭戲就是常常聽到的 Flex 了！
Summary & 摘要
*本篇文章將會以三個角度來紀錄， 課程心得(上課後的心得整理)、練習心得(做完作業後的心得整理)) 及 **小組任務(每週會有一項小組任務，寫完後的心得)*。
每週的練習挑戰和地下城有點像，都有自己必須練習到的地方；本週需要練習的目標有至少兩點以上的練習菜單，及額外的一項打字練習。
關卡目標
背景處理
了解 Flex 排版技術
理解 inline、block、Flex 的使用時機
不要亂加語法買保險
課程心得
第二週的直播課程開跑，這週主題為 Flex，但本篇不會過多的著墨在介紹，因為之前在直播課程開始前有個切版練習就是要使用 Flex，詳細可參考此篇文章。
校長在課程上講到了幾個網站，並且實際的用 Skitch 預先切圖看怎麼排版，其中提到了，雖然 Flex 好用，但是千萬不要因為好像就隨意下 Flex，有些地方可以下 text-align: center; 就不要在另外下 Flex 了！
這就叫做 不要亂加語法買保險
練習心得
本次練習一樣使用 emmet 來寫，對於需要常常寫道諸如 justify-content: space-between;, align-items: center;… 等等 這種漏漏長的語法真的節省超多時間，還不會的朋友推薦你一定要盡快入坑使用啊！
整體切版 Flex 使用上沒有大礙，只是排版是不是要多塞一個 Div 或是該不該把 CSS 抽離出來下個別的 Class Name，這邊都還是需要另外做練習。
小組任務
本週小組任務有三個：
任務一 - 玩 Flexbox 遊戲
之前記得在六角的 Slick 就有釋出過海盜船遊戲，那時候有試著玩了幾關，但沒有去玩排名模式，對於不會或不熟的朋友真的非常推薦可以使用海盜船遊戲。
這邊挑選海盜船來遊玩，青蛙之前也有玩過，聽說海盜船是以青蛙為藍本做出來的遊戲，兩個都可以挑來玩看看。
任務二 - 幫實習生復原完美六角 LOGO
修改限制
- 可以修改 HTML li 裡面的圖片路徑
- CSS 只能在既有的 ul 與 img 標籤加上語法，不能額外加上選擇器
解答
先替 ul 加上 flex-wrap: wrap; 才不會擠在同一行，接著把第二第三張圖片互換，最後在替 img 加上 display: block; 清掉多餘的 2px-3px。
解答傳送門：點我
任務三 - 討論第二週版型該怎麼做
小組討論為週二，待週二討論完後補上！
Conclusion & 結論
這次直播好像滿多人都說很卡，聽說校長下週要開兩個直播平台直播，只希望別再這麼卡了。
這週有點像是複習自己的 Flex，但是最基礎往往最致命也是最關鍵，寫完這週練習後有去看過幾個同學的程式碼，突然發現自己還是需要很大的加油啊ＱＱＱ。
這篇沒有提到太多的 Flex 使用方法，如果想知道可以參考我的前幾篇文章 -> [CSS Notes] - 第一次 Flex 就上手
Demo & 成果程式碼
Source Code：點我
Demo：點我