七龍珠想必是大家童年的共同回憶吧

不過今天的文章跟七龍珠的精神時光屋無關，
是要講之前六角學院所開設的「Flex 修煉時光屋」啦XD

然後那個... 這邊小的先致歉一下orz
因為今日狀況欠安orz 所以今日是分享之前複習 Flex 手感的記錄，
畢竟是團體參賽，我不能因為我一人害全團團滅orz
等到我之後狀況好一定會依照這個再重新挑戰一次的orz

正片開始

之前的文章有提到，Flex 觀念複習完，
剛好六角的洧杰老師剛好開了「Flex 前端修煉精神時光屋」這個 DLC，
所以我就很高興的用這個 DLC 來練 Flex 排版。
(PS. 「Flex 前端修煉精神時光屋」要註冊 六角學院-程式勇者村 才能承接該任務，
所以這邊就不附上連結了，有興趣的可以自行搜尋XD)

那時候有 10 道關卡，關卡、程式碼、挑戰時間如下：

1. 並排卡片/ 挑戰時間：20 min
   https://codepen.io/misado/pen/rNVQvNW
2. 雙欄排版/ 挑戰時間：10 min
   https://codepen.io/misado/pen/eYNQrmd
3. 雙欄選單設計/ 挑戰時間：30 min
   https://codepen.io/misado/pen/qBdQYOp
4. 表頭表尾設計/ 挑戰時間：20 min
   https://codepen.io/misado/pen/vYOQjLz
5. 常見三種排版/ 挑戰時間：30 min
   https://codepen.io/misado/pen/qBdQeXo
6. 圖文並排/ 挑戰時間：20 min
   https://codepen.io/misado/pen/yLNQmxg
7. 首頁橫幅排版/ 挑戰時間：20 min
   https://codepen.io/misado/pen/ZEGVzvj
8. 圖文並排設計/ 挑戰時間：10 min
   https://codepen.io/misado/pen/RwPEbJa
9. 訂單明細/ 挑戰時間：20 min
   https://codepen.io/misado/pen/ZEGVEbP
10. 產品列表/ 挑戰時間：60 min
    https://codepen.io/misado/pen/gOpZOjz

這邊分享一下當初的挑戰心得：

1. 看到版型不要急著直接動手，要先畫圖，大概知道每個元素的安排，再開始動工。
   (當然如果你已經熟到爐火純青的地步，可以不用先畫圖，那也 OK )
2. 使用 Flex 很常犯一個錯(也不算犯錯，就是做了多餘的動作而已)，
   網頁預設就是由上到下排列，
   因此如果是上到下排列的版型，
   不需要再加 flex-direction: column來做排版。
3. 英文假字有 lorem 可以用，那中文呢？
   還好有大大出了中文的亂數假文產生器XD
   http://www.richyli.com/tool/loremipsum/

今日的分享就到這裡，
歡迎有興趣的大大也一起來挑戰XD
(我之後一定會重新挑戰一遍的！！！)