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
繳付學費，過程簡便！
