<div class="site">
  <header>
      <app-header></app-header>
  </header>
  <main>
    <div></div>
    <div></div>
    <div></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </main>
  <footer>
      <app-footer></app-footer>
  </footer>
</div>
 

html,body,app-root,.site{
    width: 100%;
    height: 100%;
    margin: 0;
}
.site{
    display: flex;
    flex-direction: column;/*縱向劃分*/
}
main{
    flex:1;
    display:flex;
    flex-direction:row;/*橫向劃分*/
    flex-wrap:wrap;/*折行*/
    justify-content:flex-start;/*橫向 貼向最左側*/
    align-content:flex-start;/*縱向 貼向最頂端*/
    align-items:center;/*縱向，在某一行縱向居中對齊*/
}
main div{
    width:100px;
    height: 100px;
    background-color:red;
    margin-right:50px;
    margin-bottom:50px;
}
.box{
    width:200px;
    height: 200px;
}
 

效果圖：