CSS-Flexbox

發現很多人都在做這個相關主題, Flexbox部分我就濃縮為3天份的(1天遊戲1天應用1天source code)
今天先玩些小遊戲來實際先大概知道Flexbox在幹嘛吧~

1. 青蛙 http://flexboxfroggy.com/
2. 不喜歡打Code 歡迎使用 https://www.flexboxgame.com/
   (關於Webflow 這個工具- 歡迎參考我的另一系列鐵人挑戰- Webflow神器介紹)

玩玩這兩個遊戲, 大概可以知道:

• flexparent
  • justify-content:flex-start, flex-end, center, space-between, space-around
  • align-items:flex-start,flex-end,center, stretch, baseline 決定物件怎麼放在線上
  • align-content:flex-start, flex-end, center, space-between, space-around,stretch 決定線怎麼放
  • flex-direction:row, row-reverse, column, column-reverse
  • !!! flex-wrap nowrap,wrap, wrap-reverse
• flexchild
  • order default= 0 小的前面大的後面
  • align-self 個人版的align-items
• 補充
  • The two properties flex-direction and flex-wrap are used so often together that the shorthand property flex-flow was created to combine them.
  • Notice that when the flex direction is a column, justify-content changes to the vertical and align-items to the horizontal.

發現這個教學網站 http://flexbox.io/
是由國外有名教學大師Wes Bos 做的
(他有製作React跟ES6, 我有買ES6課程但都沒有看,希望可以藉由這個鐵人賽把它看完)

晚上開始上他的課, 明天開始讀Source code :)
先去讀其他人的文章囉 <3

計畫更動
昨晚瀏覽了其他鐵人們的文章, 發現有些與我的方向類似,包含Flexbox,心法,Vue.js等
故想要藉由follow一些文章取代自己重新寫一份避免重複,也能同時更專注在別人沒有提到的部分
讓整體更全面
感謝所有鐵友跟前輩們, 自己也會努力跟上

我的Follow list:

• CSS
  • CSS Flexbox 從入門到進階
  • CSS 實戰心法
  • 前端UI軍火庫
• JS
  • 實作小範例入門 Vue & Vuex 2.0
  • Vue.JS且戰且飛
  • 30天學會Vue.js

學習方法:
每天Follow上述文章, 並想辦法與之互動 (自己跟著Demo一次,問問題等)