rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source
This commit is contained in:
Mark Otto 2018-03-31 14:22:01 -07:00 committed by Mark Otto
parent 474698f41b
commit 74490346ff
2 changed files with 33 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
docs/4.0/utilities/flex.md
View File

@ -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`).

4
scss/utilities/_flex.scss
View File

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