<template>
  <div class="about">
    <h3>flex相關的屬性</h3>
    <div class="parent">
      <div class="son1"></div>
      <div class="son2"></div>
      <div class="son3"></div>
      <div class="son4"></div>
    </div>
    <div class="parent1">
      <div class="son1"></div>
      <div class="son2"></div>
      <div class="son3"></div>
    </div>
    <div class="parent3">
      <div class="son1"></div>
      <div class="son2"></div>
      <div class="son3"></div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
/*
父元素的屬性：
  flex: grow; 如果有多餘的空間,會按照比例分配剩餘的空間
  flex-direction column; 主軸對齊方式  如果子元素沒有設置高度的話,flex-grow: 會等比例分配高度
  flex-direction row-reverse 水平從右往左
  flex-direction column-reverse 垂直從下到上
  flex-wrap: nowrap 默認不換行 如果超過父元素的寬度,子元素的寬度會被壓縮 flex-wrap: wrap;換行 換行如果父元素設置了高度 子元素沒有設置高度 那麼高度也會被兩行的子元素等分
  flex-flow: 是flex-direction 和 flex-wrap 屬性的簡寫 默認是 row nowrap
  justify-content: flex-start 默認值左對齊; flex-end 右對齊; center 居中對齊; space-between 空白在盒子之間顯示; space-around 空白環繞盒子顯示
  align-items: flex-start 默認值 側軸開始的方向對齊; flex-end 側軸結束的方向對齊; center 居中對齊; baseline 如果彈性盒子元素的主軸對齊方式和側軸一樣 則該值與flex-start等效，其他情況下，基線對齊 stretch 各行將會伸展以佔用剩餘的空間,剩餘空間被所有行平分
  注意:align-items 如果是stretch 會自動拉伸至和父元素的高度一致

  align-content(多行側軸對齊方式) flex容器中的子項不止一行時該屬性才有效果
  align-content: flex-start 側軸開始的方向對齊; flex-end 側軸結束的方向對齊; center 居中對齊; space-between 空白在盒子之間顯示; space-around 空白環繞盒子顯示;stretch 拉伸顯示

子元素的屬性：
 flex-grow: 父元素的寬度大於子元素的寬度時，如果有剩餘的空間,按照擴展比例來分配 默認值是0 表示該元素不索取父元素的剩餘空間,如果值大於0，表示索取，值越大，索取的越多
 flex-shrink 父元素的寬度小於子元素的寬度之和時,flex-shrink會按照一定的比例進行收縮 默認值是1 值越大,減小的越厲害。如果值是0，表示不減少
 flex-basis 設置或檢索彈性盒子伸縮基準值,如果所有子元素的基準值之和大於剩餘空間,則會根據每項設置的基準值,按比例伸縮剩餘空間
 設置元素的寬度,如果元素上同時設置了width 和 flex-basis, 那麼width的值會被flex-basis覆蓋
 flex: flex-grow, flex-shrink, flex-basis 的簡寫 默認值為 0 1 auto (備註: 後兩個屬性可選)
 flex-grow flex-shrink flex-basis 簡寫 flex: none === flex: 0 0 auto  flex:auto === flex: 1 1 auto

 flex:1 === 等同於 flex: 1 1 auto;
 align-self: 設置或檢索彈性盒子子元素在側軸上的對齊方式,可以覆蓋父元素的align-items 取值和align-items一樣 align-items 是整體佈局
*/
@import '../styles/index.scss';
.about {
  .parent {
    width: 300px;
    height: 200px;
    display: flex;
    // flex-direction: column-reverse;
    // flex-wrap: wrap;
    flex-flow: row wrap; // flex-direction flex-wrap
    justify-content: flex-end; // 右對齊
    border: 1px solid #ccc;
    .son1 {
      width: 100px;
      background-color: purple;
      // flex-grow: 1;
    }
    .son2 {
      width: 100px;
      // flex-grow: 2;
      background-color: skyblue;
    }
    // .son3 {
    //   width: 100px;
    //   background-color: lime;
    // }
    // .son4 {
    //   width: 100px;
    //   background-color: hotpink;
    // }
  }
  .parent1 {
    margin-top: 100px;
    width: 375px;
    height: 200px;
    border: 1px solid #ccc;
    display: flex;
    // justify-content: space-between; // 右對齊
    flex-flow: row wrap;
    // align-items: stretch; // 側軸結束的方向對齊
    align-content: space-between;
    .son1 {
      background-color: purple;
      width: 150px;
      height: 50px;
    }
    .son2 {
      background-color: skyblue;
      width: 150px;
      height: 50px;
    }
    .son3 {
      background-color: lime;
      width: 150px;
      height: 50px;
    }
  }
  .parent3 {
    width: 400px;
    height: 200px;
    border: 1px solid #ccc;
    margin: 50px auto;
    display: flex;
    // 300 + 200 - 400 = 100 300 - 100 * 【300 * 1 /（ 300 * 1 + 200 * 2）】= 300 - 44.4 = 255.6
    .son1 {
      flex-basis: 100px;
      background-color: blue;
      height: 50px;
      align-self: flex-start; // 子元素 側軸的開始位置對齊
      // flex-grow: 1;
      // flex-shrink: 1;
    }
    // 200 - 100 * 【200 * 2 / （300 * 1 + 200 * 2）】 = 142.86
    .son2 {
      flex-basis: 100px;
      background-color: green;
      height: 50px;
      align-self: center; // 側軸居中對齊
      // flex-grow: 2;
      // flex-shrink: 2; // 縮小一倍
    }
    .son3 {
      flex-basis: 100px;
      background-color: hotpink;
      height: 50px;
      align-self: flex-end; // 側軸的結束位置對齊
    }
  }
}
</style>