Home Esplora Aiuto
Accedi
ramonsaldanha
/
vincula
Segui 1
Vota 0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Ramo (Branch): master
Rami (Branch) Tag
vincula
/
public
/
scss
/
utilities
/
_flex.scss

_flex.scss 2.4 KB
Permalink Cronologia Originale

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 
  1. // stylelint-disable declaration-no-important
    2. 

  2. 

  3. // Flex variation
    4. 

  4. //
    5. 

  5. // Custom styles for additional flex alignment options.
    6. 

  6. 

  7. @each $breakpoint in map-keys($grid-breakpoints) {
    8. 

  8.   @include media-breakpoint-up($breakpoint) {
    9. 

  9.     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    10. 

  10. 

  11.     .flex#{$infix}-row            { flex-direction: row !important; }
    12. 

  12.     .flex#{$infix}-column         { flex-direction: column !important; }
    13. 

  13.     .flex#{$infix}-row-reverse    { flex-direction: row-reverse !important; }
    14. 

  14.     .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
    15. 

  15. 

  16.     .flex#{$infix}-wrap         { flex-wrap: wrap !important; }
    17. 

  17.     .flex#{$infix}-nowrap       { flex-wrap: nowrap !important; }
    18. 

  18.     .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
    19. 

  19. 

  20.     .justify-content#{$infix}-start   { justify-content: flex-start !important; }
    21. 

  21.     .justify-content#{$infix}-end     { justify-content: flex-end !important; }
    22. 

  22.     .justify-content#{$infix}-center  { justify-content: center !important; }
    23. 

  23.     .justify-content#{$infix}-between { justify-content: space-between !important; }
    24. 

  24.     .justify-content#{$infix}-around  { justify-content: space-around !important; }
    25. 

  25. 

  26.     .align-items#{$infix}-start    { align-items: flex-start !important; }
    27. 

  27.     .align-items#{$infix}-end      { align-items: flex-end !important; }
    28. 

  28.     .align-items#{$infix}-center   { align-items: center !important; }
    29. 

  29.     .align-items#{$infix}-baseline { align-items: baseline !important; }
    30. 

  30.     .align-items#{$infix}-stretch  { align-items: stretch !important; }
    31. 

  31. 

  32.     .align-content#{$infix}-start   { align-content: flex-start !important; }
    33. 

  33.     .align-content#{$infix}-end     { align-content: flex-end !important; }
    34. 

  34.     .align-content#{$infix}-center  { align-content: center !important; }
    35. 

  35.     .align-content#{$infix}-between { align-content: space-between !important; }
    36. 

  36.     .align-content#{$infix}-around  { align-content: space-around !important; }
    37. 

  37.     .align-content#{$infix}-stretch { align-content: stretch !important; }
    38. 

  38. 

  39.     .align-self#{$infix}-auto     { align-self: auto !important; }
    40. 

  40.     .align-self#{$infix}-start    { align-self: flex-start !important; }
    41. 

  41.     .align-self#{$infix}-end      { align-self: flex-end !important; }
    42. 

  42.     .align-self#{$infix}-center   { align-self: center !important; }
    43. 

  43.     .align-self#{$infix}-baseline { align-self: baseline !important; }
    44. 

  44.     .align-self#{$infix}-stretch  { align-self: stretch !important; }
    45. 

  45.   }
    46. 

  46. }
    47. 

  47.