mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-29 08:10:47 +02:00
Code Issues Releases Wiki Activity

Start to blow out and document more flexbox utilities

Browse Source 
- 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.
This commit is contained in:
Mark Otto
2016-12-23 11:48:03 -08:00
committed by Mark Otto
parent e4933c72da
commit 5464f4ab7e
4 changed files with 268 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
scss/utilities/_flex.scss
View File

@@ -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; }
}
}