关于css3:使用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则是平分元素～