画布 1
移动web第三天
  全天目标
    了解移动端与PC端屏幕和网页布局的差异，能够使用Flex布局模型布局移动端网页
  百分比布局
    目标
      了解百分比布局方案
    学习内容
      特点
        流式布局
        宽度自适应，高度固定
      布局方式
        宽度为半分比写法
  FLex布局
    目标
      使用Flex布局模型完成网页基本布局效果
    学习内容
      Flex的优势和特点
        浏览器提倡的布局模型，页面渲染性能高
        布局简单、方便
        避免浮动脱标的问题
        兼容性较高（不兼容低版本浏览器）
      组成部分
        弹性容器（父级， 添加display:flex的盒子）
        弹性盒子（子级）
        主轴（默认水平）
        侧轴（默认垂直）
      主侧轴对齐方式
        主轴
          justify-content
            center：居中
            space-between：间距出现在弹性盒子之间
            space-evenly：父子级间距都相同
            space-around：间距出现在弹性盒子两侧
              视觉效果: 子级之间的间距是父级左右两侧间距的2倍
        侧轴
          align-items（控制所有弹性盒子）
            center：居中
            stretch：默认值， 拉伸
          align-self（控制某个弹性盒子）
      弹性伸缩比
        flex: 整数数字;
        占用父级剩余尺寸的份数