vue-ant-patterns/es/d-container/style/index.less

vue-ant-patterns

@import '../../style/themes/index.less';
@import '../../style/mixins/flex.less';
@depot-prefix-cls: ~'@{depot-prefix}-container';

.@{depot-prefix-cls} {
  // @containerdList: flex-start, flex-end, center, space-between;
  // margin-bottom: @padding-xs;

  // display: flex;
  // 1 平均分配剩余空间 放大
  // 0 不缩小
  // auto 计算剩余
  // flex: 1 0 auto;
  &-flex {
    display: flex;
  }
  &-horizontal {
    display: flex;
    flex-direction: row;
  }
  &-vertical {
    display: flex;
    flex-direction: column;
  }
  // 放大元素
  // 主要用于铺满剩余空间
  // 兼容 ie, 不能简写
  &-grow {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0px;
  }
  &-wrap {
    flex-flow: wrap;
  }
  &-content {
    /* -- */
  }

  &-align-star {
    align-items: flex-start;
  }
  &-align-end {
    align-items: flex-end;
  }
  &-align-center {
    align-items: center;
  }
  &-align-between {
    align-items: space-between;
  }

  &-justify-star {
    justify-content: flex-start;
  }
  &-justify-end {
    justify-content: flex-end;
  }
  &-justify-center {
    justify-content: center;
  }
  &-justify-between {
    justify-content: space-between;
    // width: 100%;
  }
  //
  &-view-page {
    .ant-form-item-label,
    .ant-form-item-control {
      line-height: 22px;
    }
  }
  &-scroll-x,
  &-scroll-y {
    .flex-grow;
    overflow: hidden;
  }
  &-scroll-x {
    overflow-x: auto;
  }
  &-scroll-y {
    overflow-y: auto;
  }
}