tdesign-react/esm/style/web/components/grid/_index.less

TDesign Component for React

// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

@import "../../mixins/_reset.less";

// Grid system
.@{prefix}-row {
  .reset;

  display: flex;
  flex-flow: row wrap;
}

// x轴原点
.@{prefix}-row--start {
  justify-content: flex-start;
}

// x轴居中
.@{prefix}-row--center {
  justify-content: center;
}

// x轴反方向
.@{prefix}-row--end {
  justify-content: flex-end;
}

// x轴平分
.@{prefix}-row--space-between {
  justify-content: space-between;
}

// x轴有间隔地平分
.@{prefix}-row--space-around {
  justify-content: space-around;
}

// 顶部对齐
.@{prefix}-row--top {
  align-items: flex-start;
}

// 居中对齐
.@{prefix}-row--middle {
  align-items: center;
}

// 底部对齐
.@{prefix}-row--bottom {
  align-items: flex-end;
}

// 顶部对齐
.@{prefix}-row--align-top,
.@{prefix}-row--align-start {
  align-items: flex-start;
}

// 居中对齐
.@{prefix}-row--align-middle,
.@{prefix}-row--align-center {
  align-items: center;
}

// 底部对齐
.@{prefix}-row--align-bottom,
.@{prefix}-row--align-end {
  align-items: flex-end;
}

.@{prefix}-row--align-stretch {
  align-items: stretch;
}

.@{prefix}-row--align-baseline {
  align-items: baseline;
}

.@{prefix}-col {
  position: relative;
  max-width: 100%;
  min-height: 1px;
  box-sizing: border-box;
}

.gen-grid();

.gen-grid(-xs);

@media (min-width: @screen-sm-min) {
  .gen-grid(-sm);
}

@media (min-width: @screen-md-min) {
  .gen-grid(-md);
}

@media (min-width: @screen-lg-min) {
  .gen-grid(-lg);
}

@media (min-width: @screen-xl-min) {
  .gen-grid(-xl);
}

@media (min-width: @screen-xxl-min) {
  .gen-grid(-xxl);
}