弹性盒布局、媒体查询

（一）弹性盒
1.设置在容器（父元素上）上：

(1)display:flex; 父元素设置成弹性盒。
     规定子项目在父元素主轴方向一行显示，不会换行。侧轴方向会默认拉伸。
   
 (2)设置主轴方向 flex-direction
     属性值: row 默认为水平向右
            column 垂直向下
            row-reverse 水平向左
            column-reverse垂直向上

(3)flex-wrap 伸缩换行
      属性值：nowrap默认不换行	wrap换行
                         
(4)flex-flow:flex-direction||flex-wrap; 伸缩流主轴方向及换行

(5)设置子项目在容器主轴方向的对齐方式justify-content
      属性值：flex-start 	    默认在主轴方向起点位置对齐
          	   flex-end 	    在主轴方向终点位置对齐
          	     center                中间
          space-between  将空白区域平分在子项目之间 
           space-around 	 将空白区域环绕在子项目两边

(6)设置子项目在其所在行的侧轴对齐方式 align-items（单行）
      属性值：stretch		默认拉伸
              flex-start 	子项目在其所在行的起始位置摆放
              flex-end   子项目在其所在行的结束位置摆放
              center                         中间
              baseline  	子项目在其所在行以基线对齐

  (7)设置子项目在侧轴方向的对齐方式 align-content(控制多行)
        属性值参考justify-content

2.设置在子项目上

(1) flex:number; 设置子项目在父元素主轴方向的比份
        width:10%;
(2) 设置单个子项目在其所在行的侧轴对齐方式align-self
            值参考align-items的属性值

(3)order设置子项目的顺序。
         写了order的排在没有order属性的元素后面。
         写了order的，属性值越小的在越前面。

(二) 媒体查询
页面结构简单使用
屏幕分界点：
超小屏幕xs （移动设备）768px以下
小屏设备sm 768px-992px
中等屏幕md 992px-1200px
宽屏设备lg 1200px以上*/

 1.语法 @media screen and (条件){css语法}
 2.  (1)最小宽度min-width  若当前页面宽度大于min-width的值时，则样式生效。所以媒体查询min-width应从小写到大;
    div{
         height:200px;
         background: pink;
     }
     @media screen and (min-width:768px){
         div{background: red;}
     }
     @media screen and (min-width:992px){
         div{background: green;}
     }
     @media screen and (min-width:1200px){
         div{background: blue;}
     }
  (2)最大宽度 max-width
        页面宽度小于768px,背景色为pink。768-992,red. 992-1200，green。1200+,blue
        div{
            width: 800px;
            height: 800px;
            background: blue;
        }
        @media screen and (max-width:1200px){
            div{background: green;}
        }
        @media screen and (max-width:992px){
            div{background: red;}
        }
        @media screen and (max-width:768px){
            div{background: pink;}
        }

(3) 设备整个显示区域的最小宽度min-device-width
        页面宽度小于768px,背景色为pink。768-992,red. 992-1200，green。1200+,blue
       div{
            height:200px;
            background: pink;
        }
        @media screen and (min-device-width:768px){
            div{background: red;}
        }
        @media screen and (min-device-width:992px){
            div{background: green;}
        }
        @media screen and (min-device-width:1200px){
            div{background: blue;}
        }