這週開始有點難度了，但如果有認真看過課前釋出的flex影片，就可以很快跟上進度，這週的小組任務很可愛，要玩兩個flex的遊戲 Flex pirate 還有 Flex 青蛙，玩到後面真的有點小困難，需要思考一下才有辦法過關！上週開始有再練習英打速度，一開始真的很卡，但是連續練習三天就有點順起來，但是又遇到假日就又怠惰了QQ，預計本週每天都要練阿~

第二週 - Flexbox 網頁排版術

本週訓練菜單

• 1.1 做當週關卡作業，吸收當週教授觀念
• 1.3 將本週教授內容寫成部落格，以加深程式觀念
• 1.4 自主學習新語法，並寫成筆記
• 2.1 熟悉三個編輯器熱鍵，熱鍵中文表 熱鍵中文表
• 2.2 幾乎全程使用 emmet 來開發 emmet 開發
• 3.1 透過 keybr.com 練習英打，目前分數超級低，預計每天都要練習10min
• 3.2 刻意練習 emmet 與常見英文命名鍵位

Mac 熱鍵鍵盤符號

• ⌘ == Command
• ⇧ == Shift
• ⇪ == Caps Lock
• ⌥ == Option
• ⌃ == Control
• ↩ == Return/Enter
• ⌫ == Delete
• ⌦ == 向前删除键（Fn+Delete）
• ↑ == 上箭頭
• ↓ == 下箭頭
• ← == 左箭頭
• → == 右箭頭
• ⇞ == Page Up（Fn+↑）
• ⇟ == Page Down（Fn+↓）
• Home == Fn + ←
• End == Fn + →
• ⇥ == 右 Tab
• ⇤ == 左 Shift+Tab
• ⎋ == Escape (Esc)

flex 觀念

• display: flex
• container 介紹
  • 外容器加上 display:flex 控制內元件
  • flex 可以再包 flex
• Flex 主軸與交錯軸觀念(測試工具)
• 容器
  • 外容器：container
  • 內元件：item

常見語法

• Flex 起手式：在外容器加上 display : flex ; 預設值為 flex-direction :row;

• 決定主軸線：flex-direction

  • 1.row 水平
  • 2.row-reverse 水平反序
  • 3.column 垂直
  • 4.column-reverse 垂直反序

• 主軸對齊：justify-content

  • 1.flex-start 靠起點對齊
  • 2.center 置中
  • 3.flex-end 靠終點對齊
  • 4.space-between 平均分配內容元素，左右元素貼齊
  • 5.space-around 平均分配內容元素，間距平均分配
  • 6.space-evenly

• 換行屬性：flex-wrap

  • 1.nowrap 不換行
  • 2.wrap 換行

• 交錯軸對齊：align-item

  • 1.flex-start 靠起點對齊
  • 2.center 置中
  • 3.flex-end 靠終點對齊
  • 4.stretch 將內容元素全部撐開至 Flexbox 的高度
  • 5.baseline 所有內容元素的基線作為對齊標準

Flex emmet

本週小節

• 主軸&交錯軸的觀念
• flex 不要濫用
• flex 要下對地方
• flex 排版技術
• 運用 flex emmet

補充資源

• flex測試工具01
• flex測試工具01
• flex測試工具02
• 圖解：CSS Flex 屬性一點也不難
• 卡斯伯完整 Flex 影音教學(40分鐘)

第二週主線任務

• 第二週-個人網站
• source code

第二週每日任務

• 10/26
• 10/27
• 10/28
• 10/29
• 10/30

第二週小組任務

• Flex pirate 新手關卡
• Flex 青蛙