Utilities for setting an object's flex, grow, and shrink flex properties.
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.
<dt-stack direction="row" class="d-w-1000 d-bar-400 d-bgc-moderate"> <div class="d-fl-none d-p-200 d-ps-relative">Content cannot flex</div> <div class="d-fl1 d-p-200 d-bgc-moderate-opaque d-ps-relative">Text that will flex</div> <div class="d-fl-none d-p-200 d-ps-relative">Content cannot flex</div> </dt-stack>
Class | Output | Description |
|---|---|---|
| .d-fl0 | flex: 0 auto !important; | Set an item's flex-grow to 0, flex-shrink to 1 and flex-basis to auto. |
| .d-fl1 | flex: 1 auto !important; | Set an item's flex-grow to 1, flex-shrink to 1 and flex-basis to auto. |
| .d-fl2 | flex: 2 auto !important; | Set an item's flex-grow to 2, flex-shrink to 1 and flex-basis to auto. |
| .d-fl3 | flex: 3 auto !important; | Set an item's flex-grow to 3, flex-shrink to 1 and flex-basis to auto. |
| .d-fl4 | flex: 4 auto !important; | Set an item's flex-grow to 4, flex-shrink to 1 and flex-basis to auto. |
| .d-fl5 | flex: 5 auto !important; | Set an item's flex-grow to 5, flex-shrink to 1 and flex-basis to auto. |
| .d-fl-unset | flex: unset; | Resets the flex value to the initial value (0 1 auto). |
The flex-grow sets the flex container’s grow factor relative to the parent's main size. The default value is 0.
<dt-stack direction="row" class="d-w-1000 d-bar-400 d-bgc-moderate"> <div class="d-fl-none d-p-200">Content cannot flex</div> <div class="d-fl-grow1 d-p-200 d-bgc-moderate-opaque">Text that will grow</div> <div class="d-fl-none d-p-200">Content cannot flex</div> </dt-stack>
Class | Output | Description |
|---|---|---|
| .d-fl-grow0 | flex-grow: 0 !important; | Set an item's flex grow property to 0. |
| .d-fl-grow1 | flex-grow: 1 !important; | Set an item's flex grow property to 1. |
| .d-fl-grow2 | flex-grow: 2 !important; | Set an item's flex grow property to 2. |
| .d-fl-grow3 | flex-grow: 3 !important; | Set an item's flex grow property to 3. |
| .d-fl-grow4 | flex-grow: 4 !important; | Set an item's flex grow property to 4. |
| .d-fl-grow5 | flex-grow: 5 !important; | Set an item's flex grow property to 5. |
| .d-fl-grow-unset | flex-grow: unset !important; | Resets the flex-grow value to the initial value (0). |
The flex-shrink sets the flex container’s shrink factor relative to the parent's main size. The default value is 1.
<dt-stack direction="row" class="d-bar-400 d-bgc-moderate"> <div class="d-bar-400 d-fl-none d-p-200 d-bgc-moderate-opaque">Longer text that cannot flex</div> <div class="d-bar-400 d-fl-shrink1 d-p-200 d-bgc-moderate-opaque">Text that will shrink even if it causes text to wrap</div> <div class="d-bar-400 d-fl-none d-p-200 d-bgc-moderate-opaque">Longer text that cannot flex</div> </dt-stack>
Class | Output | Description |
|---|---|---|
| .d-fl-shrink0 | flex-shrink: 0 !important; | Set an item's flex shrink property to 0. |
| .d-fl-shrink1 | flex-shrink: 1 !important; | Set an item's flex shrink property to 1. |
| .d-fl-shrink2 | flex-shrink: 2 !important; | Set an item's flex shrink property to 2. |
| .d-fl-shrink3 | flex-shrink: 3 !important; | Set an item's flex shrink property to 3. |
| .d-fl-shrink4 | flex-shrink: 4 !important; | Set an item's flex shrink property to 4. |
| .d-fl-shrink5 | flex-shrink: 5 !important; | Set an item's flex shrink property to 5. |
| .d-fl-shrink-unset | flex-shrink: unset !important; | Resets the flex-shrink value to the initial value (1). |
Flex, Grow, & Shrink documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope