Document .flex-fill class in flex utils

diff --git a/docs/4.0/utilities/flex.md b/docs/4.0/utilities/flex.md
index dd5bc47db03d5b09d268d9c52519dfc558fc7159..dabf2149dd0ae2144cc745f5aa9966448c42058a 100644 (file)
--- a/docs/4.0/utilities/flex.md
+++ b/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`).