Flex, Grow, & Shrink

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.

<dt-stack direction="row">
  <div>...</div>
  <div class="d-fl1">...</div>
  <div>...</div>
</dt-stack>

Flex Grow #

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">
  <div>...</div>
  <div class="d-fl-grow1">...</div>
  <div>...</div>
</dt-stack>

Flex Shrink #

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">
  <div>...</div>
  <div class="d-fl-shrink1">...</div>
  <div>...</div>
</dt-stack>