Flex 修煉時光屋

哈囉，我是穎旻！上個月有了一個新身份，就是我成為六角的助教了！如果有參與網頁切版直播課程的人應該會一直看到我的名字😂
看了將近一個月的作業後也看出一些心得來，於是想和你們分享在 Flex 的作業中一些小細節和技巧，也有助於大家最近開始做的任務唷，有興趣的話就繼續看下去摟～

排版的常見問題

先來講講在看 Flex 修煉時光屋的作業時發現很多人會有的主要問題

1. 把內容的高度寫死

.content {
   height: 798px;
}

（然後就可以看到各種很奇怪的數字

但不難想像大家這樣做的原因，因為設計稿會有明確的 px，所以很多人就會依照設計稿的數字去做設定，不是說這樣不對，只是不是每個地方都能這樣做，常常會看到的問題是將整塊內容的高度寫死，為了讓下方有多餘的空間來讓畫面和設計稿看起來一致，但其實那些應該留白的區域不是透過設定固定高度跑出來的，正確應該是用 margin 和 padding 做推移，除了內容撐開的高度外，能讓多餘的空間產生出來

但當大家學會不要寫死高度開始使用 margin 和 padding 做推移時，又會看到下方的程式碼

想用 margin 或 padding 把目標移到各種位置

.logo {
   padding: 224px 149px 267px;
}

有寫過這種奇怪數字的人可以自首XD 而且不難想像還為了要對準，使用 f12 的工具狂加數字

通常會這樣寫遇到比較多是希望讓目標可以置中（但置中的方法這麼多就是不要這樣用R😱） 剛剛第一點最後有說到使用 margin 和 padding 的時機是讓多餘的空間產生出來，不是為了讓目標推移到你想要的位置去，如果是這樣的寫法在日後學 RWD 的時候就會發現怎麼寫都會跑版，還要花時間重寫，所以可以多使用 flex 去做這些排版，不要用推移的方式做出排版的效果唷～

最後可能會出現第三種問題

我已經用 flex 做到置中，但是上下還是需要留白呀，那我可以寫死高度嗎？

不行！不行！不行！很重要所以說三次

這樣其實只是回到第一個問題而已XD 如果要留白就使用 margin 或 padding 做推移吧！詳細應用可以參考下方 關卡 2 雙欄排版 的細節分享，正確使用 flex 搭配 padding

2.濫用 div 標籤

在關卡 1、3、4、5、7、9、10，都是可以使用 ul li 排版的，其中在關卡 3、4、7、10 中都是選單，這邊大家都會記得要用 ul li 結構很棒～～但是在關卡 1、5、9 的排版方式大家就會忘記可以使用 ul li 取代 div，這部分就是可以訓練大家在看設計稿時就先想架構，漸漸就能寫出符合語意的程式碼了
另外還有遇到一種，知道要用 ul li 但外面又包了一層 div

<div class="card-list">
  <ul>
    <li>...</li>
    <li>...</li>
  </ul>
</div>

這樣使用 ul 在語意方面好像就沒什麼意義了，所以就會建議把 div 移除，然後把 class 屬性放在 ul 上。遵循標籤的語意化不但有利於網頁的 SEO，還有一個很大的優點就是讓過兩個月之後的你打開檔案還能看得出來自己當初在寫什麼。試想看看自己打開檔案後外層幾乎都是用 div 去包，於是只好透過 class 名稱推敲，會好好寫 class 名稱的人大概會出現像是 list 或 item 之類的字，但是如果還不太會命名的寫出來的就有各種可能，只會越看越混亂啊🤯🤯

這兩個問題是每天看作業時都會遇到的，其實在剛接觸網頁的人都一定寫過類似的程式碼（我自己也寫過哈哈哈），但透過老師和各位助教的指導就可以加速觀念的吸收，幫助各位寫出更棒的程式碼喔～～

關卡細節分享

看完常見問題後，大家應該都很有共鳴吧！！接著要來分享關卡 2～4 中你可能沒注意到的小細節

關卡 2 雙欄排版

在這關就可以呼應上方的兩個問題，看圖可以發現兩個重點

• 兩塊都有上下的留白空間
• 左邊區塊的內容要置中

這裡很多人會為了製造留白空間所以寫死高度，但是會比較建議在右邊的區塊使用 padding 去推

這時候可能會有人想問，為什麼是選擇只推右邊區塊？

先說明外層有使用 flex 讓兩塊並排，所以兩塊都會有等高的效果，然後因為右邊區塊的內容是文字，在文字使用 padding 的話可以確定文字間距是固定的，當上下都推出適當的高度後，左邊的區塊就會依照右邊的高度去做到等高，解決高度問題後，接下來就是左邊區塊的內容要置中

可以使用 flex 垂直水平置中的方法

display: flex;
justify-content: center;
align-items: center;

這裡可以參考葉子的範例程式碼，在關卡 8 也是使用類似的觀念

關卡 3 雙欄選單設計

這關想分享的是 menu 區塊 — 兩種置中方法

照理來說這塊因為是垂直排列，所以不會用到 flex，很多人會直接使用 text-align: center ，但有個問題是最後一個 li 不像前三個都是四個字，所以用 text-align: center 只有他不會呈現靠左對齊，為了讓 ul 整塊置中還要讓文字使用預設的靠左對齊 (不使用 center)，利用 flex 可以輕鬆做到

.menu {  
   display: flex;
   flex-direction: column;
   align-items: center;
}

不過也有不使用 flex 的置中方式

.menu ul {
   margin: 0 auto;  
   width: 50%;
}

關卡 4 表頭表尾設計

這關想分享的是上方的 menu 區塊 — 四個 a 連結產生間距的方法
這邊要注意的是

• .menu 可以靠內容和 padding 撐開，不要寫死高度
• 在 .menu 使用 flex-wrap:wrap 可以讓畫面縮小時不要跑版

Codepen 示範連結

第一種方式：設定 li 的寬度並在 a 標籤中使用 text-align:center
第二種方式：li+li 的方式，可以在每個 li 後面使用 margin-left 推移
第三種方式：在 a 標籤中使用 padding 把左右間距推開

學員作業分享

有學員提到說寫完後有再去參考別人的作業，但是量實在太多了不知道要看誰的比較好
所以我就來分享兩個我目前看完覺得寫得還不錯的作業，我會列出他們的優點給大家參考～

網頁連結

1.徐純純 （使用 pug + sass）
2.Alen Su

優點：

• flex 寫得不錯
• HTML 結構寫得不錯
• 命名有規劃
• 會把重複性高的 CSS 整理在一起
• 有做細節處理 例如：hover 樣式
• 畫面還原度高
• CSS 都有按照名稱順序排列，讓我在看作業的時候很方便對照 (感動)

另外也蠻喜歡學員針對我提供的建議給我一些回饋或再次發問，因為我給的建議不一定每次都是最正確的，如果能夠提供你為什麼這樣做的方法，我們或許可以討論出更好的寫法，這樣對我來說也可以學到不同的思維，在後面就能提供給其他學員參考了～

總結

如果還有其他關卡想看細節分享的，可以再留言告訴我喔～ 或是你有更好的想法也歡迎在 slack 上一起討論！

建議大家在開始寫之前可以先去參考已完成任務的人的作業建議，好處是可以避免去犯和其他人同樣的錯誤，這樣助教和老師可以更專注在其他細節上，或許能夠給你更多不同的建議哩

最後最後，切版直播班的第一週任務開始啦～幫大家加油！！希望這篇文章有幫助到你～