index.less 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @import './mixin';
  4. // Grid system
  5. .@{row-prefix-cls} {
  6. display: flex;
  7. flex-flow: row wrap;
  8. min-width: 0;
  9. &::before,
  10. &::after {
  11. display: flex;
  12. }
  13. // No wrap of flex
  14. &-no-wrap {
  15. flex-wrap: nowrap;
  16. }
  17. }
  18. // x轴原点
  19. .@{row-prefix-cls}-start {
  20. justify-content: flex-start;
  21. }
  22. // x轴居中
  23. .@{row-prefix-cls}-center {
  24. justify-content: center;
  25. }
  26. // x轴反方向
  27. .@{row-prefix-cls}-end {
  28. justify-content: flex-end;
  29. }
  30. // x轴平分
  31. .@{row-prefix-cls}-space-between {
  32. justify-content: space-between;
  33. }
  34. // x轴有间隔地平分
  35. .@{row-prefix-cls}-space-around {
  36. justify-content: space-around;
  37. }
  38. // x轴有间隔地均分
  39. .@{row-prefix-cls}-space-evenly {
  40. justify-content: space-evenly;
  41. }
  42. // 顶部对齐
  43. .@{row-prefix-cls}-top {
  44. align-items: flex-start;
  45. }
  46. // 居中对齐
  47. .@{row-prefix-cls}-middle {
  48. align-items: center;
  49. }
  50. // 底部对齐
  51. .@{row-prefix-cls}-bottom {
  52. align-items: flex-end;
  53. }
  54. .@{col-prefix-cls} {
  55. position: relative;
  56. max-width: 100%;
  57. // Prevent columns from collapsing when empty
  58. min-height: 1px;
  59. }
  60. .make-grid();
  61. // Extra small grid
  62. //
  63. // Columns, offsets, pushes, and pulls for extra small devices like
  64. // smartphones.
  65. .make-grid(-xs);
  66. // Small grid
  67. //
  68. // Columns, offsets, pushes, and pulls for the small device range, from phones
  69. // to tablets.
  70. @media (min-width: @screen-sm-min) {
  71. .make-grid(-sm);
  72. }
  73. // Medium grid
  74. //
  75. // Columns, offsets, pushes, and pulls for the desktop device range.
  76. @media (min-width: @screen-md-min) {
  77. .make-grid(-md);
  78. }
  79. // Large grid
  80. //
  81. // Columns, offsets, pushes, and pulls for the large desktop device range.
  82. @media (min-width: @screen-lg-min) {
  83. .make-grid(-lg);
  84. }
  85. // Extra Large grid
  86. //
  87. // Columns, offsets, pushes, and pulls for the full hd device range.
  88. @media (min-width: @screen-xl-min) {
  89. .make-grid(-xl);
  90. }
  91. // Extra Extra Large grid
  92. //
  93. // Columns, offsets, pushes, and pulls for the full hd device range.
  94. @media (min-width: @screen-xxl-min) {
  95. .make-grid(-xxl);
  96. }
  97. @import './rtl';