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.
| Class | Output | Description |
|---|---|---|
| .d-fl0 | flex: 0 auto !important; | Set an item's flex-basis to auto and flex-grow and flex-shrink values to 0. |
| .d-fl1 | flex: 1 auto !important; | Set an item's flex-basis to auto and flex-grow and flex-shrink values to 1. |
| .d-fl2 | flex: 2 auto !important; | Set an item's flex-basis to auto and flex-grow and flex-shrink values to 2. |
| .d-fl3 | flex: 3 auto !important; | Set an item's flex-basis to auto and flex-grow and flex-shrink values to 3. |
| .d-fl4 | flex: 4 auto !important; | Set an item's flex-basis to auto and flex-grow and flex-shrink values to 4. |
| .d-fl5 | flex: 5 auto !important; | Set an item's flex-basis to auto and flex-grow and flex-shrink values to 5. |
| .d-fl-unset | flex: 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.
| 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). |
<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.
| 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). |
<div class="d-d-flex">
<div>...</div>
<div class="d-fl-shrink1">...</div>
<div>...</div>
</div>