CSS3 Flexible Box (Flexbox) 響應式佈局 (Responsive Layout) 課程

課程時間
課程簡介
課程內容
詳細內容

課程優惠！現凡同時報讀以下兩個課程：

即減 $130！

推介服務：課堂錄影隨時睇

編號	地點	可預約星期及時間	學費低至 85 折
1T1906MV	旺角	一至五：11:30 - 22:30 六及日：10:30 - 21:30 (公眾假期休息)	95 折後只需 $741
1T1906OV	觀塘	一至五：13:30 - 22:00 六及日：12:30 - 21:00 (星期三及公眾假期休息)	9 折後只需 $702
1T1906PV	北角	一至五：13:30 - 22:00 六及日：12:30 - 21:00 (星期三及公眾假期休息)	9 折後只需 $702
1T1906SV	沙田	一至五：13:30 - 22:00 六及日：12:30 - 21:00 (星期三及公眾假期休息)	85 折後只需 $663
1T1906YV	屯門	一至五：13:30 - 22:00 六及日：12:30 - 21:00 (星期三及公眾假期休息)	85 折後只需 $663

* 各政府部門可使用 P Card 付款

免費試睇：

首半小時，請致電與本中心職員預約。查看各地點電話

旺角	2332-6544
觀塘	3563-8425
北角	3580-1893
沙田	2151-9360
屯門	3523-1560

免費重睇：

學員可於享用時期內於報讀地點不限次數地重看課堂錄影，從而可反覆重溫整個課程！

導師解答：

學員可於觀看某一課堂錄影後提出課堂直接相關的問題，課程導師會樂意為學員以單對單的形式解答！

課時：

6 小時

享用時期：

報讀日至 2 星期內，進度由您控制，可快可慢。

課堂錄影導師：

Franco (任教課程清單)

課堂錄影隨時睇：

詳情及示範片段

地區	地址	電話	教育局註冊編號
旺角	九龍旺角亞皆老街 109 號，皆旺商業大廈 18 樓	2332-6544	533459
觀塘	九龍觀塘成業街 7 號寧晉中心 12 樓 G2 室	3563-8425	588571
北角	香港北角馬寶道 41-47 號華寶商業大廈 3 樓 01-02 號舖	3580-1893	591262
沙田	新界沙田石門安群街 3 號京瑞廣場 1 期 10 樓 M 室	2151-9360	604488
屯門	新界屯門屯喜路 2 號屯門柏麗廣場 17 樓 1708 室	3523-1560	592552

注意！客戶必須查問報讀學校的教育局註冊編號，以確認該校為註冊學校，以免蒙受不必要的損失！

下一頁：課程簡介

CSS3 Flexible Box，簡稱 Flexbox，是 W3C (World Wide Web Consortium) Candidate Recommendation。Flexbox 是被視為響應式佈局的新一代概念。Flexbox 能令我們以更簡單的方式實踐響應式佈局的效果。配合 Flexbox，我們能夠實踐：

Grid System (responsive)

Holy Grail (responsive) [大家可以參考製作 Holy Grail 所面對的問題 (https://en.wikipedia.org/wiki/Holy_Grail_(web_design)#The_problem)，而 Flexbox 就是被維基百科描述為 “the most mature proposal” (https://en.wikipedia.org/wiki/Holy_Grail_(web_design)#Current_solution)]

Input Add-ons / Input group (responsive)

水平及垂直地置中 (responsive) [無需使用 absolute positioning, CSS3 transform, padding, line height, CSS table 等方法實踐]

Responsive Menu

更多，請參考課程內容。

《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，令大家在處理網頁佈局時多了一把利刀！

課程時數：	合共 6 小時。
適合人士：	對 CSS 有基本認識
授課語言：	以廣東話為主，輔以英語。
課程筆記：	本中心導師親自編寫中文為主筆記，而部份中文字附有英文對照。
免費重讀：	傳統課堂學員可於課程結束後三個月內免費重看課堂錄影。

上一頁：課程時間

下一頁：課程內容

第一部份：必要的背景 CSS 概念
在課程的初段導師會扼要地為大家溫習及學習 Flexbox 的必要背景 CSS 概念。

Selectors
Margin
Border
Padding
Content
Viewport (vw, vh 等概念)

第二部份：各種 Flexbox 技術
在這部份導師會透過一系列的實習教授各種 Flexbox 技術。

基本術語

main axis
main start
main end
cross axis
cross start
cross end
flex container
flex item

flex container

display
flex-direction
flex-wrap
flex-flow
justify-content
align-content
align-items

flex item

flex
flex-grow
flex-shrink
flex-basis
align-self
order

第三部份：實際使用 Flexbox 的例子
在這部份導師會教授同學使用 Flexbox 實踐多種常用的網頁元件，如 responsive grid、responsive holy grail、card layout、responsive menu、responsive image (相簿)、responsive iframe 等。