ASong
[工作日誌 J] 前端工程師:第七週 (5/24-5/28)

這週是 WFH 第三週,開始覺得有些乏力也開始覺得有些適應,總體來說算是稍微放慢了步伐去察覺自己的狀態,雖然衝勁減弱了,但可能很多細微的東西也是需要慢下來才看得清楚吧?一直覺得自己有在進步,但不知道對於主管來說我進步的夠不夠快呢?自從線上化工作以後,少了很多軟性的對話,我很難得到一些非正式場合的回饋跟閒聊,一切只能靠自己揣摩以及跟上腳步。

週六的時候切版切到快瘋掉,然後又想起主管一直跟我說他朋友不是工程師,上過六角學院 Vue 直播班都比我強,我就他媽氣不過直接給他六角學院切版直播班買下去(刷勒去),不過基本上七月開始也是緩不濟急啦,然後跟洧杰請教工作上要怎麼進步,他有跟我提到問問題比較好的方式,急性子的我馬上插話,這些理論我早就看過讀過消化過無數次啦,公司的同仁也一直教我這些,很感謝大家的善意,多少還是有幫助啦!不過後來洧杰點出的我覺得才是重點,重點就是你要問得讓被問的人爽,此題無解需要時間去了解他人的毛,超有建設性的結論!(然後洧杰直接把我拉入六角群組,介紹幾位前輩給我認識讓我隨時可以請教交流,此時我真的眼光快泛淚,彷彿看到一個教育工作者的愛呀。)



聊聊本週的學習吧,依然是在求救中成長,但週六把切版工作順利完成了還是讓我很有成就感,感覺又多懂了一些。

其實翻開之前百日轉職工程師的連載 百日轉職前端工程師:第六週前端基礎 CSS《DAY 13》,最關鍵的 Flexbox 我都整理得清清楚楚的,但是沒有實際操作過果然還是沒辦法應用,但現在回過頭來看覺得我整理得他媽的真是有夠清楚,我摘錄在下面吧。

但先打下工作中學到幾個比較重要要注意的事情:

  • 要複製改寫之前別人寫過的程式碼時特別要注意!若是卡住了,記得先把不知道作用的 class 或者任何函式刪掉,盡可能只用自己理解過後知道是什麼的東西,若是不知道就用 @{{}} {{}} dd($) 印出來看看。
  • class 若是要使用 row, col 的 class 有一個絕對的原則,row 裡面下一層區塊一定要有 col 的 class,基本上 row 就是分成 將寬/高 分成 12 等份,再用 col 去分配區塊要佔用的比例。
  • 記得切版完要把中間試過不必要的 class 刪一刪,只保留真正有用到的東西。
  • Tailwind 有用到 RWD 時,一定要成對的寫比如 lg:col-12 col-6 這樣易讀性才高,且把 vue 的指令 v-OOXX 放在最前面,RWD 組合次之。(先寫完網頁版再去寫 RWD 不然會亂掉。)
  • 切版的時候要考慮到多語系,盡量讓區塊是自動撐開而不是寫死一個寬度/高度/大小。

接下來複習一下 Flexbox 最重要的概念並找到 Tailwind 對應的 class:

1. Flex 外容器屬性:

  • display -> (block, inline-block, inline, flex, inline-flex)
  • flex-flow
    • flex-direction ->(flex-row, flex-row-reverse, flex-col, flex-col-reverse)
    • flex-wrap -> (flex-wrap, flex-wrap-reverse, flex-nowrap)
  • justify-content -> (justify-start, justify-end, justify-center, justify-between, justify-around, justify-evenly)
  • align-items -> (items-start, items-end, items-center, items-baseline, items-stretch)

2. Flex 內元件屬性:

  • flex
    • flex-grow -> (flex-grow-0, flex-grow)
    • flex-shrink -> (flex-shrink-0, flex-shrink)
    • flex-basis -> (flex-1, flex-auto, flex-initial, flex-none)
  • order -> (order-1, order-2……order-11, order-12, order-first, order-last, order-none)
  • align-self -> (self-auto, self-start, self-end, self-center, self-stretch)

3. Tailwind 的 row 和 col 屬性:

  • row
    • row-gap-5
    • row-gap-10
    • row-gap-15
    • row-gap-20
    • 常搭配使用 flex-nowrap
  • col
    • col-6, col-6
    • col-3, col-3, col-3, col-3
    • col-auto, col-12 flex-shrink
    • 常搭配使用 flex-shrink

