使用flex来实现常见布局

flex基本概念：
采用flex布局的元素，称为flex容器，它的子元素则称为flex项目，容器默认存在两根轴：水平的主轴和垂直的交叉轴

容器属性
flex-direction // 项目的排列方向
flex-wrap //换行取值
flex-flow // 上面两个的简写形式
justify-content //项目在主轴上的对齐方式
align-items //项目在交叉轴上的对齐方式
align-content // 多根轴线的对齐方式
项目属性
order // 项目的排列顺序，数值越小越靠前
flex-grow //项目的放大比例
flex-shrink //项目的缩小比例
flex-basis //项目占据的固定空间
flex // 上面三个的简写，默认initial(0 1 auto)有两个快捷键：auto(1 1 auoto)和none(0 0 auto)
align-self //设置单个项目的对齐方式

show you the code

<div className="page">
      <div className="layout1">
        <div className="left">left</div>
        <div className="center">center</div>
        <div className="right">right</div>
      </div>
      <div className="layout2">
        <div className="up">up</div>
        <div className="center">center</div>
        <div className="bottom">bottom</div>
      </div>
</div>

.page{
  .layout1{
    height: 50vh;
    display: flex;
    .left,.right{
      display: flex;
      align-items: center;
      width: 50px;
      background-color: cadetblue;
    }
    .center{
      flex: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: tomato;
    }
    margin-bottom: 20px;
  }
  .layout2{
    height: calc(50vh - 10px);
    display: flex;
    flex-direction: column;
    .up,.bottom{
      display: flex;
      justify-content: center;
      height: 50px;
      background-color: cadetblue;
    }
    .center{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: tomato;
    }
  }
}

效果

**Q：flex:1 ?== flex:auto?
A: !==**

<div className="page">
      <div className="case1">
        <div className="ddd">我是一个div</div>
        <div className="ddd">我是一个话有点多的div</div>
        <div className="ddd">我是一个话痨div哔哩吧啦哔哩吧啦哔哩吧啦哔哩吧啦哔哩吧啦哔哩吧啦哔哩吧啦</div>
      </div>
      <div className="case2">
        <div className="ccc">我是一个div</div>
        <div className="ccc">我是一个话有点多的div</div>
        <div className="ccc">我是一个话痨div哔哩吧啦哔哩吧啦哔哩吧啦哔哩吧啦哔哩吧啦哔哩吧啦哔哩吧啦</div>
      </div>
</div>

.page{
  .case1{
    display: flex;
    .ddd{
      border: 1px solid palegreen;
      flex:1
    }
    margin-bottom: 10px;
  }
  .case2{
    display: flex;
    .ccc{
      border: 1px solid royalblue;
      flex:auto
    }
  }
}

效果图

可以看出来，这两者并不相等，设置为auto，这三个盒子就会按照自己内容的多少来等比例的放大和缩小，而设置为1则是平分元素～