ES6对象新增语法

---

前端样式布局两栏布局

---

1.两栏布局用在何处

• 左边栏固定，右边栏根据视口进行自适应

  2.进行两栏布局的方式方法有哪些

• 2.1 float + margin
• 2.2 flex 布局
• 目前我实际用过的就这两种

3.具体实现

3.1 flat + margin

    /* 第一种实现
      left固定宽度左浮动，right 宽度width: auto;
     */
    .main{
      width: 100%;
      height: 1000px;
      background-color: #eee;
    }
    .left{
      width: 300px;
      height: 100%;
      float: left;
      background-color: red;
    }
    .right{
      width: auto;
      height: 100%;
      margin-left: 300px;
      background-color: yellow;
    } 

3.2flex布局实现

  .main{
    width: 100%;
    height: 400px;
    background-color: red;
    /*开启flex布局，里面的小item会成为一个个的小内容块儿*/
    display: flex;
  }
  .left{
    width: 100px;
    background-color: violet;
  }
  .right{
    /*设置占比为剩下的100%*/
    flex: 1;
    background-color: yellowgreen;
  }

3.3flex布局实现

    .main{
      display: flex;
      height: 1000px;
      background-color: red;
    }
    .left{
      flex-shrink: 0;
      flex-grow: 0;
      flex-basis: 200px;
      background-color: yellowgreen;
    }
    .right{
      flex: auto;
      background-color: blue;
    }

---

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1371769065@qq.com