css媒体查询

媒体查询：
作用：实时捕获设备的分辨率
场景：响应式页面布局

手机：<768px
平板:>=768 --- <= 991px
普通pc ： >=992px ---- <= 1199px
pc ：  >1200px
@media 
not 
only
and 

mediatype:
screen
print
speech
。。。

@media [not|only] srceen and (express) and (express)....{
     选择器{
         
     }
    选择器{
             
    }
    .....
}
根据分辨率引入css文件:
<link href="" media="srceen and (express) and (express)" rel="stylesheet" />
import "xxx.css"

flex布局(弹性布局)：
display:inline|inline-block|block|hone|flex;
display:flex;
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

使用：
1、移动端布局排版(手机)
2、替代部分 float 布局

弹性盒子的内部元素排列：
X  主轴（默认）
Y  交叉轴(从轴) 

****依据主轴的方向进行排列。***

容器属性：
 flex-direction：设置主轴的对齐方向（row|row-reverse|column|column-reverse）
 flex-wrap:项目排列是否换行（no-wrap|wrap）
 flex-flow：简写模式 主轴+换行 row no-wrap;
 justify-content:项目在主轴上的对齐方式（center|flex-start|flex-end|space-around|space-betheew）
 align-items:项目在交叉轴上的对齐方式（center|flex-start|flex-end）
 align-content：多跟轴线上的对齐方式 
 
 项目属性：
 order:  排序 默认 0      排序值越小越靠前
 flex-grow：成长比    默认 0  number;
 flex-shrink:缩小比   默认 1  0（不缩小）
 flex-basis：auto
 flex：简写方式 flex-grow+flex-shrin [flex-basis]
 align-self：项目在交叉轴的对齐方式