第二週｜Flex 、個人網站

# 第二週｜Flex 、個人網站 ## 本週練習 ### flex pirate 新手、老鳥關卡： ![](https://i.imgur.com/EHszYis.png =250x) ### flex 青蛙 ![](https://i.imgur.com/OkBYj2R.png =250x) 老鳥關卡後面的 * flex-basis、 * flex-shrink、 * flex-grow、 * align-content、 * align-self、 * order，都是第一次遇到(或不太熟悉），看了 W3Hexschool 的flex 系列文章： [flex-basis、flex-grow、flex-shrink 屬性介紹](https://w3c.hexschool.com/flexbox/9883b0fb) [align-content 屬性介紹](https://w3c.hexschool.com/flexbox/d0e569ef) [order 屬性介紹](https://w3c.hexschool.com/flexbox/4007bc24) [align-self 屬性介紹](https://w3c.hexschool.com/flexbox/c3847835) 順利闖關，不過還沒有在切版時實際應用到，還沒那麼熟悉 ## 版型練習 > [name=hsin-yu] [time=Mon, Apr 20, 2020 2:41 PM] 有用到 flex 的區塊 * banner ![](https://i.imgur.com/nWIajN3.png =400x) * about ![](https://i.imgur.com/3OIpI5Z.png =400x) * my brand(修改) ![](https://i.imgur.com/ivInq5V.png =400x) 原本是規劃上面的文字和中間圖片包一個 div 使用 `text-align:center` 置中，不過後來看了助教版型分享直播才發現原來是要在圖片使用 `flex-wrap: wrap` * other works ![](https://i.imgur.com/MjPXPnR.png =400x) ### 助教版型分享心得筆記 #### 助教分享(或自己觀察到）的方法： * 先看設計稿，觀察區塊、字型、字體大小、行高、區塊間隔（原來都是 8 的倍數，之前都沒注意到，只有注意到重複的間隔大小！？） * 把最常出現的一個字型、字體大小、行高可以先設定在 `body` * 間隔如 margin-bottom 的 class 命名，助教參考 bootstrap 用倍數命名 ``` .mb-3{ margin-bottom:24px; } ``` * flex 也可以獨立成一個 class * 使用 background-size : cover 讓圖片覆蓋整個區塊 * .container 置中，寬度會呈 1200px，是看設計稿中最寬的元素和兩邊的間隔，如本週設計稿最寬的作品列表與兩邊各間隔 360px，設計稿滿版寬度 1920-720 = 1200 ，因此置中容器寬度之後可以這樣找 ### 製作過程遇到的問題、解決過程 #### font-family 同時下在 `*{...}` 以及字型所在的地方才能正常顯示，只下在 `*{...}` 字型顯示不出來：搜尋 `font-family` 找到卡斯伯老師的文章： [font-family要怎麼玩](https://wcc723.github.io/css/2014/01/01/font-family/) 不過還是不知道問題如何解決，小組同學提供下在 `body`，嘗試了單下在 body 是可以的～後來也在 body 設定字型和行高，但某些字還是沒有顯示設定的樣式（按檢查發現字型和行高被劃掉），後來在 `body` 和 `*{...}` 都設定字型和行高全部正常顯示，目前還不知道為什麼更：原來`*{}` （全域設定）權重最小（權重＝0)，寫在 `<body> `(權重＝1)就有了 [Day20：小事之 CSS 權重 (css specificity)](https://ithelp.ithome.com.tw/articles/10196454) --- #### banner ( header)區塊，整段文字會比設計稿中的背景圖還要高後來聽了穎旻助教的版型分享，發現原來是少了 `background-size: cover`(背景圖覆蓋整個區塊），以及之前是直接寫死高度，後來取消高度改成用 padding 上下推，就和設計稿高度相同了～更：後來依照老師建議固定高度（因已使用 flex 水平垂直置中） --- #### other works 區塊，第一排 `ul `的圖片會高於背景 80 px ，原本嘗試的方法 ![](https://i.imgur.com/n7E95WK.png =600x) 原本是想使用 `position : absolute` 來讓 .container(包住全部圖片的 div : 寬度 1200px) 高一點不過在外層的背景好像會因為絕對定位的關係而沒有高度撐不出整張背景圖，試了好一段時間後來參考了編號 161 同學的作法使用 transform 屬性，在 `.container` 下 `transform : translateY(-80px)` ，就解決了！ (因上移80px，因此設計稿中背景圖下方間隔 160px ，用 `padding-bottom : 80px` 總間隔就是 160px) 記得在 about 區塊中有工作介紹文字前面需使用偽元素， ![](https://i.imgur.com/AFUtNup.png =600x) 也是參考小組同學，使用 transform 屬性去移動偽元素，好移動很多，位置看起來也蠻準確的～～再後來也看到其他同學的作業，用 `background-position: center 361px` 或 `background-position : center bottom` 移動背景圖，好像更簡單了 --- #### 背景圖相關設定原本因為把 background 相關屬性 ``` background-repeat: no-repeat background-size: cover background-position: center center ``` 都獨立一個 class 使用，但在區塊的 class 下 background 放圖片`background:url('...')` ，區塊的 class 和 background 屬性的 class 放在一起，但兩者都有寫到 background 屬性，導致後面的設定會蓋掉前面的設定，之後要注意這時候 background 不能把設定都寫在一起（只寫 `background:...`），要在分成 background-image 、background-repeat、background-size、background-position ，之前是把 background-image 簡寫成 background 而蓋到其他背景設定了更：後來把背景相關設定放回區塊的 class 了，沒有兩個獨立 class 衝突的問題了～ --- #### justify-content: space-between 交作業後觀看其他同學的作業突然想到設計稿中的作品列表忘記用 `justify-content: space-between` ，還一個一個用 margin-left 推間距 xd 之前還沒學 flex 都習慣這樣推了練習時直接下意識做完全沒注意到～ --- #### 參考老師、助教給其他同學的建議：新增 a:tel、a:mail，以區塊命名 class（原本都抽離成工具型 class)，原本抽離的 class 重複性不超過 2 次，改成不抽離 #### 看slack 同學討論才發現忘記加上圖片與`<p>`的間距調整間距、圖片調整成區塊元素、「here's」原設成偽元素改成 `<p>`、 `<h1>`加粗字重更改「Here's」字重 ### 老師建議： * 假使用 BEM，像是 title 的話也可以叫 .work__title * .banner 這裏既然用了 flex 來做水平垂直置中的話，那就不需要用 padding 來推擠，可在 banner 寫死高度，來達成水平垂直置中效果 * 有嘗試用工具類 class 這點不錯，例如 mb-2 ，但是要留意一點，這種的工具 class，通常是一個網站會有三到四處會用到再抽離比較好，請不要為了抽離而抽離。會建議你可以做第四、五、六、八關的作業，藉此評估在頁面變多時，你的模組化是否可以考量得更完善。 `關於 BEM 、工具類 class 使用時機、模組化，還需要多練習領悟一下～`

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.