Flex fill util

Cherry-picks from #22229 and adds docs.

docs/4.0/utilities/flex.md

@@ -213,6 +213,23 @@ Responsive variations also exist for `align-self`.
 - `.align-self{{ bp.abbr }}-baseline`
 - `.align-self{{ bp.abbr }}-stretch`{% endfor %}
 
+## Fill
+
+Use the `.flex-fill` class on a series of sibling elements to force them into equal widths while taking up all available horizontal space. [Especially useful for equal-width, or justified, navigation.]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/#working-with-flex-utilities)
+
+{% example html %}
+<div class="d-flex bd-highlight">
+  <div class="p-2 flex-fill bd-highlight">Flex item</div>
+  <div class="p-2 flex-fill bd-highlight">Flex item</div>
+  <div class="p-2 flex-fill bd-highlight">Flex item</div>
+</div>
+{% endexample %}
+
+Responsive variations also exist for `flex-fill`.
+
+{% for bp in site.data.breakpoints %}
+- `.flex{{ bp.abbr }}-fill`{% 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`).

scss/utilities/_flex.scss

@@ -16,6 +16,7 @@
     .flex#{$infix}-wrap         { flex-wrap: wrap !important; }
     .flex#{$infix}-nowrap       { flex-wrap: nowrap !important; }
     .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
+    .flex#{$infix}-fill         { flex: 1 1 auto !important; }
 
     .justify-content#{$infix}-start   { justify-content: flex-start !important; }
     .justify-content#{$infix}-end     { justify-content: flex-end !important; }