第二週 - Flexbox 網頁排版術

--- tags: 網頁切版直播班 - 2022 夏季班 --- # 第二週 - Flexbox 網頁排版術 * 記得錄影 * [第二週 discord 討論大廳](https://discord.com/channels/801807326054055996/979753991716094032/997067891998478406) * [更新了哪幾部影片？](https://courses.hexschool.com/courses/enrolled/1794551) * 感謝志工上時間軸與大群討論伙伴 * [kata 小組紀錄](https://rpg.hexschool.com/training/30/show?embed=https://docs.google.com/spreadsheets/d/1657GUEEFNQLqxpt9mtKsmcHAnRi30NtOZ3VLs54AhSM/edit#gid=982233007) * [kata discord 回饋](https://discord.com/channels/801807326054055996/979753991716094032/994441328500940863) * Flex 教學 - **重點會放在要在哪裡下對 display: flex** * 透過 Flex 進行水平與垂直置中 * 常見實務觀念分享、[Flex emmet](https://docs.emmet.io/cheat-sheet/) * [迷因](https://hackmd.io/EqPXEE71TXO_wvx9ivzKgg) * 公布第三、四週設計稿，分享第一屆眼鏡官網設計稿 ## 校長語錄 > 不與他人比較，專注跟過去的自己比較 ## Flex 教學(上) * container 介紹，直接寫個小範例 * 口訣1：內元件要有效果，就要在外容器加上 display:flex * 口訣2：每個 HTML 標籤，能同時擁有內元件跟外容器身份 * Flex 主軸與交錯軸觀念([測試工具](https://codepen.io/peiqun/pen/WYzzYX)) * 容器 * 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](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/30/task?type=detail&id=300" target="_top">第二週 - 個人網頁</a>、[圖片下載](https://github.com/hexschool/2022-web-layout-training) 備註一：可觀看 [作業設計稿 - 線上預覽操作教學](https://hackmd.io/J7ajdobzTlyideAARTLz5Q?view) > 此主線任務在一天內完成算合格 > 一小時內完成算超乎水準，熟練度很高 ## 週末任務(贈書) 1. 第二週週末任務(30分鐘，前3本) * 可先將 HTML、CSS(也加入 CSS Reset) 檔案建立好， 2. 到此 [Discord](https://discord.com/channels/801807326054055996/979753991716094032/997066693232828416) 討論串回報戰果，YT 設為不公開 2. 提供範例給學員參考 ## 分享專題 * [專題審核流程](https://whimsical.com/SvNK5BLub7iXMDhDaKPmU7)、[影片講解](https://courses.hexschool.com/courses/20201122/lectures/41285375?preview=logged_in) * [Notion 專題作品表格](https://www.notion.so/2022-b1d0ca007b414c3dba32cb7588b999ff) ## 第三、四週主線任務 * 提前提供[設計稿](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：所有頁面都有設計