0.基本概念
採用 Flex 佈局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 專案（flex item），簡稱"專案"。
1.傳統固定佈局：
實現方法：用width和height指定寬高px值、以及float浮動
缺點：有空白、且無法隨瀏覽器視窗變化而調整大小和佈局
2.百分比佈局：
實現方法：用width和height指定寬高%值，以及float浮動
缺點：有空白
3.Flex伸縮佈局：
實現方法：
3.1.給容器元素設定display:flex屬性
3.2.通過給【專案】(容器內子元素)的flex屬性，來設定專案比例。例如專案A的flex:1,專案B的flex:2，表示A與B的寬度為1:2
3.3.flex-direction排列方向（主軸）:
row: 預設.把專案排列的主軸設定為水平方向，從左到右
row-reverse: 水平方向，從右到左
column: 垂直方向，從上到下
column-reverse: 垂直方向，從下到上
3.4.flex-wrap單行/多行:
nowrap: 預設.不換行
wrap: 換行
wrap-reverse: 倒序換行
3.5.justify-content主軸對齊方式:
flex-start: 向主軸起始位置靠攏對齊
flex-end: 向主軸結束位置靠攏對齊
center: 主軸方向居中
space-between: 兩頭對齊（中間空白）
space-around: 平均分佈（兩頭、中間空白）
3.6.align-items側軸對齊方式:
flex-start: 向主軸起始位置靠攏對齊
flex-end: 向主軸結束位置靠攏對齊
center: 主軸方向居中兼
baseline: 兩頭對齊（中間空白）
stretch: 平均分佈（兩頭、中間空白）

4.響應式佈局方案：
4.1.媒體型別：all、screen、print、tv、projection等
4.2.引入媒體型別兩種方式：
@media print{
div{height:10px}
}

      <link rel="stylesheet" href="style1.css" media="print"/>
 4.3.媒體特性
      max-width:          最大寬度
      min-width:         
      device-width:     裝置螢幕輸出寬度
      device-height:     裝置螢幕輸出高度
      width:               渲染介面寬度
      height:               渲染介面高度
      orientation:     portrait橫屏/landspace豎屏
      resolution:          解析度
      color:               每種色彩位元組數
      color-index:     色彩表中的色彩數
 4.4.媒體查詢語法：
      @media [and/only/not] 媒體型別 and/only/not (媒體特性) {樣式}
      【舉例】：
      1.樣式用於電腦顯示屏和螢幕寬度小於1200px的裝置
      @media screen and (max-width:1200px){樣式}
     
      2.用於瀏覽器相容。用於支援媒體型別(screen)卻不識別媒體特性(max-width)的老瀏覽器
      <link rel="stylesheet" href="sty.css" media="only screen and (max-width:500px)"/>
     
      3.樣式用於除印表機和螢幕小於1200px之外的所有裝置
      @media not print and (max-width:120px){樣式}
 

5.響應式佈局設計模式
佈局不變，
內容擠壓-拉伸
換行-平鋪
增減內容
佈局改變
模組位置變換
模組展示方式改變
模組數量改變

6.響應式佈局兩個前提：
6.1.能自動調整佈局（彈性佈局）
6.2.能自動感知裝置大小