註:Tailwind CSS 是一套 Utility-First CSS,相當具有彈性,也非常適合快速刻板。相較於  Material-UI、Bulma、Bootstrap(framework 們表示躺著也中槍XD)這類 component 都定義好,套上去馬上就有個像樣網站的 framework,Tailwind CSS 這種 Utility-First CSS 把大致上 CSS 會用到的屬性都用單個 class 來表示,讓你更能夠客製化你的網站區塊的排版和樣式,又能夠省下很多寫 RWD 網站的時間。


INLINE、BLOCK 跟 INLINE-BLOCK 的區別?


CSS display 屬性是讓網頁設計師可以自由設定網頁元素的顯示類型,HTML 每一種不同的元素都會有自己的預設值,常見的有「區塊元素」與「內行元素」。預設為 display:block 的為「區塊元素」,而預設為 display:inline 的則是「內行元素」。

  1. 預設 inline 類型的元素有:span, a, input, img, em…。其不能調整寬和高、上下邊距也不能調,多個元素也是會並排,不會在寬度未滿的狀況下自動換行。
  2. 預設 block 類型的元素有 div、p、ul、li…。可以設定高度(height)、寬度(width)。(元素寬度預設會撐到最大,使其占滿整個容器)
  3. 預設 inline-block 類型的元素有:buttom, input, select…。其對外像 display:inline 可以並排,元素之間彼此不會自動「換行」,對內像 display:block 可以調整各種屬性。(可水平排列)

註:其中的長度單位有三種

  • px : 像素,圖像的基本單位是像素 px(沒有比像素更精細的單位了)
    • px(pixel:像素),是圖像元素,我們沒辦法具體化pixel的長寬值,它不像公分、公尺那樣是一個物理上的絕對單位,pixel的實際物理寬度是相對顯示器的解析度及螢幕寬度決定。
    • 但在CSS裡,我會當px是一個絕對的值,輸入16px,它就會是這個顯示器的16px寬度,不會因為瀏覽器視窗長寬改變,或是因為html的層級關係,而變換16px的寬高,16px就是16px,除非今天換了另一台顯示器,那就會有些微的差距。
  • em : 以母元素的基礎字體大小作為倍數的單位(若母元素為 12px,則 1em = 12px、2em = 24px、…….)
    • em 單位是相對單位,它的名字由來是一個英文字母m的寬度,故叫 em。它的繼承基準是父元素。通常瀏覽器的預設字體為 16px,對應到根元素的預設寬度,所以1em =16px ,而它的子元素相對值就依這個值繼承下去 ; 若把的字體大小設定為 32px,那它的子元素1em = 32px。
    • 為每個子元素透過「倍數」乘以父元素的 px 值,如果我們每一層 div 都使用 1.2em,最內層就會是 16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px
  • rem : 以根元素的基礎字體大小作為倍數的單
    • rem 也是相對單位,其繼承的基準是根元素。em 通常繼承到很內層時,會比較難計算基準寬度已經變成多少 ; 但是 rem 的基準一直都是跟著根元素,相對單純很多。
    • 為每個元素透過「倍數」乘以根元素的 px 值,如果我們每一層 div 都使用 1.2rem,最內層就會是 16px x 1.2 = 19.2px。
  • %
    • % 值是相對於某個數值的百分比,% 的基準值為何,要看屬性的特性決定(比方 width 跟 height 的 % 基準是父層的 width 跟 height;而例如 line-height 則是以元素本身的文字行高為基準)。% 是生活中常用到的計算,大家應該都很熟悉。
    • % 百分比是相對單位,和 em 大同小異,簡單來說 em 就是百分比除以一百,如果我們每一層 div 都使用 120%,就等同於 1.2em,最內層就會是 16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。
  • vw, vh
    • vw 跟 vh 也是相對單位,它們的 v是 viewport(視口),所以它是奠基在 viewport 寬度做百分比伸縮的單位。語法上省略 % 這個符號,數值後面直接接 vw 跟 vh。通常都會用到 vw,vh 比較少使用,因為視口的高度是變動的,我們瀏覽頁面的方向都是由上往下,內容也都是由上往下增生,高度在網頁通常是一個不確定的因素,所以很多基準都是用寬度來計算的。
    • 如果我想要讓圖片寬度佔視口寬度的一半,那就是 50vw。
  • calc()
    • calc()計算值可以在括號內寫算式,來指定數值,算術內的加減乘除符號是+、-、,可以各種單位混在一起計算像是:img { width: calc(100vw – 800px); }
    • calc() 可以用來定位、根據父層容器尺寸自動調整尺寸,也可以將將 calc() 巢狀包入 CSS 變數中,其最強大的地方就是能夠動態計算長度值。

