第二週 - FLEXBOX 多欄式排版全攻略

開課提醒

1. 錄影
2. 抽獎、小組任務一

子恆
y...
ninii傳教士
Amy(咂摳)
白白
Ariel Yao

作業+任務突破 2000 份啦！！

1. 有程式碼批改會優先回饋
2. 小節作業盡可能在七天內批改完畢
3. 證書任務盡可能在七天內批改完畢
4. 報到任務會在 14 天內批改完畢

Flex 介紹

• display: flex
• 外容器和內元件
  

校長語錄

不與他人比較，專注跟過去的自己比較

Flex 教學(上)

• container 介紹，直接寫個小範例
  • 口訣1：內元件要有效果，就要在外容器加上 display:flex
  • 口訣2：每個 HTML 標籤，能同時擁有內元件跟外容器身份
• Flex 主軸與交錯軸觀念(測試工具)
• 容器
  • 1.紅(外容器)：container
  • 2.藍(內元件)：item
  • 3.粉紅(內元件+外容器特性)
  • 4.黑(一般元素)：無 flex 效果

老師個人註記：#004466 #00ffa2

外容器常用語法

• 決定軸線：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(預設)
  • 5.baseline

• 交錯軸多行對齊屬性：align-content

• 設計一個六角小官網(區塊元素+Flex 練習 Section 練習)

網站範例觀看

• Apple - justify-content
• 嘖嘖

中場休息

1. 小組任務一抽獎：3本
2. 講解線下網友見面會 - 建議想做自己作品的學員再來，也會提供線上場
3. 分組部分
   • 如果一組內有 3 人願意討論，並有約線上一天的討論那建議就繼續經營，例如可約一起看完哪些影音課程後再討論，也會比較有動力
   • 假使這週期間，一組內只有 2 個人零星討論，組員討論有共識後，可到大廳申請併組，找更多的戰友
     申請併組時，可分享你們小組目前學習程度、每週的哪一天進行線上討論

Flex 教學(下) - 垂直與水平置中

• 交錯軸對齊：align-items，畫四張圖軸線圖解釋
• Flex 裡還可以包 Flex
  • 時光屋範例 Jason Wang
  • hexschool

富不過三代，無法到第三層

主線任務一講解

1. 切版任務作業一 - 個人品牌網站 - 開發經驗卡片設計
2. 分享小組任務

卡斯伯進修諮詢

每週日的早上 10:00-12:00，我想跟大家分享接下來的課程
如果你喜歡這種團體的培訓形式，歡迎線上預約參加
因為現場我想盡可能回覆同學們各種問題，例如：

方案一：團體諮詢：

日期：5/12(日)、5/19(日)、5/26(日) 自選一天
時間：週日早上 10 點開始
人數：限量 20 人
地點：線上（申請後會收到諮詢連結）

https://calendly.com/hexschool/2024-new-hexschool-course

方案二：個人諮詢：如果想要談的內容，比較偏向個人的（職涯、學習方法、其他問題等…）

可以先填寫個人資訊後，即可預約諮詢（填寫個人資訊以便我們更快認識你）
時間：每週二多個時段，每個人獨立申請

https://hex.school/LjUzS

Flex 補充資源

• 圖解：CSS Flex 屬性一點也不難
• 卡斯伯完整 Flex 影音教學(40分鐘)

Flex 補充資源

• 圖解：CSS Flex 屬性一點也不難
• Flexbox Froggy
• Flexbox 海盜
• Flexbox Codepen