Blame view

src/styles/common/layout.less 1.62 KB
7fa943eb   梁灏   init
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
  .@{row-prefix-cls} {
      .make-row();
      display: block;
  
      &-flex {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
  
          &:before,
          &:after {
              display: flex;
          }
          // x轴原点
          &-start {
              justify-content: flex-start;
          }
          // x轴居中
          &-center {
              justify-content: center;
          }
          // x轴反方向
          &-end {
              justify-content: flex-end;
          }
          // x轴平分
          &-space-between {
              justify-content: space-between;
          }
          // x轴有间隔地平分
          &-space-around {
              justify-content: space-around;
          }
          // 顶部对齐
          &-top {
              align-items: flex-start;
          }
          // 居中对齐
          &-middle {
              align-items: center;
          }
          // 底部对齐
          &-bottom {
              align-items: flex-end;
          }
      };
  }
  
  .@{col-prefix-cls} {
      position: relative;
      display: block;
  }
  
  .make-grid();
84a351df   梁灏   Layout support re...
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
  
  // Extra small grid
  //
  // Columns, offsets, pushes, and pulls for extra small devices like
  // smartphones.
  
  .make-grid(-xs);
  
  // Small grid
  //
  // Columns, offsets, pushes, and pulls for the small device range, from phones
  // to tablets.
  
  @media (min-width: @screen-sm-min) {
      .make-grid(-sm);
  }
  
  
  // Medium grid
  //
  // Columns, offsets, pushes, and pulls for the desktop device range.
  
  @media (min-width: @screen-md-min) {
      .make-grid(-md);
  }
  
  
  // Large grid
  //
  // Columns, offsets, pushes, and pulls for the large desktop device range.
  
  @media (min-width: @screen-lg-min) {
      .make-grid(-lg);
  }