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-stackdirection="row"class="d-w-1000 d-bar-400 d-bgc-moderate"><divclass="d-fl-none d-p-200 d-ps-relative">Content cannot flex</div><divclass="d-fl1 d-p-200 d-bgc-moderate-opaque d-ps-relative">Text that will flex</div><divclass="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-shrink sets the flex container’s shrink factor relative to the parent's main size. The default value is 1.
<dt-stackdirection="row"class="d-bar-400 d-bgc-moderate"><divclass="d-bar-400 d-fl-none d-p-200 d-bgc-moderate-opaque">Longer text that cannot flex</div><divclass="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><divclass="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).