Dialtone

Flex, Grow, & Shrink

Utilities for setting an object's flex, grow, and shrink flex properties.

Flex

The flex property is a shorthand property for flex-grow, flex-shrink, and flex-basis properties. You can also control the grow and shrink flex values separately with their own utility classes.

ClassOutputDescription
.d-fl0flex: 0 auto !important;Set an item's flex-basis to auto and flex-grow and flex-shrink values to 0.
.d-fl1flex: 1 auto !important;Set an item's flex-basis to auto and flex-grow and flex-shrink values to 1.
.d-fl2flex: 2 auto !important;Set an item's flex-basis to auto and flex-grow and flex-shrink values to 2.
.d-fl3flex: 3 auto !important;Set an item's flex-basis to auto and flex-grow and flex-shrink values to 3.
.d-fl4flex: 4 auto !important;Set an item's flex-basis to auto and flex-grow and flex-shrink values to 4.
.d-fl5flex: 5 auto !important;Set an item's flex-basis to auto and flex-grow and flex-shrink values to 5.
.d-fl-unsetflex: unset;Resets the flex value to the initial value (0 1 auto).
<div class="d-d-flex">
  <div>...</div>
  <div class="d-fl1">...</div>
  <div>...</div>
</div>

Flex Grow

The flex-grow sets the flex container’s grow factor relative to the parent's main size. The default value is 0.

ClassOutputDescription
.d-fl-grow0flex-grow: 0 !important;Set an item's flex grow property to 0.
.d-fl-grow1flex-grow: 1 !important;Set an item's flex grow property to 1.
.d-fl-grow2flex-grow: 2 !important;Set an item's flex grow property to 2.
.d-fl-grow3flex-grow: 3 !important;Set an item's flex grow property to 3.
.d-fl-grow4flex-grow: 4 !important;Set an item's flex grow property to 4.
.d-fl-grow5flex-grow: 5 !important;Set an item's flex grow property to 5.
.d-fl-grow-unsetflex-grow: unset !important;Resets the flex-grow value to the initial value (0).
<div class="d-d-flex">
  <div>...</div>
  <div class="d-fl-grow1">...</div>
  <div>...</div>
</div>

Flex Shrink

The flex-shrink sets the flex container’s shrink factor relative to the parent's main size. The default value is 1.

ClassOutputDescription
.d-fl-shrink0flex-shrink: 0 !important;Set an item's flex shrink property to 0.
.d-fl-shrink1flex-shrink: 1 !important;Set an item's flex shrink property to 1.
.d-fl-shrink2flex-shrink: 2 !important;Set an item's flex shrink property to 2.
.d-fl-shrink3flex-shrink: 3 !important;Set an item's flex shrink property to 3.
.d-fl-shrink4flex-shrink: 4 !important;Set an item's flex shrink property to 4.
.d-fl-shrink5flex-shrink: 5 !important;Set an item's flex shrink property to 5.
.d-fl-shrink-unsetflex-shrink: unset !important;Resets the flex-shrink value to the initial value (1).
<div class="d-d-flex">
  <div>...</div>
  <div class="d-fl-shrink1">...</div>
  <div>...</div>
</div>
Last Updated: