magic-page-designer/src/assets/layout/flex-layout.less

magic-page-designer 是一个基于 vue 的在线页面快速开发平台，主要把所有的 vue 代码都改为在线配置，最终获得一个 json 格式的页面，你可以把它存放到服务器的任何地方：数据库、静态文件、redis 等。最方便的是可以在线修改页面，再也不用担心生产出问题了，还得打开 IDE，修改测试打包，直接在线编码，所见即所得。还可以配合 [magic-api](https://gitee.com/ssssssss-team/magic-api) 使用，完全抛弃 IDE，随时随地 code w

// 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;
  }
}