Using flex to implement common layouts

flex Basic concepts ：
use flex Elements of layout , be called flex Containers , Its child elements are called flex project , The container has two axes by default ： Horizontal spindle and The vertical cross axis

Container attribute
flex-direction // The direction of the project
flex-wrap // Line feed value
flex-flow // The short form of the above two
justify-content // Alignment of items on the spindle
align-items // Alignment of items on the cross axis
align-content // Alignment of multiple axes
Item attribute
order // The order of the items , The smaller the value, the more forward
flex-grow // Scale up of the project
flex-shrink // The downsizing of the project
flex-basis // The fixed space occupied by the project
flex // Abbreviations of the above three , Default initial(0 1 auto) There are two shortcut keys ：auto(1 1 auoto) and none(0 0 auto)
align-self // Set the alignment of individual items

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;
    }
  }
}

effect

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

<div className="page">
      <div className="case1">
        <div className="ddd"> I am a div</div>
        <div className="ddd"> I'm a talker div</div>
        <div className="ddd"> I am a talker div Bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep </div>
      </div>
      <div className="case2">
        <div className="ccc"> I am a div</div>
        <div className="ccc"> I'm a talker div</div>
        <div className="ccc"> I am a talker div Bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep </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
    }
  }
}

design sketch

You can see it , The two are not equal , Set to auto, The three boxes will be scaled up and down in accordance with their contents , And set to 1 Is to divide the elements equally ～