From: Mark Otto <markdotto@gmail.com>
Date: Sat, 31 Mar 2018 21:22:01 +0000 (-0700)
Subject: Add new .flex-grow and .flex-shrink utils
X-Git-Tag: v4.1.0~19
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=74490346ffe4281ffa37e886adbae597104e7e0b;p=thirdparty%2Fbootstrap.git

Add new .flex-grow and .flex-shrink utils
---

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