章節連結
第二週的重點主要放在 Flex 的版型運用。從基礎的配置開始,到如何分析一張設計圖的架構,進而切出符合設計稿樣式的結果,是這一週的重點。同時,為了加速開發和熟悉流程,運用 Emmet 和一些視覺化結果的網站,可以讓新手更快上手。

第二週課程重點
基礎知識
Flex 是有內外容器之分,其影響力只有一層。
決定軸線: flex-direction
主軸對齊:justify-content
換行:flex-wrap
交錯軸對齊:align-item
經驗談
不只有 div 可以用
ul li 也是可以用的架構,可以避免掉多餘的 div。
Flex 裡面可以用 Flex
承接上面,你可以一層包一層
移除多餘的語法
如果有多餘的語法,反倒造成維護上的困難,也不曉得效果的產生是由哪一些程式碼發動的
切版練習結果
相關文章
按讚加入粉絲團延伸閱讀
- [筆記] AlphaCamp 不只是刷題的 Leetcode 訓練營 – 5
- [筆記] jQuery 搭配 Async / Await 一同使用
- [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 8
- [筆記] GoFullPage 好用的 Google Chrome 擷取需要捲動的瀏覽器視窗範圍
- [指南] Amazon Amplify 初探 – 佈署一個結合身分認證的 Vue.js 應用
GA瀏覽人氣:40