---
# System prepended metadata

title: 第二週 - Flexbox 網頁排版術
tags: [網頁切版直播班 - 2023 夏季班]

---




* 記得錄影
* 感謝作業討論頻道與大群討論伙伴
* Flex 教學 - **重點會放在要在哪裡下對 display: flex**
* 透過 Flex 進行水平與垂直置中
* 常見實務觀念分享、[Flex emmet](https://docs.emmet.io/cheat-sheet/)
* [迷因](https://hackmd.io/EqPXEE71TXO_wvx9ivzKgg)
* 公布第三、四週設計稿，分享第一屆眼鏡官網設計稿
* 有趣討論
    * [li 的 class 使用](https://discord.com/channels/801807326054055996/1128620805589319720)
    * [git 導致資料都刪除](https://discord.com/channels/801807326054055996/1128172728915066880)
    * [專題討論](https://discord.com/channels/801807326054055996/1113760214999650336)

## 校長語錄
> 不與他人比較，專注跟過去的自己比較


## Flex 教學(上) 
* container 介紹，直接寫個小範例
    * 口訣1：內元件要有效果，就要在外容器加上 display:flex
    * 口訣2：每個 HTML 標籤，能同時擁有內元件跟外容器身份
* Flex 主軸與交錯軸觀念([測試工具](https://codepen.io/peiqun/pen/WYzzYX))
* 容器
    * <span style="color:red">1.紅(外容器)：container</span> 
    * <span style="color:blue">2.藍(內元件)：item</span> 
    * <span style="color:purple">3.粉紅(內元件+外容器特性)</span> 
    * <span style="color:black">4.黑(一般元素)：無 flex 效果</span>


`老師個人註記：#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](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-content)

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

## 網站範例觀看
* [Apple - justify-content](https://www.apple.com/tw/shop/buy-mac/macbook-pro/16-%E5%90%8B)
* [IT 邦幫忙](https://ithelp.ithome.com.tw/)
* [taiwan can help](https://taiwancanhelp.us/)


## Flex 教學(下) - 垂直與水平置中
* 交錯軸對齊：align-items，畫四張圖軸線圖解釋
* Flex 裡還可以包 Flex
    * [時光屋範例 Jason Wang](https://codepen.io/JW750625/pen/oNXQyWK)
    * [hexschool](https://www.hexschool.com/)
> 富不過三代，無法到第三層

## Flex 補充資源
* [圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)
* [卡斯伯完整 Flex 影音教學(40分鐘)](https://www.youtube.com/watch?v=lmBM7_OTDBQ)





## 常見實務觀念分享
* 不要亂加語法買保險

## 第二週主線任務(只能用 GitHub Pages 提交)

* <a href="https://rpg.hexschool.com/training/36/task?type=detail&id=347" target="_top">第二週 - 個人網頁</a>、[圖片下載(2023week2)](https://github.com/hexschool/2022-web-layout-training)


備註一：可觀看 [作業設計稿 -  線上預覽操作教學](https://hackmd.io/MHtEdMRuT_G1A3yogcvLtw?view)



> 此主線任務在一天內完成算合格
> 一小時內完成算超乎水準，熟練度很高

## 週末任務(贈書)
1. 第二週週末任務(60分鐘，抽１本書)
    * 可先將 HTML、CSS(也加入 CSS Reset﹑環境提前) 檔案建立好，
2. 到此 [Discord](https://discord.com/channels/801807326054055996/1113642862920335420/1129229218438451221) 討論串回報戰果，YT 設為不公開


## 第三、四週主線任務
* [Adobe XD 設計稿觀看教學](https://hackmd.io/ZPDwcPmdSCyWRakoqZuWLA)
* 提前提供[設計稿](https://xd.adobe.com/view/5b20cbc4-5c64-4b67-814e-633b078a8cd4-0e73/grid/)
* 第三週只要做首頁 RWD
    * LV1：只做 header 與 footer 的 RWD
    * LV2：任選一頁，僅做 PC 版型
    * LV3：任選一頁，需含RWD
    * LV4：做二~三頁以上的 RWD
    * LV5：所有頁面都有設計
* 第四週
    * LV1：任選二頁含RWD
    * LV2：做三頁以上含 RWD
    * LV3：所有頁面都有設計