Flexbox響應式網頁佈局 - W3Schools視訊02
今日繼續 W3Schools響應式網頁佈局 的實現,採用 Flexbox 方案。使用Flexbox實現響應式網頁佈局是目前最流行的做法。如果你對Flexbox並不熟悉,可以檢視W3Schools的教學:
視訊連結
Flexbox響應式網頁佈局
透過Flexbox實現響應式網頁佈局同樣可分為三步:
- 將容器顯示為flex,並讓它wrap;
- 將需要響應的元素放在容器當中,並用百分比設定每一個元素的basis;
- 通過 Media Query 將容器的flex方向改為column(預設為row)。
在W3Schools的例子中,Flex容器是這樣設定的:
.row { display: flex; flex-wrap: wrap; }
容器當中的兩欄,即Flex專案:
/* Sidebar/left column */ .side { flex: 30%; background-color: #f1f1f1; padding: 20px; } /* Main column */ .main { flex: 70%; background-color: white; padding: 20px; }
最後是媒體查詢,斷點設在700px:
@media screen and (max-width: 700px) { .row { flex-direction: column; } }
改進:移動優先
同樣地,我們也對這個例子進行移動優先的改進,當作是練習。
Flex容器:
.row { display: flex; flex-direction: column }
Flex專案:
.side { padding: 20px; background-color: #f1f1f1; } /* Main column */ .main { padding: 20px; background-color: white; }
媒體查詢:
@media screen and (min-width: 700px) { .row { flex-direction: row; } .side { flex: 30%; } .main { flex: 70%; } }
一樣是,將媒體查詢內外的內容交換。
W3Schools系列的程式碼都在GitHub上: W3Schools GitHub
W3Schools教學系列
W3Schools 是知名的網頁設計/前端開發教學網站,不僅提供HTML、CSS、JavaScript等的詳盡教學,還可以把它當作說明檔案(Documents)。有經驗的前端或多或少已經接觸過這個網站,因為它經常出現在搜尋結果的前幾項。其中,它的 How To 部分更是包含了大量非常實用的例子,例如,如何製作SlideShow(圖片輪播)、Lightbox、Parallax(視差效果)等等。因此我想做一系列的影片專門介紹這些How To。