Flexbox響應式網頁佈局 - W3Schools視訊02
摘要：
今日繼續 W3Schools響應式網頁佈局 的實現，採用 Flexbox 方案。使用Flexbox實現響應式網頁佈局是目前最流行的做法。如果你對Flexbox並不熟悉，可以檢視W3Schools的教學：
W3Schools Flexbox教學
Fle...
今日繼續 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。