tip: 1）這些屬性寫在子元素中，作用於子元素（父元素中應設置display:flex）

　　2）作用是子元素如何分配父元素的空間

　　3）

　　　　flex-grow 是擴展比率，當子元素寬度總和小於父元素寬度時起作用，會按比例分配父元素剩余空間（按比例自適應）

　　　 flex-shrink 是收縮比率，當子元素寬度總和大於父元素寬度時起作用，會按比例收縮空間（按比例自適應）
flex-basis 伸縮基準值，子元素本來寬度

舉例：flex:1 1 300px;

<template>
  <div class="test">
    <
 
div class="top">頭部</div>
    <div class="main">中間</div>
    <div class="bottom">底部</div>
  </div>
</template>
<style lang="scss">
.test{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  box-sizing: border-box;
　overflow: hidden;
  width
 
: 100%;
  height: 500px;
  .top{
    border: 1px solid blue;
    // 子元素可以隨父元素自由伸縮
    -webkit-flex: 1 1 300px;
    -ms-flex: 1 1 300px;
    flex: 1 1 300px;
    // width: 200px;
    height: 200px;
  }
  .main{
    border: 1px solid green;
    // 子元素可以隨父元素自由伸縮
    flex: 1 1 300px;
    // width: 200px;
    height: 200px;
  }
  .bottom
 
{
    border: 1px solid black;
    // 子元素可以隨父元素自由伸縮
     flex: 1 1 300px;
    // width: 200px;
    height: 200px;
  }
}
</style>

不管子元素寬度總和（300px+300px+300px）是否大於或小於父元素寬度，都會都會自適應父元素寬度

flex: 1 0 300px;擴張起作用；當父元素寬度大於900px(300px+300px+300px)時起作用，反之，不起作用

<template>
  <div class="test">
    <div class="top">頭部</div>
    <div class="main">中間</div>
    <div class="bottom">底部</div>
  </div>
</template>
<style lang="scss">
.test{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 500px;
  .top{
    border: 1px solid blue;
    -webkit-flex: 1 0 300px;
    -ms-flex: 1 0 300px;
    flex: 1 0 300px;
    // width: 200px;
    height: 200px;
  }
  .main{
    border: 1px solid green;
    flex: 1 0 300px;
    // width: 200px;
    height: 200px;
  }
  .bottom{
    border: 1px solid black;
    flex: 1 0 300px;
    // width: 200px;
    height: 200px;
  }
}
</style>

註意看中間框的大小變化，還有右下角樣式變化當父元素小於900px時，子元素寬度一直保持300px

flex:0 1 300px; 收縮起作用；註意看父元素小於900px時，子元素寬度變化

<template>
  <div class="test">
    <div class="top">頭部</div>
    <div class="main">中間</div>
    <div class="bottom">底部</div>
  </div>
</template>
<style lang="scss">
.test{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 500px;
  .top{
    border: 1px solid blue;
    -webkit-flex: 0 1 300px;
    -ms-flex: 0 1 300px;
    flex: 0 1 300px;
    // width: 200px;
    height: 200px;
  }
  .main{
    border: 1px solid green;
    flex: 0 1 300px;
    // width: 200px;
    height: 200px;
  }
  .bottom{
    border: 1px solid black;
    flex: 0 1 300px;
    // width: 200px;
    height: 200px;
  }
}
</style>

flex: 0 0 auto; width: 300px;不管子元素總和是否大於父元素，都不會隨父元素大小而變化

<template>
  <div class="test">
    <div class="top">頭部</div>
    <div class="main">中間</div>
    <div class="bottom">底部</div>
  </div>
</template>
<style lang="scss">
.test{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 500px;
  .top{
    border: 1px solid blue;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 300px;
    height: 200px;
  }
  .main{
    border: 1px solid green;
    flex: 0 0 auto;
    width: 300px;
    height: 200px;
  }
  .bottom{
    border: 1px solid black;
    flex: 0 0 auto;
    width: 300px;
    height: 200px;
  }
}
</style>

flex主要是父元素對子元素的布局用的，要結合display: flex; justify-content: center; align-items: center;使用。

如果對display: flex; justify-content: center; align-items: center不了解的可以查看我的另一片文章

flex上下左右居中

flex屬性flex-grow、flex-shrink、flex-basis