弹性盒 & 媒体查询

弹性盒

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；
  页面宽度768px -992px：  背景色为red；
  页面宽度992-1200：    背景色为green；
  页面宽度1200px+：     背景色为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;
  页面宽度768px-992px：    背景色为red;
  页面宽度992px-1200px：    背景色为green;
  页面宽度1200px+：     背景色为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;}
}