// flex布局文件
.display-flex {
  display: flex;
  // 主轴为水平方向，起点在左端
  &.flex-direction-row {
    flex-direction: row;
  }
  // 主轴为水平方向，起点在右端
  &.flex-direction-row-reverse {
    flex-direction: row-reverse;
  }
  // 主轴为垂直方向，起点在上沿
  &.flex-direction-column {
    flex-direction: column;
  }
  // 主轴为垂直方向，起点在下沿
  &.flex-direction-column-reverse {
    flex-direction: column-reverse;
  }
  // 大小自适应
  .flex-size-auto {
    flex: auto;
  }
  // 定义项目在交叉轴上如何对齐
  .flex-align-items {
    &-center {
      align-items: center;
    }
  }
  // 换行排列
  .flex-wrap {
    flex-wrap: wrap;
  }
}