Week02-Flexbox 網頁排版術

這個禮拜切版直播班的主題是期待已久的 Flex !!!

以前在學 float 跟 flex 都傻傻分不清楚，透過直播班還沒開課之前老師釋出的「Flex 精神時光屋」的教學與練習，幫助我釐清複雜的 Flex ~~

學會 Flex 真的讓排版更輕鬆，省掉 margin 、 padding 推來推去的麻煩!

這次切版直播班老師帶我們看了很多網頁的範例，透過互動回答也幫助我複習了 flex ，對 flex 的使用也更了解。

Flex 外容器 & 內元件

• 外容器 container (藍色)
• 內元件 item (紅色)

口訣1：內元件要有效果，就要在外容器加上 display:flex
口訣2：每個 HTML 標籤，能同時擁有內元件跟外容器身份

使用 flex 時候，要下在「父層」也就是外容器。

外容器常用語法 ( 下在外容器 )

• 決定軸線：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
  

這次老師帶我們看了很多網站排版範例，其中印象最深刻的就是 Taiwan Can Help 這個網站，設計得真的很有質感!

範例互動中，也更釐清 flex 中還可以有 flex !!!

• 外容器 container (藍色)
• 內元件 item (紅色)
• 內元件+外容器特性 (紫色)

flex 中還有 flex 的範例是我之前最容易搞混的地方，這次上課、練習有把這個觀念補起來!

老師補充實務觀念

• 不要亂加語法買保險
• class 命名要語意化
• 試著用小駝峰寫 class 命名

Week 02 作業

Week 02 個人網頁

這次的作業有很多練習 flex 排版的地方，剛好也可以加強練習。

本周訓練菜單:

• 網頁排版縮排
• 將本週教授內容寫成部落格，以加深程式觀念
• 透過 keybr.com 練習英打
• 小駝峰寫法
• 命名習慣，盡量採語意設計