弹性盒子，响应式布局

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，且不允许用户点击屏幕放大浏览；

2. <meta content="telephone=no,email=no" name="format-detection" />
   注：取消拨打电话的默认事件

3. 媒体查询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之间的设备