diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/utilities/_flex.scss | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss index 4d13e9f8c..c9783c2c8 100644 --- a/scss/utilities/_flex.scss +++ b/scss/utilities/_flex.scss @@ -27,5 +27,47 @@ .flex-items#{$infix}-right { justify-content: flex-end; } .flex-items#{$infix}-around { justify-content: space-around; } .flex-items#{$infix}-between { justify-content: space-between; } + + // + // New flex utils to replace and extend the ones above + // + + .flex#{$infix}-fill { flex: 1 1 auto; } + .flex#{$infix}-justify { flex: 1 1 100%; } + + .flex#{$infix}-row { flex-direction: row !important; } + .flex#{$infix}-column { flex-direction: column !important; } + + .flex#{$infix}-wrap { flex-wrap: wrap !important; } + .flex#{$infix}-nowrap { flex-wrap: nowrap !important; } + + .justify-content#{$infix}-start { justify-content: flex-start !important; } + .justify-content#{$infix}-end { justify-content: flex-end !important; } + .justify-content#{$infix}-center { justify-content: center !important; } + .justify-content#{$infix}-between { justify-content: space-between !important; } + .justify-content#{$infix}-around { justify-content: space-around !important; } + + .align-items#{$infix}-start { align-items: flex-start !important; } + .align-items#{$infix}-end { align-items: flex-end !important; } + .align-items#{$infix}-center { align-items: center !important; } + .align-items#{$infix}-baseline { align-items: baseline !important; } + .align-items#{$infix}-stretch { align-items: stretch !important; } + + .align-content#{$infix}-start { align-content: flex-start !important; } + .align-content#{$infix}-end { align-content: flex-end !important; } + .align-content#{$infix}-center { align-content: center !important; } + .align-content#{$infix}-between { align-content: space-between !important; } + .align-content#{$infix}-around { align-content: space-around !important; } + .align-content#{$infix}-stretch { align-content: stretch !important; } + + // Item + .flex#{$infix}-auto { flex: 1 1 auto !important; } + + .align-self#{$infix}-auto { align-self: auto !important; } + .align-self#{$infix}-start { align-self: flex-start !important; } + .align-self#{$infix}-end { align-self: flex-end !important; } + .align-self#{$infix}-center { align-self: center !important; } + .align-self#{$infix}-baseline { align-self: baseline !important; } + .align-self#{$infix}-stretch { align-self: stretch !important; } } } |