diff options
| author | Mark Otto <[email protected]> | 2018-01-20 16:44:38 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2018-01-21 12:16:17 -0800 |
| commit | 8374f542be7cd87ba4872727dc67e4fa8c547246 (patch) | |
| tree | dcc647b8b721bc8efae3d3da749ca1174cf01d00 /docs | |
| parent | 2137d61eacbd962ea41e16a492da8b1d1597d3d9 (diff) | |
| download | bootstrap-8374f542be7cd87ba4872727dc67e4fa8c547246.tar.xz bootstrap-8374f542be7cd87ba4872727dc67e4fa8c547246.zip | |
Document .flex-fill class in flex utils
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/4.0/utilities/flex.md | 17 |
1 files changed, 17 insertions, 0 deletions
diff --git a/docs/4.0/utilities/flex.md b/docs/4.0/utilities/flex.md index dd5bc47db..dabf2149d 100644 --- 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`). |