CSS3 Flexible Box,簡稱 Flexbox,是 W3C (World Wide Web Consortium) Candidate Recommendation。Flexbox 是被視為響應式佈局的新一代概念。Flexbox 能令我們以更簡單的方式實踐響應式佈局的效果。配合 Flexbox,我們能夠實踐:
《CSS3 Flexible Box (Flexbox) 響應式佈局 (Responsive Layout) 課程》是一個 6 小時的課程。在課程的初段導師會扼要地為大家溫習及學習 Flexbox 的必要背景 CSS 概念,然後會逐一教授各種 Flexbox 技術。學習過各種 Flexbox 技術後,最後導師會教授同學使用 Flexbox 實踐多種常用的網頁元件,如 responsive grid、responsive holy grail、card layout、responsive menu、responsive image (相簿)、responsive iframe 等技術,令同學可以從多角度了解如何將 Flexbox 技術實踐出來。本課程旨在令大家有效地學習 Flexbox,令大家在處理網頁佈局時多了一把利刀!
第一部份:必要的背景 CSS 概念 在課程的初段導師會扼要地為大家溫習及學習 Flexbox 的必要背景 CSS 概念。
第二部份:各種 Flexbox 技術 在這部份導師會透過一系列的實習教授各種 Flexbox 技術。
第三部份:實際使用 Flexbox 的例子 在這部份導師會教授同學使用 Flexbox 實踐多種常用的網頁元件,如 responsive grid、responsive holy grail、card layout、responsive menu、responsive image (相簿)、responsive iframe 等。
1 CSS3 Flexbox 介紹 1.1 Grid System (Responsive) 1.2 Holy Grail (Responsive) 1.3 Input Add-ons / Input groups (Responsive) 1.4 Responsive Menus 1.5 Responsive Images 1.6 Responsive Videos 1.7 Card layouts 1.8 水平及垂直地置中 (Responsive) 2 開發環境 (Integrated Development Environment) 2.1 下載開發環境 (Integrated Development Environment) 軟件 2.2 安裝開發環境 (Integrated Development Environment) 軟件 2.3 新增項目 (Projects) 2.4 新增及準備 HTML 2.5 新增及準備 CSS 2.6 執行並檢視結果 3 必要的 CSS 概念 3.1 Selectors 3.1.1 Class selectors 3.1.1.1 實習:Class selectors 3.1.2 ID selectors 3.1.2.1 實習:ID selectors 3.1.3 其他 selectors 參考 3.1.3.1 Attribute selectors 及相關的示範 3.1.3.2 Sibling selectors 及相關的示範 3.1.3.3 Descendant selectors / Child selectors 及相關的示範 3.1.3.4 Pseudo-classes 及相關的示範 3.1.3.5 Pseudo-elements 及相關的示範 3.2 CSS 單位 (Units) 3.2.1 絕對單位 (Absolute units) 3.2.2 相對單位 (Relative units) 3.2.2.1 em 3.2.2.2 vw 與 vh 及相關的示範 3.2.2.3 百分比 (%) 及相關的示範 3.3 CSS Box model 3.3.1 margin, border, padding, width, height 與 content 3.4 Media queries 及相關的示範 3.4.1 綜合例子 3.4.1.1 綜合例子:max-width 3.4.1.2 綜合例子:min-width and max-width 3.4.1.3 綜合例子:min-width 4 各種 Flexbox 技術 4.1 基本術語 4.1.1 axis (main, cross), main (start, end), cross (start, end), flex container, flex item 4.1.1.1 水平 4.1.1.2 垂直 4.1.1.3 軸 4.1.1.4 大小 4.2 Flex containers 4.2.1 新增 flex containers 4.2.1.1 實習:新增 flex containers 4.2.2 Flex containers 內的物件排列方向 (橫向 [row] 與縱向 [column]) 4.2.2.1 實習:Flex containers 內的物件排列方向 (橫向 [row] 與縱向 [column]) 4.2.3 一行 VS 多行 4.2.3.1 實習:一行 4.2.3.2 實習:多行 4.2.4 結合方向、一行及多行設定的 flex-flow 4.2.4.1 實習:結合方向、一行及多行設定的 flex-flow 4.2.5 處理 x-axis 多出來的空間 4.2.5.1 flex-start 4.2.5.2 flex-end 4.2.5.3 center 4.2.5.4 space-around 4.2.5.5 space-between 4.2.5.6 實習:處理 x-axis 多出來的空間 4.2.6 處理 y-axis 多出來的空間 4.2.6.1 baseline 4.2.6.2 stretch 4.2.6.3 center 4.2.6.4 實習:處理 y-axis 多出來的空間 4.2.7 處理因為 wrap 而多出來的空間 4.2.7.1 實習:處理因為 wrap 而多出來的空間 4.3 Flex items 4.3.1 次序 4.3.1.1 實習:次序 4.3.2 發展 (growth) 4.3.2.1 實習:發展 (growth) 4.3.3 收縮 (shrink) 4.3.3.1 實習:收縮 (shrink) 4.3.4 預設的長度 4.3.4.1 實習:預設的長度 5 實際使用 Flexbox 的例子 5.1 Responsive Grid System 5.1.1 Responsive Grid System (第一部份:大小相同) 5.1.2 Responsive Grid System (第二部份:大小不一) 5.2 Holy Grail Layout 5.2.1 甚麼是 Holy Grail Layout? 5.2.2 原理 5.2.3 實習:Holy Grail Layout 5.2.4 實習:Holy Grail Layout (with sticky footer) 5.2.4.1 原理 5.2.4.2 實踐 5.3 水平與垂直置中 5.3.1 實習:水平與垂直置中 5.4 Responsive card layout 5.4.1 實習:Responsive card layout 5.5 Responsive 圖片 / 相簿 5.5.1 實習:Responsive 圖片 / 相簿 5.6 Responsive YouTube 5.6.1 實習:Responsive YouTube 5.7 Responsive Videos 5.7.1 實習:Responsive Videos 5.8 Responsive Input Add-ons / Input Groups 5.8.1 Iconic Font 5.8.2 實習:Responsive Input Add-ons / Input Groups 5.9 Responsive Menus 5.9.1 Responsive Menus (第一部份) 5.9.1.1 實習:Responsive Menus (第一部份) 5.9.2 Responsive Menus (第二部份) 5.9.2.1 實習:Responsive Menus (第二部份) 5.10 Responsive Text 5.10.1 實習:Responsive Text 6 Vendor Prefix 6.1 實習:自動地加上 prefixes