Flexbox響應式網頁佈局 - W3Schools視頻02

今日繼續W3Schools響應式網頁佈局的實現，採用Flexbox方案。使用Flexbox實現響應式網頁佈局是目前最流行的做法。如果你對Flexbox並不熟悉，可以查看W3Schools的教學：

• W3Schools Flexbox教學
• Flexbox實現響應式網頁佈局例子

視頻連結

• B站
• YouTube

Flexbox響應式網頁佈局

透過Flexbox實現響應式網頁佈局同樣可分爲三步：

1. 將容器顯示爲flex，並讓它wrap；
2. 將需要響應的元素放在容器當中，並用百分比設定每一個元素的basis；
3. 通過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。

1. Float響應式網頁佈局
2. Flexbox響應式網頁佈局 - W3Schools視頻02