diff options
| author | Mark Otto <[email protected]> | 2016-12-23 11:48:03 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-24 14:21:04 -0800 |
| commit | 5464f4ab7e1ea5e6ef841609dbeb04d0436655db (patch) | |
| tree | 494714fed716ec3bcd1217e74cfcf2aecbf24dc8 /scss | |
| parent | e4933c72da93453d45af2dc71197000742ef1bb4 (diff) | |
| download | bootstrap-5464f4ab7e1ea5e6ef841609dbeb04d0436655db.tar.xz bootstrap-5464f4ab7e1ea5e6ef841609dbeb04d0436655db.zip | |
Start to blow out and document more flexbox utilities
- Adds new flexbox.md file to utilities docs
- Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon.
- Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
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; } } } |