flex布局相关属性记录

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