響應式網頁設計並沒有一個通用標準。重要的是，在不同的螢幕大小上，網頁都能夠被正常的瀏覽，沒有排版的問題發生。以下為幾個設計原則：

  1. 專注於螢幕大小，而非裝置。世界上的裝置有無數種，所以在響應式網頁設計上，只需要設計給小、中、大、超大螢幕這些大方向的類型即可。320px~480px屬於行動裝置、481px~768px屬於平板裝置、769px~1024屬於小型螢幕或筆電、1025px~1200px屬於桌上型電腦，1200px以上屬於大型螢幕或電視。
  2. 能用flexbox處理，就用flexbox處理。不能用flexbox，就用media query處理。
  3. 圖片與其他元素應該要隨著螢幕的大小變化，而改變。

Flexbox

現代網頁的佈局排版要配合響應式網頁的設計理念，所以需要一種事半功倍的CSS寫法。Flexbox佈局背後的主要思想是讓容器能夠改變其項目的寬度/高度（和順序）以最好地填充可用空間（主要是為了適應各種顯示設備和屏幕尺寸）。 彈性容器擴展項目以填充可用的可用空間或縮小它們以防止溢出。

以下的內容皆可在https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 找到。

Properties for the Parent (flex container)

display: flex 是一種inner display type。 任何定義display: flex的元素皆為flex container，而此元素內部的HTML元素皆為flex item。 flex item本身可再定義display: flex變成flex container，所以一個HTML元素可同時為flex container以及flex item。對於這個HTML元素來說，outer display type是flex item，inner display type是flex

Untitled

flex container可設定display: flex後，能夠設定的屬性包含：

  1. flex-direction
  2. flex-wrap
  3. justify-content
  4. align-items

flex-direction

flex-direction 屬性設置 flex items如何放置在flex 容器中的主要配置方向(main axis)。可使用的值包含：

  1. row – flex items橫向放置
  2. column – flex items直向放置
  3. row-reverse - flex items橫向相反放置