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