响应式网页、弹性布局

响应式网页设计:是页面设计与开发根据用户系统平台、屏幕尺寸、屏幕定向进行相应的响应和调整

viewport:用户网页的格式区域,对响应式来说它是非常重要的，因为它可以告诉我们浏览器如何处理这些页面和尺寸

弹性盒子:不使用浮动和框架情况下实现元素排列

1、弹性盒子是css3的一种新布局模式

2、代替浮动使布局更加简便

3、对齐方式包含了水平方向和垂直方向

4、弹性项目可以通过css重新排序

 /* 项目在主轴上的对齐方式 */
      justify-content: space-evenly;
      /* justify-content value:
      flex-start(默认值)
      flex-end
      center
      space-between
      space-around
      space-evenly 
      */
      height: 600px;
      /* 项目在交叉轴的对齐方式(需要设置高度) */
      align-items: baseline;
      /* 
      stretch(默认值)
      flex-start
      flex-end
      center
      baseline
      */
      align-content: stretch;
      /* flex-start
         flex-end
         center
         space-between
         space-around
         stretch(默认值)
      */
    }

.item-2 {

      align-self: center;

      /*

      auto(默认值)

      flex-start

      flex-end

      center

      baseline

      stretch

      */

      order: 2;

    }