_flex.scss 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. // stylelint-disable declaration-no-important
  2. // Flex variation
  3. //
  4. // Custom styles for additional flex alignment options.
  5. @each $breakpoint in map-keys($grid-breakpoints) {
  6. @include media-breakpoint-up($breakpoint) {
  7. $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  8. .flex#{$infix}-row {
  9. flex-direction: row !important;
  10. }
  11. .flex#{$infix}-column {
  12. flex-direction: column !important;
  13. }
  14. .flex#{$infix}-row-reverse {
  15. flex-direction: row-reverse !important;
  16. }
  17. .flex#{$infix}-column-reverse {
  18. flex-direction: column-reverse !important;
  19. }
  20. .flex#{$infix}-wrap {
  21. flex-wrap: wrap !important;
  22. }
  23. .flex#{$infix}-nowrap {
  24. flex-wrap: nowrap !important;
  25. }
  26. .flex#{$infix}-wrap-reverse {
  27. flex-wrap: wrap-reverse !important;
  28. }
  29. .flex#{$infix}-fill {
  30. flex: 1 1 auto !important;
  31. }
  32. .flex#{$infix}-grow-0 {
  33. flex-grow: 0 !important;
  34. }
  35. .flex#{$infix}-grow-1 {
  36. flex-grow: 1 !important;
  37. }
  38. .flex#{$infix}-shrink-0 {
  39. flex-shrink: 0 !important;
  40. }
  41. .flex#{$infix}-shrink-1 {
  42. flex-shrink: 1 !important;
  43. }
  44. .justify-content#{$infix}-start {
  45. justify-content: flex-start !important;
  46. }
  47. .justify-content#{$infix}-end {
  48. justify-content: flex-end !important;
  49. }
  50. .justify-content#{$infix}-center {
  51. justify-content: center !important;
  52. }
  53. .justify-content#{$infix}-between {
  54. justify-content: space-between !important;
  55. }
  56. .justify-content#{$infix}-around {
  57. justify-content: space-around !important;
  58. }
  59. .align-items#{$infix}-start {
  60. align-items: flex-start !important;
  61. }
  62. .align-items#{$infix}-end {
  63. align-items: flex-end !important;
  64. }
  65. .align-items#{$infix}-center {
  66. align-items: center !important;
  67. }
  68. .align-items#{$infix}-baseline {
  69. align-items: baseline !important;
  70. }
  71. .align-items#{$infix}-stretch {
  72. align-items: stretch !important;
  73. }
  74. .align-content#{$infix}-start {
  75. align-content: flex-start !important;
  76. }
  77. .align-content#{$infix}-end {
  78. align-content: flex-end !important;
  79. }
  80. .align-content#{$infix}-center {
  81. align-content: center !important;
  82. }
  83. .align-content#{$infix}-between {
  84. align-content: space-between !important;
  85. }
  86. .align-content#{$infix}-around {
  87. align-content: space-around !important;
  88. }
  89. .align-content#{$infix}-stretch {
  90. align-content: stretch !important;
  91. }
  92. .align-self#{$infix}-auto {
  93. align-self: auto !important;
  94. }
  95. .align-self#{$infix}-start {
  96. align-self: flex-start !important;
  97. }
  98. .align-self#{$infix}-end {
  99. align-self: flex-end !important;
  100. }
  101. .align-self#{$infix}-center {
  102. align-self: center !important;
  103. }
  104. .align-self#{$infix}-baseline {
  105. align-self: baseline !important;
  106. }
  107. .align-self#{$infix}-stretch {
  108. align-self: stretch !important;
  109. }
  110. }
  111. }