05 - Flex Panel Gallery（Flex总结）

05 - Flex Panel Gallery

flex父容器属性：

1. flex-direction：设置主轴方向

• row：主轴沿着inline方向延伸 (inline：文字书写方向，汉字自左向右)

• row-reverse： inline反方向 自右向左

• column： 主轴沿着block排列的方向 (display: block的块盒，自上而下)

• column-reverse： block的反方向 自下而上

2. flex-wrap：主轴是否换行
3. flex-flow：flex-direction和flex-wrap的简写形式，默认是row nowrap
4. justify-content：设置子项目在主轴方向上的对齐方式

• flex-start：默认值，沿主轴起点对齐
• flex-end：沿主轴终点对齐
• center：沿主轴居中对齐
• space-between：沿主轴空白居中分布，两侧贴边
• space-around：沿主轴空白环绕分布
• space-evenly：沿主轴空白均分分布

5. align-items：项目在交叉线上如何对齐
6. align-content：多根轴线的对齐方式

flex项目属性：

1. order：项目排序

2. flex-grow：放大比例 默认0
3. flex-shrink：缩小比例 默认1
4. flex-basis：主轴空间

5. flex：flex-grow、flex-shrink、flex-basis的简写，默认0 1 auto
6. align-self：单个项目对齐方式

//参考代码如下：

  <script>
    const panels = document.querySelectorAll('.panel');

    function toggleOpen(){
      this.classList.toggle('open');
    }
    function toggleActive(e){
      //状态完成后 切入
      // console.log(e.propertyName);
      if (e.propertyName.includes('flex')) {
        this.classList.toggle('open-active');
      }
    }
    
  
    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

  </script>