史上最強排版助手:FLEXIBLE BOX (靈活的盒子)

Flexbox 是 CSS3 display 裡一個比較特殊的版面設計模式。最初被設計出來的主要原因是為了提供更有效率的方式來完成傳統 CSS 無法輕易達成的效果。基本上我們要去理解 Flexbox 它就是一個外容器和內容器。很多人稱它為「靈活的盒子 ( Flexible Box )」。

在元素宣告 display: flex; 後就能夠對其內部的元素做些靈活的排版。想要使用 Flexbox,只要將外容器的 display 更改為 flex 或 inline-flex。接著我們就能來對其內部元素透過一些 CSS 代碼做排版上了操控了。

flex-direction
flex-direction 表示 Flexbox 內容元素的「排列方向」。

  • row:預設值,由左到右,從上到下。
  • row-reverse:與 row 相反。
  • column:從上到下,再由左到右。
  • column-reverse:與 column 相反。

justify-content
justify-content 決定了盒內元素相對於 flex 外容器的對齊位置(水平)。

  • flex-start:靠左對齊。
  • flex-end:靠右對齊。
  • center:水平置中。
  • space-between:平均分配內容元素,元素間有間隔。
  • space-around:平均分配內容元素,元素間和外容器間皆有間隔,後者為前者一半。
  • space-evenly:平均分配內容元素,元素間和外容器間皆有相同間隔。

align-items
justify-content 決定了盒內元素相對於 flex 外容器的對齊位置(垂直)。

  • flex-start:向上對齊。
  • flex-end:向下對齊。
  • center:垂直置中。
  • stretch:預設值,將內容元素全部撐開至 Flexbox 的高度。
  • baseline:以所有內容元素的基線作為對齊標準。
    (基線你就試試看反正我感覺預設大概是中間偏下)

align-self
可以對已經使用過 align-items 的內元素再做調整

align-content
基本上遇到多行元素時使用,整體與 align-items  大同小異。

  • flex-start:向上對齊。
  • flex-end:向下對齊。
  • center:垂直置中。
  • space-between:將第一行對齊最上方,最後一行對齊最下方。 
  • space-around:每行平均分配間距。
  • stretch:預設值,內容元素全部撐開至 Flexbox 的高度。

flex-wrap
可以用來讓原本撐滿整行的內元素以各種形式換行。

  • nowrap:預設值,單行。
  • wrap:多行。
  • wrap-reverse:多行,但內容元素反轉。

order
直接用數字由小到大指定內元素的排列順序。(ex: order: 1;)

flex
用來分配內元素如何延伸或者壓縮去佔據 Flexbox 的空間。

  • flex-basis:預設值為 0,可對已設置過寬度的內元素再單獨額外覆蓋設定。
  • flex-grow:若是 Flex 盒寬度大於所有內元素寬度,可用此將內元素延伸,若都設定為 1,代表平均拉伸分配剩餘空間,若有三個內元素(1 : 1 : 1)
  • flex-shrink: 若是 Flex 盒寬度小於所有內元素寬度,可用此將內元素壓縮,若都設定為 1,代表平均壓縮分配剩餘空間,若有三個內元素(1 : 1 : 1)


註:
參考資料 1:深入解析 CSS Flexbox
參考資料 2:圖解 Flexbox 基本屬性
參考資料 3:Day16 CSS基本樣式-單位與數值
參考資料 4:金魚切版系列:01-圖文滿版切法


可參考我的八週 [工作日誌 J] 和百日轉職工程師系列文

作者介紹 - ASong

ASong

ASong, 現在是一位前端工程師;業餘的閱讀愛好者、講師、寫作者;任何討論或合作可寄送至 dragoncres@gmail.com。

發表迴響