js基础与flex布局

1.变量提升

1.用var定义的变量会变量提升

2.定义的函数会变量提升

3.在函数体内，直接定义变量 num=100，在全局作用域下也可以访问

   // 变量提升:用var定义变量，变量会提升到顶部，值为undefined
     console.log(num)
     var num = 100;


    /**********************/

    //var 变量提升
    var num;
    console.log(num)
    num = 100;

    console.log(num)
    num = 100;


    /*********************************/
    // var num=100;          //③全局变量，在任何位置可以访问
    function Demo() {

      // var num = 100;      //①局部变量
      num = 100;          //②定义的全局变量，在函数外部可以访问

    }
    Demo()
    console.log(num)


    /****************************/

    // 函数也会提升
    Demo()          //100

    function Demo() {
      num = 100;
      console.log(num)

    }

flex布局

父元素属性

• flex-direction 调整主轴方向

  row   			行排布
  row-reverse		同一行反向排布
  column			列排布
  column-reverse		同一列反向排布

• justify-content 主轴子元素排列

  flex-start  		从头部排列
  flex-end		从尾部排列
  center			居中排列
  space-around		平分剩余
  space-between		两边贴边，平分剩余

• align-items 侧轴方向，子元素的排列

  flex-start		从上到下
  flex-end		从下到上
  stretch			拉伸（子元素去掉高度）
  center			居中

• flex-wrap属性 子元素是否换行

  wrap    换行
  no-wrap    不换行

• flex-flow 属性： 复合属性，flex-direction和flex-wrap

  flex-flow:row-wrap

• align-content属性 子元素整体，在父元素中的对齐方式

  flex-start		侧轴头部排列
  flex-end		侧轴尾部排列
  center			居中排列
  space-around	        侧轴平分空间
  space-between	        两侧贴边，平分剩余空间

子元素属性

• flex属性 份数

  flex:1

• align-self属性 自己的对齐方式

  stretch			拉伸
  center			居中
  start			左对齐
  end			右对齐

• order属性 排序