一. 響應式佈局

1. 移動端響應式佈局必須加：
<meta name="viewport" content="width=device-width,initial- 
scale=1.0,maximum-scale=1,user-scalable=no"/>
<meta name= "format-detection" content="telephone=no,email=no"/>

2. 響應式佈局一般使用外部樣式表：
<link rel="stylesheet" href="css/main.css"/>
main.css中：
/*引入電腦端樣式*/
@import "computer.css" screen and (min-width:
640px);
/*引入移動端樣式*/
@import "mobile.css" screen and (max-width:
640px);

或者：
<!-- 引入computer樣式-->
<link rel="stylesheet" href="css/computer.css"  
media="screen and (min-width:640px)" />
<!-- 引入mobile樣式-->
<link rel="stylesheet" href="css/mobile.css"    
media="screen and (max-width:640px)" />

注意：
and後面必須要有空格！！！
min-width即：顯示該css樣式的最小解析度，小於該
解析度時樣式失效。
max-width即：顯示該css樣式的最大解析度，大於該
解析度時樣式失效。

二. 彈性佈局

1. 使用彈性佈局
如：
.container{
height: 400px;
border: 1px solid red;
display: flex;
}

2. flex-wrap:內容排放方式（是否換行）
flex-wrap: wrap;//放不開，換行
結果：

flex-wrap:nowrap;（預設）//放不開，下一行
結果：

flex-wrap:wrap-reverse;//反向換行
結果：

3. flex-direction: 內容排放方式（列還是行）
flex-direction:column;列（豎著排列）
結果：

flex-direction: row;行（橫著排列，預設樣式）
結果：

flex-direction: row-reverse;行（橫著反轉）
結果：

flex-direction: column-reverse:列（豎著反轉）
結果：

4. justify-content:內容對齊方式（行方向要怎麼對齊）
justify-content: flex-start//貼著左邊
結果：

justify-content: flex-end//貼著右邊
結果：

justify-content: center;//居中
結果：

justify-content: space-between//左邊頂到最左邊，右
邊到最右邊，中間有空隙
結果：

justify-content: space-around//左邊有空隙，右邊有
空隙，中間也有空隙
結果：

總結：

5. align-items: 內容對齊方式（列方向要怎麼對齊）
align-items:flex-start
結果：

align-items:flex-end
結果：

align-items:center
結果：

總結：

6. align-content:內容對齊方式（內容整體怎麼對齊）
align-content:flex-start
結果：

align-content:flex-end
結果：

align-content:center
結果：

align-content: space-between;
結果：

align-content: space-around;
結果：

align-content: stretch;
結果：

總結：

7. 空間處理：
①、 flex-grow: 1;
一行中多餘的空間分配時按照1份分配

②、 flex-basis: 400px;
基礎大小，和width類似

③、 flex-shrink: 1;
一行中空間不足時按照一份縮小

注意：如果元素不是彈性盒物件的元素，則 flex-* 屬性不起作用。

圖片太多就不一 一上傳了，需要的請看我的筆記：