彈性盒子，響應式布局

Flexbox模型：

1. 伸縮容器display(用于伸縮容器)

   display:flex | inline-flex;

   flex：塊伸縮容器

   inline-flex：内聯伸縮容器

   float、clear和vertical-align在伸縮項目上沒有效果。
2. 伸縮流方向flex-direction(用于伸縮容器)

   flex-direction：row | row-reverse | column | column-reverse ;

   row：在ltr排版方式下從左向右排列，在rtl排版方式下從右向左排列

   column:類似于row，不過是從上到下排列

   row-reverse和column-reverse是與對應的row和column排列方向相反

   主要用來建立主軸，進而定義 了伸縮項目放置在伸縮容器的方向

3. 主軸對齊justify-content(用于伸縮容器)

   justify-content：flex-start | flex-end | center | space-between | space-around

   主要用來定義伸縮項目沿着主軸線的對齊方式。
4. align-items和align-self

   align-items(self)：flex-start | flex-end | center | baseline | strecth

5. 顯示順序order

   order : number

響應式布局

1. <meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"name="viewport" />

注：強制讓文檔的寬度與裝置的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許使用者點選螢幕放大浏覽；

1. <meta content="telephone=no,email=no" name="format-detection" />

   注：取消撥打電話的預設事件

2. 媒體查詢media

   @media screen and (min-width:1000px) {} ：适應PC端

   @media (min-width: 400px) and (max-width:401px){} : 裝置獨立像素為400px

   @media (min-width: 640px) and (max-width:999px){}:獨立像素為640px-999px之間的裝置