難解的 CSS 排版:認識對齊(下)

本文為參加第 11 屆「iT 邦幫忙鐵人賽」系列文章,會優先在部落格發文,再貼到 iT 邦幫忙~。
如果文章對您有幫助,歡迎到 iT 邦幫忙給我一個訂閱與肯定 ^___^。
好久沒寫文了,也希望自己可以堅持 30 天,加油(握拳

昨天講了text-align以及vertical-align這兩個常見的對齊語法,但他們可以對齊的範圍都比較小,偏向對齊元件,而非版面。
如果要讓版面置中,或是再更複雜的一些排版,我們還可以有更多選擇。

版面置中的好幫手: margin

這個應該很多人都用到爛掉了,但有的朋友可能不太懂原理,在此簡單介紹一下。

我們在切一個大版面時,如果要讓他左右置中,現在普遍最快的方法是使用以下語法:

CSS

然後版面就可以置中了。

margin: 0 auto;margin: 0 auto 0 auto; 的簡寫,表示上下邊界為 0 ,左右為auto表示自己均分。margin會去判斷.container的寬度以及螢幕的寬度,相減之後除以二就是左右邊界的數值了。

至於該如何得到.container的寬度呢?就是必須要在 CSS 寫上寬度,如果沒寫寬度是不會有效果的。

margin大到版面,小到元件,只要有指定元素的寬度,幾乎都可以用這個方法左右置中。

CSS

更多的 margin

☞ 圖片一樣可以使用margin: 0 auto;置中
margin可以讓版面置中,但沒辦法讓文字置中唷。


讓 padding 幫你實現簡單的垂直置中

如果說margin是負責版面,那padding就是負責裡面的元素了。

我們可以利用padding將 Box Model 往外推的特性做到置中的效果,只要上下數值一樣就可以囉。

CSS

選單文字垂直置中的首選 line-height

▼ 假設今天要製作一個類似這樣的選單,文字需要垂直置中,同時又有限定元素的高度。

因為有限定高度,所以我們沒辦法用padding去推 Box Model;另外一個原因是,如果選單再複雜一點,padding通常都另有用途。

所以假設今天需求是:

  • 有限定元素高度
  • 文字需垂直置中
  • 文字非常單純只有一行

在上述的情況下,可以直接用line-height解決,只要讓line-heightheight高度相同即可

CSS

用 position 讓你的版面水平垂直置中

position的解法,我之前在部落格有寫過了,所以容我直接跳過~
有興趣的朋友可以直接參考這一篇文章:用 css 讓區塊水平垂直置中


用 transform 做出與 position 類似的置中效果

transformposition類似,都是直接將 Box Model 推移到特定的位置上,達到置中的效果。

使用position可以再利用margin去推算要定位的位置,但前提是你必須要知道元素的寬跟高,才有辦法回推。但使用positiontransform就不用特別設定寬跟高,非常的方便

CSS

難解的 CSS 排版:認識對齊(上)

我一直很想寫這系列的文章,一來是 CSS 博大精深,有太多難解的觀念在裡頭。二來是常常要切很多重複卻又複雜的版型,所以想要系統化這些資訊,供日後快速查閱。

因此,這系列算是我自己的筆記,也算是經驗分享吧!也希望能幫到各位 m(_ _)m

廢話不多說,直接上重點 XD。

(閱讀全文…)

CSS Grid 語法筆記

這篇不算教學,只是將 CSS Grid 的語法做個紀錄,所以沒有前言,也不會介紹 CSS Grid 是什麼。如果你已經知道 CSS Grid 的作用,也歡迎參考以下筆記,也許可以幫助你更了解相關語法。

從 Gird 開始

前置作業:將 div 的 display 設為 grid,接著定義 Grid 的寬度(columns)與間距(gap)

HTML
CSS

grid-column-gap 以及 grid-row-gap 可以合併為 grid-gap

CSS

▼ 網頁示意圖

假使要設定 CSS Grid 的高度,可以再加上:

CSS

▼ 網頁示意圖

在這個範例中,row 有 4 行,可是我們只設定了 1 & 2 行,沒有設定高度的會以元素高度為高度(auto-height)。

☞ 可以用grid-auto-rows設定 auto-height 的最小高度。

☞ 注意

  • 沒有grid-auto-columns這種語法。
  • 沒有grid-auto這種簡寫。

新的單位:fr

fr 是因應 CSS Grid 而產生的新單位,全名是 fraction (分數),這個分數不是 score 那個分數,而是數學分子 + 分母的那個分數。

我們可以用 fr 去設定 CSS Grid 的相對寬度,以達到 RWD 的縮放效果。如果是跟前面範例一樣使用px,縮放的時候是不會有 RWD 的(這大家應該都很清楚了)

grid-template-columns 的單位改掉:

CSS
  • 編號 1,4,7,10:占 1/4
  • 編號 2,5,8:占 2/4
  • 編號 3,6,9:占 1/4

▼ 網頁示意圖

這時候縮放就會有 RWD 效果囉~。

另外也可以混搭單位:

CSS

重覆 Grid 的設定

如果 Grid 的寬度有一個固定的模式,可以用 repeat() 這個語法把它們合併,類似迴圈的感覺。

假設原本這樣寫:

CSS

可以看出來三個為一組,1fr 2fr 2fr是一直重覆的,所以改寫如下:

CSS

▼ 網頁示意圖

最左邊跟最右邊的 Grid 如果不會重覆,可以接在repeat的前後:

CSS

Grid 的排序

使用 grid-auto-flow 進行 Grid 的排序,預設屬性為 row (橫向排列)。

如果改用 column,Grid 就會變成縱向排列 (可以注意數字編號):

CSS

▼ 網頁示意圖

此外也可以指定某一個div進行排序

CSS

如果沒有指定order的順序,預設就是order: 0,而我們現在指定第三個 div 為order: 1,所以第三個 div 的排序會跑到最後面。

☞ 承上,現在是縱向排列,所以 div 排列的順序是用「縱向」來看的喔。

▼ 網頁示意圖

接下來就可以用order:N任意調整排序囉!

CSS

▼ 網頁示意圖

以上就是 Grid 的相關筆記。

部落格改版之後,是用 Grid + Flexbox 來排版的,有興趣的朋友可以自行扒皮 XD

Bootstrap 4 的 Grid 應用介紹

Bootstrap 4 從去年釋出 BETA 版後,到現在幾乎所有功能都齊全了,官方也釋出了詳細的 BETA 網站與文件,感覺 Bootstrap 4 距離正式定案的時間也不久遠啦 😀

為什麼 Bootstrap 4 的出現如此引人注目呢?因為之前 V2 到 V3 只是「增強」,但 V3 到 V4 卻是「改革」,Bootstrap 4 用的技巧與 CSS 語法都有大幅度的革新,所以用慣 Bootstrap 3 的朋友勢必要重新學習(就像我XDDD)。以我為例,我自己比較常用 Bootstrap 的 Grid System (網格系統),因此這次的筆記也會以 Grid System 為主,介紹一下 V3 與 V4 之間的差異。

1. Bootstrap 4 的一個重大改變,就是使用了 CSS 的 Flexbox 重新排版定義 Grid,關於 Flexbox 的介紹,可以參考我之前的文章:CSS Flexbox 介紹與解析
2. 承上,因為 IE9 並不支援 Flexbox,所以如有需要使用 IE9,就請繼續使用 Bootstrap V3 版本。


斷點(Breakpoint)的調整

Bootstrap 3 的斷點與前綴詞

 Extra SmallSmallMediumLarge
斷點範圍0 ~ 767 px768 ~ 991 px992 ~ 1199 px1200 px 以上
前綴詞col-xscol-smcol-mdcol-lg

Bootstrap 4 修改如下

 Extra SmallSmallMediumLargeExtra Large
斷點範圍0 ~ 575 px576 ~ 767 px768 ~ 991 px992 ~ 1199 px1200 px 以上
前綴詞col-col-smcol-mdcol-lgcol-xl

差異

  1. 新增了一個576px作為最小的斷點
  2. Extra Small 由col-xs-*改為col-*
  3. 新增了 Extra Large,前綴詞為col-xl-*

可以自動的平均分配欄寬

以往使用 Bootstrap 3 時,每一個col-md-*後面一定要帶數字,數字表示欄寬。但 Bootstrap 4 因為使用了 CSS Flexbox,所以不輸入數字 = 平均分配欄寬。

以下來個簡易範例:

Bootstrap 3
需要輸入「數字」才能知道寬度

HTML

▼ Bootstrap 4
不需輸入數字就能根據 col 的數量分配欄寬

HTML

▼ Bootstrap 4 
也可以只設定其中一個欄寬,剩下的平均分配

HTML

☞ 範例

See the Pen rzGjNE by MUKi (@mukiwu) on CodePen.


動態調整欄寬

除了能平均分配欄寬外,還能根據文字寬度,動態的調整欄寬。這是 Bootstrap 4 的新語法,使用的是col-md-auto

HTML

也可以把我們之前熟悉的各種斷點給加進來,做出更多的螢幕寬度變化:

HTML

☞ 範例

See the Pen MvEJJd by MUKi (@mukiwu) on CodePen.


讓 Column 換行

安插一個空的 DIV,CLASS 名稱為w-100,就可以讓 Column 強制換行唷~

HTML

☞ 範例

See the Pen prWRaX by MUKi (@mukiwu) on CodePen.


垂直對齊

前面跟大家提過 Bootstrap 4 有使用 Flexbox 語法,所以我們可以利用 Flexbox 的特性,輕易的將 Column 置頂、置中,與置底對齊。

  • align-items-start:置頂
  • align-items-center:置中
  • align-items-end:置底

▼ 直接在row裡面寫上align-items-*的 CLASS 即可。

HTML

▼ 另外我們也可以改用align-self-*col裡面單獨針對 Column 做對齊的動作

  • align-self-start:置頂
  • align-self-center:置中
  • align-self-end:置底
HTML

透過範例可以發現 A, B, C 三個 column 不會相互影響,A 的欄位如果有多行文字不會影響到 B 跟 C。另外以置中為例,輸入多行文字後,他真的就是從中間平均的往上下展開唷!

☞ 範例

See the Pen NvadMo by MUKi (@mukiwu) on CodePen.


水平對齊

有垂直對齊就一定會有水平對齊(廢話XD),所以 Bootstrap 4 一樣利用了 Flexbox 的特性實現水平對齊。

  • justify-content-start:靠左對齊
  • justify-content-center:置中對齊
  • justify-content-end:靠右對齊
  • justify-content-around:分散對齊(含左右)
  • justify-content-between:分散對齊(不含左右)
HTML

☞ 範例

See the Pen MvEpYy by MUKi (@mukiwu) on CodePen.


移除 gutter

Bootstrap 的rowcolumn分別有使用margin以及padding當作 gutter,讓每個 column 之間有呼吸的空間。

但有時候因為版面的設計需求,我們希望 column 是緊密黏在一起的,所以 V4 新增了no-gutters這個 class,可以讓我們移除 gutter

HTML

直接將no-gutters放在row就可以囉,因為語法跟效果很直覺,所以就不上 codepen 範例惹(絕對不是因為懶)


Column 排序

以前如果要將排序會用pullpush在那邊推來推去的,現在一樣因為使用了 Flexbox 的關係,在使用上也更方便了!

  • flex-unordered:不排序
  • flex-first:第一個
  • flex-last:最後一個
HTML

☞ 範例

See the Pen wqrJEa by MUKi (@mukiwu) on CodePen.

這邊要特別注意的是,如果使用 flex 排序,寬度縮小時也會持續這個排序模式,column 的寬度不會變回 100%。

如果你希望縮小到特定寬度可以變回 100%,還是可以使用 V3 的push以及pull,不過在 V4 的寫法有一點調整,將前綴位置放到後面(原本是col-md-push-*):

HTML

☞ 補充

offset也一樣將前綴往後放。


Bootstrap 4 的 Grid 介紹就到此告一段落囉,有一些功能我沒有特別提到,例如 Wrapping、Nested,是因為跟 V3 相比沒有太大的改變,就不額外寫出來了。

Bootstrap 的功能非常強大,是一個堪稱超完整的 Framework,但我自己只有使用它的 Grid System,所以就只介紹 Grid 在 V3 與 V4 之間的差異囉 ^Q^。以後如果再開 RWD 課程,也會以 V4 為主要規劃設計新的範例與課程,也請大家敬請期待 😀

那麼對文章有任何不懂的地方,也歡迎留言告訴我唷,謝謝 ^_^

傾囊相授 ! MUKI 的 RWD 入門與實戰課程分享

我在 2012 年寫過一篇 CSS Media Queries 介紹與基礎應用,後來也陸續開了一些 RWD 相關課程,也有在一些研討會分享過 RWD 技術,因為資源散落各地,所以決定利用部落格將我分享過的 RWD 資訊做個整合,讓大家可以快速上手。

另外我也會將自己的「RWD 入門與實戰」這個付費課程講義公開,讓大家可以在部落格內閱讀。為什麼要把付費內容免費化呢?其實我覺得, RWD 已經存在一段時間了,相信很多人都已經會了,就算不會,網路上也有許多分享文章可參考,「觀念」也沒什麼好藏私的,愈多人會 RWD,我們之後的進階課程才會輕鬆啊(笑)。

其實想要把內容公開化已經想很久了,突然如此積極還有另外一個原因,就是我在網路上看到有人盜用了我的講義內容,然後把他公開在網站上,好像還用這些內容去開課(這種行為真是令人不齒)。更扯的是,他盜用我的內容後還有附上一些課後補充,就是沒附上我的連結,是心虛嗎?哼~總之,我歡迎大家分享我公開的資料,但與其我的東西被盜用,還不如我自己公開分享啊啊~~

如果各位之後在其他地方看到這些內容,請不用懷疑,我以我的人格保證,他們絕對非原創絕對是盜用,因為這些東西都是我一個字一個字打出來的。也歡迎大家用力檢舉或是告訴我唷 ^___^

以上癈話到此結束,接下來開始進入正題吧。

RWD 相關簡報分享

我的 RWD 簡報都發在 slides.com 裡,大家可以直接點進去看,或是在部落格里閱讀。

RWD 入門與實戰課程簡報

這份簡報是「RWD 入門與實戰」的上課簡報,裡面有很基礎的 RWD 觀念,適合還沒碰過 RWD 卻有興趣想瞭解的朋友。跟練習有關的簡報我都已經拿掉了,我這堂課的兩大重點:(1)RWD 是由什麼組成的 (2)如何實作 RWD。

這份講義重點在「(1)RWD 是由什麼組成的」,另外上了幾次課之後,我改為使用 gitbook 做線上講義,所以這份簡報就沒再更新了。

2015 廣州前端分享會

這份是最早釋出的 RWD 簡報,是我去廣州的一場分享。這份簡報內容很多,到最後也沒講完,裡面列出了做 RWD 會碰到的一些問題,適合已經有 RWD 實作經驗的朋友閱讀。

簡報後面的「那些年我硬幹的事情」,是在分享已經上線的網站如何硬幹成 RWD 網站。

2015 高雄 MOPCON

2015 年底參加了高雄的 MOPCON,一樣是在講 RWD。

這份簡報可以看作是融合的「RWD 入門與實戰」以及「廣州前端分享」的精華,也是適合給有 RWD 實作經驗的朋友閱讀。


簡報比較偏「秀」,為了演好這場秀,裡面會帶上很多插圖,思緒也比較跳躍,所以後來我上課才改用講義,講義就比較像我的寫文風格,系統化 + 平鋪直敘 (自己說 XDDD)。

我會把講義整個搬到文章內,為了怕頁面拖太長,所以請點擊下一篇閱讀「RWD 入門與實戰」講義唷。

Avoid

以下內容是我在 RWD 入門與實戰課程的講義內容,免費放出來讓大家閱讀學習,歡迎分享與轉載 ( 請註明出處來源 )。
請勿盜用或用於商業用途,一但發現必定追究到天涯海角。

RWD 的基本組成:viewport

認識 viewport

viewport 用來告訴瀏覽器現在的裝置有多寬、多高。可以讓使用者在使用不同裝置看網站時,能有個基準比例。

  • 根據裝置的顯示區域來展示文檔 (html)
  • 可以透過放大與縮小 html,以符合裝置的可視區域
  • 通常會有初始值設定縮放的級別或其他規則

viewport 語法

HTML
  • width:使用 device-width (裝置寬度) 作為可視區域的寬度。
  • initial-scale:文檔初始的比例,用 1 表示 100% ,範圍從 0.1 ~ 10 可任填。
  • minimum-scale:最小可以縮放到 0.8 比例。
  • maximum-scale:最大可以縮放到 2.0 比例。
  • user-scalable:是否允許使用者進行縮放。no 不允許;yes 允許。

補充

iOS 10 版本提到:為了增強用戶的體驗,不管有沒有使用 user-scalable ,用戶都可以在 Safari 瀏覽器上縮放網頁。

承上,如果依然不希望使用者縮放,可以改用 JavaScript 禁用設定:

JS

總結

  • 將 viewport 應用在 RWD 網站上,可以很方便的建置一個適合手機、平板等不同裝置閱讀的環境。
  • viewport 也可以應用在非 RWD 的網站
HTML

RWD 的基本組成:流動式佈局

流動式佈局介紹

流動式佈局(Fluid Web Layout)是讓網站在排版時,把寬度從px改成%去排版,讓網站的版面可以參考父層,並用相對比例去分配寬度。

以下利用一個簡單的範例,教大家怎麼把網站版面改寫成流動式佈局。

這是一個用px排版的二欄式的版面

如果要將它改成流動式佈局版面,注意兩個要點:

  1. 把所有px單位改為%,並計算好與父層的相對比例。
  2. 最外層使用max-width設定寬度

改寫後的 CSS 如下(僅列出重點語法):

CSS

流動式網格佈局

如果 HTML 的層級愈多,在計算%時會非常不方便,所以我們可以改用流動式「網格」佈局替代。

網格系統並不是什麼新技術,從以前開始,就有許多設計師用網格在排平面或網頁稿件的版面。而現在有許多人把網格系統化,讓網頁設計師在排版時可以更快的上手,不用自己計算%

以下是一個 Grid System 的範例,範例中把網站總寬度切割成 12 等分,每一個區塊佔用的等份都是固定的。拖拉視窗可以發現寬度即使縮小,網格的數量也沒有減少。

☞ 補充

Bootstrap 也有網格系統(Grid System),所以我們可以使用 Bootstrap 幫我們快速建置基本的 RWD 網站。


RWD 的基本組成:客製化的 Layout 結構

一般來說,使用前面提到的網格式佈局,就可以做出一個 RWD 網站。但如果我們要在版面縮小時,修改元件樣式控制元件出現/消失… 等,這些是「網格式佈局」做不到的,因為網格式佈局只管寬度其他都不歸他管 XD。

因此,我們可以用 CSS 的 Media Query 語法幫我們實現這些功能或需求。

Media Query(ies) 介紹

Media query 的作用是,當偵測到不同尺寸的裝置時,給予對應的 CSS 設定。

在 RWD 的實作上,就是利用 media query 做出「共用一份 html,但是排版不同」的客製化 Layout。

可以讓裝置在任何寬度下,都可以有不同的 CSS 效果,例:

  • 縮小螢幕寬度時,選單跑到左側
  • 縮小螢幕寬度時,某些元素消失

補充

在做 RWD 網站時,Grid System(網格系統)跟 Media Query 通常是密不可分的,所以我們會同時用到這兩個技術。

Media Query 語法解析

以下是 Media Query 的規格:

CSS

寫成我們熟悉的 CSS 語法是:

CSS
  • mediatype : 裝置類型
    • all
    • screen
    • printer // 訪客列印網站資料
    • tv // 訪客用電視瀏覽網站
  • media feature : 裝置的規格
    • max-width / min-width / width
    • max-height / min-height /height
    • color
    • aspect-ratio
    • monochrome

參考資料: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

如何呼叫 Media Query

呼叫 media query 就跟呼叫 CSS 一樣,大致上有以下三種寫法:

1. 在 HTML 嵌入 CSS 檔案,這份 CSS 檔案會依據 media query 的設定顯示。

HTML

2. 在 CSS 檔案裡寫下 media query 的設定以及相關 CSS 語法

CSS

3. 在 CSS 裡使用 @import 嵌入另外一個 CSS 檔案

CSS

☞ 補充

雖然有這三種呼叫方式,但我們通常都只會使用第二種方法唷~。

Media Query 練習

這是一個已經用流動式佈局排好的頁面:

依照以往上課經驗,初學者在練習 Media Query 時,往往不知道該如何下手。我建議大家一開始先不要管「寬度」,只要先想著,如果我要做好這個功能,應該用哪些 CSS 語法?確定結果是你想要的後,再把這些耶你修改的語法單獨拉出來並加上寬度的條件。

☞ 練習一

網站寬度在 400px ~ 700px 之間,將 #sidebar#aside 的位置互換。

我們可以從頁面語法瞭解#sidebar以及#aside都已經用float排好版面了,如果要讓兩個區塊位置互換,其實只要在float上動點手腳即可:

CSS

☞ 練習二

網站寬度在 0px ~ 500px 之間,選單會從左右變成上下排列。

這個練習根據你的思維與慣用的語法不同,至少可以有四種寫法。在此根據思維的不同,分享兩個寫法給大家:

寫法一

假設我們已先設定好選單在桌機版的樣式:

CSS

那麼 media query 可以這樣寫:

CSS

☞ 補充

因為瀏覽器的寬度沒有負數,所以當寬度是 0 的時候,可以把 min-width 整段省略

寫法二

因為我們還沒有寫選單的樣式,而#menu沒有排版時,預設就是上下排列的狀態,因此可以把這個練習題目想成:寬度在 500px 以上,選單會變成左右排列

那麼我們只需要這樣寫就可以囉:

CSS

「RWD 入門與實戰」的講義暫時分享到此,因為後面的課程是直接用 Bootstrap 的 Grid System 做一個版面,比較難用文字描述,請見諒。

另外課程最後還有一些進階的 RWD 實作,例如設計 Grid 的思維、完全實現文字的縮放,純 CSS 實現表格的 RWD… 等等,這些在「廣州前端分享會」的簡報都可以看到唷。之後有時間會再整理成文章讓大家更瞭解其中的奧妙 😀

最後感謝各位的觀看,希望這篇文章可以幫助到各位唷。有任何問題,也歡迎在文章底下留言詢問~

☞ 延伸閱讀

如果對 Media Query 還不是很懂的話,建議可以看我在 2012 年寫的 CSS Media Queries 介紹與基礎應用

CSS Flexbox 介紹與解析

老實說我到現在都還沒開始用 flex 做網站,最大的原因就是 IE 相容問題,不過這也不能當作不學習的原因,畢竟這行就是要不斷的學習新知識😂,而且剛好在某次前端課程中有同學問我能否介紹 flex,所以想想,乾脆就寫一篇文章吧!不僅是幫自己做個筆記,以後也可以當作課堂上的補充講義~。

▼ flex 相容一覽圖 / caniuse.com

什麼是 Flexbox

簡單來說,Flexbox 是一種 CSS 的排版語法,就跟我們以往用的 position, float, display…一樣,只是 Flexbox 是 CSS3 的新語法,所以才有瀏覽器相容的問題。

Flexbox 相關屬性與值

我覺得 Flexbox 較難上手的原因,就是他的屬性跟值太多了,不像 float 很單純的只有 left, right, none 這三種,但當然好處就是彈性非常大,幾乎很多複雜的排版都可以靠 Flexbox 輕鬆解決。

在這邊也參考了 W3C 的網站,列出所有 flexbox 的屬性跟值給大家參考,至於詳細的介紹還是可以看 W3C 關於 Flexbox 的文件喔!

屬性屬性介紹可用的值預設值影響
flex-flow將 flex-direction 以及 flex-wrap 合併寫在一起flex-direction |flex-wrapflex containers
flex-direction
排列方向
rowrowflex containers
row-reverse
column
column-reverse
flex-wrap
換行nowrapnowrapflex containers
wrap
wrap-resverse
order
調整元素排列的順序<整數>0
flex
將 flex-grow、flex-shrink 以及 flex-basis 合併寫在一起flex-grow|flex-shrink|flex-basisflex items
flex-grow
<數字>0flex items
flex-shrink<數字>1flex items
flex-basis<寬度>autoflex items
justify-content
水平對齊設定flex-startflex-startflex containers
flex-end
center
space-between
space-around
align-items
垂直對齊 (元素單行排列)flex-startstretchflex containers
flex-end
center
baseline
stretch
align-selfflex-startautoflex items
flex-end
center
baseline
strech
align-content
垂直對齊 (元素排列超過兩行以上)flex-startstretch多行 flex containers
flex-end
center
space-between
space-around
stretch

常用的 Flexbox 排版語法

要使用 flex 前,必須先在該容器指定:

CSS

而特別有趣的是,就連行內元素都可以用 flex 唷:

CSS

接下來,我們用一小段 HTML 語法表示 Flexbox 的架構:

HTML

承上,這個很常見的巢狀排版恰恰能表達flex的兩大主角:flex-container以及flex-item,前者表示的是一個巨大的容器(container),後者則是各個獨立的項目(item)。

flex的屬性,有的會影響的是容器,有的則影響項目。如果不太清楚屬性影響的是哪一塊,可以回到前一頁看表格的「影響」欄位做參考。


基本的 Flexbox 排版

flex-direction

我們先介紹最簡單的左右版面,以往直接用float: left解決,那麼換成flex的話可以這麼寫:

CSS
  • Flexbox 是 Box Model 的一種表現形式,以前我們用display去改變每個元素的 Box Model,在此也是一樣,我們要在flex-container先設定display: flex,確保自己以及裡面的子元素 Box Model 都會轉成flex的設定。
  • flex-direction表示 flex 的水平排列方向,第一頁的 Flexbox 屬性表上有提到,flex-direction必須放在 flex container 的父層架構下,而不是 flex item 這個子層,所以這句話寫在.flex-container裡,如果你把它放在.flex-item會發現沒作用。(再次提醒:對照屬性表會更加清楚該放在哪裡喔。)

最後我們來把flex-direction所有的值都寫一遍吧!

See the Pen QEGbMm by MUKi (@mukiwu) on CodePen.

在值裡面,用到的rowcolumn,一個是水平排列、一個是垂直排列;而reverse是反轉的意思,稍微對照一下上面的範例應該不難了解唷!


flex-wrap

接下來再加一個新的語法flex-wrap,這個同樣要放在.flex-container裡面,wrap是斷行的意思,可以利用這個語法決定是否要換行。

設定nowrap表示即使有多少區塊,也必須都放在同一行內(會自動分配寬度)。設定wrap則是會依照內容或寬度自動換行。

See the Pen oLYjqG by MUKi (@mukiwu) on CodePen.

flex是三個屬性的合併縮寫:flex-grow, flex-shrink, flex-basis,可以看作是 FLexbox 的核心設定。 註:flex 的這些屬性影響的是 flex items。


flex-grow

我們都知道,區塊預設的寬度是元素內容的寬度,如下圖所示 ▼

如果想要調整寬度,一般可以用width設定,但也能用flex-grow唷!flex-grow的預設值為 0,表示寬度就是元素內容的寬。而從 1開始,數字愈大,占的寬度比例也會愈大。

CSS

範例圖如下所示 ▼


flex-shrink

flex-shrinkflex-grow相反,是表示當父元素寬度空間不足時,子元素壓縮的比例。預設值為 1,但設為 0 同樣表示不壓縮,數字愈大,被壓縮的幅度就愈大。

CSS

範例圖如下所示 ▼


flex-basis

可以在flex-basis設定寬度或高度,設定好後會自動分配該區塊的寬度或高度。

CSS

假設父元素寬度是500px,我在裡面設了兩個子元素分別為200px以及600px,他會依照比例分別給予子元素寬度,如圖所示 ▼

以上這三個語法因為有比較多的彈性,所以可以用在製作 RWD 網站上。


flex

最後,再次提到flex這個語法,是用來合併以上三個屬性,規格為:

CSS

flex 還有兩個更簡短的縮寫:

CSS

以上關於flex的範例程式碼,請參考:http://codepen.io/mukiwu/pen/qNRJPv


Flexbox 還有一些屬性沒有提到,因為我有點累了,所以暫時解說到這邊。但我覺得剩下的都是比較簡單而且很容易上手的語法,所以等待以後有空補完 XDD。

Flex 版面實例介紹

版面垂直置中

幾千萬年以來傷透腦筋的垂直置中,超級適合用flex解的喔!在這邊我們會用到兩個屬性:

  • justify-content
  • align-items

而這兩個屬性我前面通通都、沒、說(炸),但真的很簡單,所以直接上程式碼啦!

CSS

範例請參考 codepen:


動態三欄式

除了用flex-grow動態調整他們的大小外,還用了order調整版面的順序


不同的圖片 / 區塊排列

這種排版變化比較多一點,但不知道怎麼稱呼它,所以直接看範例比較清楚 XDDD。

一樣是大量運用到flex屬性做調整,在這個例子中,flex-basis尤其為最重要,當然還有一些對齊的語法也不能少。以下是有用到的語法:

  • flex-wrap
  • flex-basis
  • justify-content

以上三種排版,是我目前想到可能比較有趣,或是比較實際的例子 XD,如果有特別想要了解某些版面換成flex該怎麼寫的話,也可以留言給我唷!

原生 CSS 的預處理器:Myth 介紹與使用

昨天閱讀 CSS Secret 時,作者提到了 Myth 這套預處理器,所以研究了一下如何搭配 gulp 作到自動化編譯(compile),以及如何結合 compass 作到 double 自動化 XDD。

Myth 介紹

免不俗的,先來介紹 Myth 吧!他跟 SASS, LESS 有點像又不太像,相同的地方在於他們都是 CSS 的預處理器,不同的是,SASS & LESS 有自己的規則跟語法(例如 mixin, extend)是原生 CSS 不支援的,而 Myth 的所有語法都是原生 CSS 的 spec,就算不用 Myth 編譯也可以在瀏覽器正常瀏覽。

但是,因為瀏覽器還沒有全面支援各種原生 CSS 的 spec,例如之前介紹過的 CSS 變數,所以我們可以利用 Myth 編譯 CSS,假使以後這些 spec 都開放支援了,直接把 Myth 摘除也不會有影響,非常方便!

有哪些原生的 CSS 需要編譯呢?其實功能不多,只有四個 XDD,我直接擷取 Myth 網站的圖片如下:

Variable 與 Math

再次強調,想瞭解 CSS Variable 可參考我之前寫的文章:CSS 原生變數介紹,不過 Myth 沒辦法支援 CSS Variable 所有功能,像是強大的「繼承」功能就無法支援。

我們都知道,所謂「編譯」就是將 CSS 語法寫死,不管是 SASS, LESS, 或是 Myth,即使在寫的時候靈活度很高,但是編譯出來的語法就是固定的。而 CSS variable 是原生的 CSS 語法,跳過編譯這個階段,可以讓語法更加靈活,尤其是前面提到的繼承功能 (這邊扯遠了,有興趣就看我那篇文章啦 XD)

Math 就是calc()語法的應用。

calc()是原生 CSS 裡很強大的一個「活用」語法,他本身是不需要再次被編譯的,但因為calc()可以加入變數作運算,因為牽扯到變數,所以我們需要編譯他們。

Color 與 Prefixes

未來color()也能像 SASS 一樣有lighten()這一類的數值調整,有興趣閱讀 spec 的朋友可以參考 W3C 的 draft:Modifying Colors: the color-mod() function

最後是針對瀏覽器添加的 prefix,以 Compass 為例,我們會寫:

CSS

以編譯成:

CSS

但 Myth 不需要加上@include這一類的函式,我們只要寫一行transition: color .2s;,就可以編譯成相容瀏覽器的語法。

以上就是 Myth 提供的四個核心語法。

如果你有興趣玩玩原生 CSS 的最新函式,也許可以考慮使用 Myth 幫你編譯唷!


安裝與使用 Myth,並搭配 gulp 自動化編譯

請先安裝 myth 這個套件,請使用 npm 套件管理:

Shell

他的使用方法很簡單~,假設我們在 input.css 寫好檔案,想把它編譯成 output.css,只要使用myth指令即可:

Shell

當然,每次要這樣輸入還蠻累的,所以可以搭配 gulp-myth 自動化工具。他除了支援 gulp 之外也有支援 grunt,不過我比較喜歡用 gulp,所以只提供 gulp 的設定方法 XD,如果你自己有在用 grunt,想必如何設定對你也不是難事啦😊 ~

專案目錄結構

先假設我們的專案目錄結構如下:

Plain Text

我們會在 dev/ 底下開發 CSS 檔案,最後希望透過 Myth 幫我們編譯到 build/ 目錄下。

⚒ 先安裝 gulp-myth

Shell

⚒ 新建 gulpfile.js 檔案

JS
gulpfile.js

最後到 terminal 執行gulp就大功告成啦!只要寫好 CSS,就可以透過 gulp 自動幫你編譯成另外一個 CSS,並存放至 build/ 目錄底下唷!


利用 gulp 結合 Compass 與 Myth

Myth 的存在並不是為了取代各種預處理器,透過前面的介紹,希望各位能理解它們存在的意義。Myth 的網站也清楚地提到:

You can still use variables and math functions, just like you do in preprocessors.

所以接下來讓我們試著把這兩個預處理器合在一起吧 ~

我自己使用的預處理器是 Compass,所以等等一樣只以 Compass 做例子,然後這次的目錄結構更改如下:

Plain Text

ps. 記得要先compass create啊 XDDD

⚒ 先安裝 gulp-compass

Shell

⚒ gulpfile.js 設定如下

JS
gulpfile.js

最後同樣到 terminal 執行gulp就完成了。利用 gulp 自動化工具,會先將 scss 檔案編譯完成,再交給 myth 編譯,最後再覆蓋到 stylesheets/ 目錄下。

以上兩種方法提供給各位參考,有興趣使用 Myth 的朋友也可以玩玩看唷~


昨天在看某篇技術文章時,看到最後心有慼慼焉,節錄如下:

大家大可不必過分在意一點點的 CSS 細節,CSS對於產品的商業價值有,但是到了一定階段以後,實際上就有限,或者說很難直觀的體現,或者說性價比就不高了。

以現在瀏覽器的渲染性能以及我們實際的開發需求,就算有差異,有價值嗎,肯定沒有!

大環境如此浮躁,你會發現,自己遇到的困境並不是技術成長遇到了瓶頸,而是根據不需要你這方面進一步的技術成長,來,幹點收益更明顯的事情!

我想,很多前輩技術博客斷掉了,怕也是人在職場,身不由己!

我能不能走出一條不一樣的路呢?

玩這些新的技術到底對現在的工作 / 生活有沒有幫助?其實想想還蠻哀傷的 XDD

不過我又想起了自己寫部落格的初衷,原本就不是要給誰誰誰看,也不是為了流量或是各種附加利益,畢竟我要賺錢我就轉行去寫 美妝 / 3C / 生活了 😂,我之所以想寫這些東西,純粹是為了記錄,畢竟大腦容量有限,我所能做的就是利用紙筆、利用打字幫我記錄下來。如果哪天我忘記了,至少還有這些記錄可以翻閱。

這就是我的初衷,直到現在依然不變,所以轉而想想,也不用怕別人需不需要,不違本心而已 XDD

扯遠了,哈,總之有任何問題都歡迎一起交流討論,針對 gulp 有更好的寫法也歡迎告訴我喔!

inline element 與 padding 的二三事

前兩天在台大上課時,剛好提到 display 的各種形態,然後很嗨森的告訴同學,如果你設定任一元素(element)為 display: inline 時,padding-top 以及 padding-bottom 是不會有作用的唷 😆 😆 😆

結果!!就在我邊說邊示範的這個 moment 時!!!!!

他居然 work 惹 🙀 🙀 🙀 🙀 🙀 🙀

當下整個尷尬的無以復加 XD,所以回家找了一些針對 inline element 的說明,然後順便糾正一下自己的觀念 T皿T

OK,以上內心小劇場 + 碎碎唸完畢,讓我們開始認真吸收一下觀念吧~


我在 Head First HTML with CSS & XHTML 找到了一段針對 inline element 的說明,這段內容敘述非常清楚,可以瞬間導正自己的觀念,所以分享給大家:

You can add padding to the top and bottom of inline element, but the padding doesn’t affect the spacing of the other inline elements around it, so the padding will overlap other inline elements

Head First HTML with CSS & XHTML

簡單來說,inline element 的確可以使用 padding-top 以及 padding-bottom的語法,但 padding 不會推擠周圍的 inline elements,反而會覆蓋其他的 inline elements

不太懂也沒關係,我們就直接來看範例囉~

以 padding-bottom 為例

第一段是以p作範例(display:block),第二段是span(dispaly:inline)。在同樣使用padding-bottom: 1em的設定下,來看一下他們有什麼差別吧!

就我們認知的 HTML element 都是以「堆疊」模式排列而成,所以透過範例可以發現,正常情況我們設定元素的下間距時,他下方的所有元素會因此被往下推擠;但如果將元素的型態改為 inline 時,他下方的元素不會被推擠,反而會讓下方的元素把自己給蓋住。

以 padding-top 為例

我們再來看一個更明顯的例子,現在我把 padding-bottom 改為 padding-top ,看看會發生什麼事情。

如同剛剛說的,元素型態為 inline 時,設定padding-top並不會讓自己的往下推移,而是會覆蓋掉前面的元素。

你可以試著把我在 HTML 寫的這段語法加上 class 變成<span class="padding">

那麼你會發現,同樣的他不會讓自己往下推移,而是會蓋掉前面的元素:

也因此,雖然 inline elements 可以吃到 padding-top 以及 padding-bottom 的設定,但卻不會讓其他元素跟著被推移,造成排版上的一些困擾。我想這就是大家不常使用的原因,導致我只記得結論就是不用 top 跟 bottom XDDD。

如果你之前上過我的課,或是跟我一樣有這種觀念的朋友,希望閱讀這篇文章後可以一起把這個觀念修正過來唷😁

SASS, LESS 退散,原生 CSS 可以使用變數啦!

今天要跟大家分享一個新的 CSS 語法:變數。而且這個變數是原生的 CSS 就有的語法,不是其他預處理器例如 SASS, LESS… 的功能喔!

一想到以後可以使用 CSS 寫變數就超級興奮的😊~,但正因為這是 CSS 的新功能,想當然要考慮的第一個問題就是「瀏覽器的相容度」,透過 Can I Use 查詢後,可以發現支援度真是滿江紅啊 XDDD (紅色=不支援,綠色=支援) 2019.08 更新:現在各大瀏覽器對 CSS 變數的支援度已經慢慢在增加囉!

但因為這功能實在是太實用了,即使支援度不好,我還是想介紹給各位,希望未來所有瀏覽器都能支援,就可以輕鬆地運用在網站上囉!Chrome 跟 Firefox 都有支援 CSS 變數的語法,歡迎使用這兩個瀏覽器觀看效果。

CSS 變數的基本語法

如同我們使用各種預處理器設定變數般,首先要命名變數與設定值,接下來在適當的地方呼叫該變數。

以下是一段簡單的範例語法:

CSS

把握幾個原則:

  • :root命名變數,我們也可以在任意的選擇器內命名變數,後面會提到該怎麼寫,以及怎麼使用。
  • --main-color是變數名字,#369是該變數的值。
  • 承上,變數命名的規則為:開頭必須是兩個破折號 --
  • 在要呼叫變數的選擇器裡面,使用var()呼叫該變數,可以把它想成 function。
  • 變數的大小寫是兩個不同的變數,例:--main-color--Main-Color是不同的變數喔。

變數的命名規則看起來有點麻煩,有一些開發者曾經回饋:「為什麼不用$foo呢?」,而針對這個討論,他們的回應是,不排除這個需求,未來可能會允許使用$作為命名規則,相關的閱讀可以參考這篇文章

CSS 變數繼承觀念

前面有提到,除了可以將變數寫在:root外,還能寫在任意的選擇器,以下是範例語法:

CSS
HTML

也可以從 CodePen 看到實際效果 (記得確認瀏覽器有支援喔)

我們在通用選擇器( * )使用--bg-color語法,照理說,所有的 HTML 都會套用:root的設定。

但同時,我們又特別為h3以及#main設定了不同的背景顏色,因此,當我們的 HTML 有使用這兩個標籤時,他就會自動套用這兩個標籤設定的變數顏色囉!

也因此我們了解到,變數可以因應不同的狀況而更改它的數值 (這不就是變數的精髓嗎 XDDD),我們還能利用這種特性設計 RWD 網站:

CSS

▼ 變數的另外一個特性:可以互相 assign 來 assign 去,也能在 CSS 變數中實現喔!

CSS

這時候呼叫--font-color,他的顏色就是 #369


var() function 結構

var()的完整結構如下:

CSS

cutsom-property-name 是我們呼叫的變數,例如前面使用的--bg-color。我們也能在 declaration-value 設定其他的值,避免自定義的屬性無效時產生錯誤。如果寫成邏輯方程式大概就是:

JS

這種寫法有一種高檔的名詞叫做 fallback,如果你有機會閱讀 W3C 官方文件,會發現他們用 fallback 稱呼該處理。

declaration-value要用「逗號」去分隔多個數值,例如var(--bg-color, #369, black);。但如果要處理例如marginpadding的 fallback 時,請注意他們原本的值就沒有逗號,所以不需加逗號,例:var(--padding, 10px 20px);

如用 CSS 語法表示 fallback 應用,請看以下範例:

CSS

至於這個東西可以怎麼用呢?我暫時也不太懂 XDDD,不過看了一些 CSS Variables 的介紹後,有人提到可以用來作為元件的樣式設定,例如用 fallback 設定元件初始樣式,變數則是當作元件的 hook。

以下做了一個簡單的範例給大家參考,希望可以給大家更多的靈感囉:

CSS
HTML


常見的 var() 錯誤寫法

使用 var() 時,有一些要特別注意的地方

1. var() 的位置

var() 只能設定值,不能作為屬性的變數,以下是錯誤寫法:

CSS

2. var() 不能直接合併單位

CSS

上述寫法並不等於marign-top: 20px,如果我們要這樣設定,必須改用calc()幫我們計算數值。

利用 calc() 計算數值

以前面提到的 margin-top: 20px 為例子,我們可以改寫為:

CSS

calc()是個很好用的計算工具,更多的介紹可以參考 W3C 的 calc() 文件


利用 JavaScript 讀寫 CSS 變數

最後,我們也可以使用 JS 來讀寫 CSS 變數的設定。

  • 讀取:getPropertyValue()
  • 寫入:setProperty()

請直接看以下語法與範例介紹:

JS

使用 Codepen 觀看效果時,記得把第 8 行的註解打開以看不同的效果:


已經很習慣使用預處理器的朋友,可能會對 CSS 變數有所疑問:「我用 SASS 或 LESS 不就好了嗎?」

當然,這些預處理器推出的原意,就是為了補足 CSS 本身的不足,如果今天原生的 CSS 提供了變數的功能,我還是很樂意去了解以及使用,如果一味使用預處理器而不去管原生的 CSS 推出了什麼改變,不覺得有點本末倒置嗎 XDDD。

另外在 W3C 文件裡,也有提到 CSS 變數其實有很多變化,例如以下這段語法:

CSS

雖然我不知道這段語法該怎麼運用,但是從文件看來,這段語法應該是正確且可以跟 JavaScript 有所連結的。這樣看來 CSS 變數真的可以延伸出很多有趣的東西,這些改變都令我非常期待 XD。

也能參考 Google Developers 有趣的一段敘述

While this would not be useful as a variable, as it would be invalid in any normal property, it could potentially be read and acted upon with JavaScript at runtime. This means custom properties have the potential to unlock all kinds of interesting techniques not currently possible with today’s CSS preprocessors. So if you’re thinking 「yawn I have SASS so who cares…」 then take a second look! These are not the variables you’re used to working with.
CSS Variables: Why Should You Care?

以上,希望大家會喜歡這次的介紹囉,有任何問題都可以留言給我 ❤️

參考資料:

用 Bootstrap 3 製作高度相同的 div (column)

排版網頁時,常常會碰到的一個需求,就是希望左右欄位的高度可以相同。而讓欄位的高度相同已經不是什麼新奇的事了,所以今天要分享的是,當你使用 Bootstrap Grid 製作網頁時,該如何將這個效果套用在 Bootstrap 裡。

會想分享這樣的內容,也是因為之前在上 RWD 入門與實戰時,有同學問過這樣的問題。所以就寫成一篇文章分享給大家囉!


使用 flex 讓 column 高度相同

第一個最簡單的方法,就是使用 display: flex 讓所有欄位的高度相同。但 flex 有一個令人哀傷的事實:他不支援 IE9 以下的瀏覽器。但我想 flex 一定是未來排版的主流,所以一樣分享給大家。

你可以從範例語法的 Before 以及 After 看到前後差異。

而我只有在row裡面加上一行語法,即可做到該效果:

CSS

正常情況下,Bootstrap 一行最多容納 12 columns,但如果使用display: flex,同一個rowcol-*總數超過了 12,他們一樣會維持在同一行內,寬度也會自動均分。這是除了瀏覽器相容外,還需要特別注意的一件事。

使用 table 讓 column 高度相同

古早以前如果希望欄位的高度相同,用table不失為一個好方法,雖然現在我們不再使用表格做排版,但依然可以使用display: table將所有標籤的型態作轉換。

此外display: table的瀏覽器支援度很好,雖然語法較多,但是考量到 IE9 以下的兼容的話,推薦大家使用該方法。

Bootstrap 有 row 以及 column 的設定,所以在結構上很適合加入display: table,不需要再給予多餘的 DIV:

CSS

☞ 補充

  • 使用display: table之後,寬度會等於行內元素(inline elements),因此記得要加上width: 100%;讓寬度等於父層的寬度。
  • 記得在col-*將所有浮動給移除(float: none),不然display: table不會有作用。

以上兩種方法好記又方便,如果搭配 Bootstrap,也不需要增加額外的 DIV 標籤,希望大家會喜歡囉~

codyhouse 的 tooltip 線上教學筆記與心得

剛剛收到一封 codyhouse 的線上課程通知,這一期他們推廣的是 CSS animation 應用,好奇點進去後發現有一堂課程是免費的,所以就打開來聽聽看啦 ~

▼ 有 play 可以選的 tooltip 就是這期的免費課程啦

花了半小時聽完後覺得受益良多,雖然講者的口音有點重,但可以把影片字幕打開,也可以直接看程式碼,聽完之後也是對其他付費課程有所心動 XD,非常棒的行銷手法呢,先試聽一堂課喜歡再買 😀

因為他的 youtube 影片連結是公開的,所以我也放一份在我的 blog 裡面,以下是自己聽完做的一些筆記跟重點,很多語法我自己也已實作了,所以看到國外講師也是這樣寫覺得很開心 😊

總之我覺得不錯的語法都會重點摘錄出來給大家參考,希望對你們有所幫助 🌹

筆記與心得

  • aria-hidden:HTML5 語意,用於屏幕閱讀器的,幫助殘障人士更好的訪問網站。(參考來源)
  • 萬年水平垂直置中的另一種方法:
CSS
  • 文字如果要垂直置中,可以將height以及line-height設定成一樣的高度,但文字必須維持一行才有用。
  • 如果不希望hover影響隱藏的元素,可以改用visibility: hidden將元素隱藏,這樣滑鼠移過之後也不會啟動hover效果
  • visibility可以用在transition,但display不行
  • 假設元素的寬度是50px可以善用calc(50% - 25px)將元素置中
  • 利用偽元素製作三角形:
CSS

偶爾聽聽外國人的線上課程也很棒,可以學到很多不一樣的寫法以及詮釋的方法,codyhouse 的範例跟教學品質都很棒,有興趣可以連回他們的網站看更多資料唷: https://codyhouse.co/

讓 Facebook 社交小工具(Page Plugin)能有 RWD 的效果


Facebook 的 Page Plugin (原先的 like box)預設沒有提供 RWD 的效果,如果希望小工具也可以用 RWD 效果的話,可以在 CSS 加入以下程式碼:

CSS

語法來源:http://stackoverflow.com/questions/10656038/how-to-make-the-facebook-like-box-responsive