diff options
| -rw-r--r-- | docs/4.0/utilities/flex.md | 29 | ||||
| -rw-r--r-- | scss/utilities/_flex.scss | 4 |
2 files changed, 33 insertions, 0 deletions
diff --git a/docs/4.0/utilities/flex.md b/docs/4.0/utilities/flex.md index 2a2dec02a0..83e950cf72 100644 --- a/docs/4.0/utilities/flex.md +++ b/docs/4.0/utilities/flex.md @@ -235,6 +235,35 @@ Responsive variations also exist for `flex-fill`. {% for bp in site.data.breakpoints %} - `.flex{{ bp.abbr }}-fill`{% endfor %} +## Grow and shrink + +Use `.flex-grow-*` utilities to toggle a flex item's ability to grow to fill available space. In the example below, the `.flex-grow-1` elements uses all available space it can, while allowing the remaining two flex items their necessary space. + +{% capture example %} +<div class="d-flex bd-highlight"> + <div class="p-2 flex-grow-1 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Third flex item</div> +</div> +{% endcapture %} +{% include example.html content=example %} + +Use `.flex-shrink-*` utilities to toggle a flex item's ability to shrink if necessary. In the example below, the second flex item with `.flex-shrink-1` is forced to wrap it's contents to a new line, "shrinking" to allow more space for the previous flex item with `.w-100`. + +{% capture example %} +<div class="d-flex bd-highlight"> + <div class="p-2 w-100 bd-highlight">Flex item</div> + <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div> +</div> +{% endcapture %} +{% include example.html content=example %} + +Responsive variations also exist for `flex-grow` and `flex-shrink`. + +{% for bp in site.data.breakpoints %} +- `.flex{{ bp.abbr }}-{grow|shrink}-0` +- `.flex{{ bp.abbr }}-{grow|shrink}-1`{% endfor %} + ## Auto margins Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.mr-auto`), and pushing two items to the left (`.ml-auto`). diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss index 1f898c1b18..3d4266e0d0 100644 --- a/scss/utilities/_flex.scss +++ b/scss/utilities/_flex.scss @@ -17,6 +17,10 @@ .flex#{$infix}-nowrap { flex-wrap: nowrap !important; } .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; } .flex#{$infix}-fill { flex: 1 1 auto !important; } + .flex#{$infix}-grow-0 { flex-grow: 0 !important; } + .flex#{$infix}-grow-1 { flex-grow: 1 !important; } + .flex#{$infix}-shrink-0 { flex-shrink: 0 !important; } + .flex#{$infix}-shrink-1 { flex-shrink: 1 !important; } .justify-content#{$infix}-start { justify-content: flex-start !important; } .justify-content#{$infix}-end { justify-content: flex-end !important; } |