flex

<row-l>
    <div layout="flex-grow:1">Hello</div>
    <div layout="flex-shrink:3">Hello</div>
    <div layout="flex-basis:200px">Hello</div>
</row-l>

There are three flex utilities available for use with children from any flex component (e.g., Row, sidebar, switcher, slider):

• flex-grow : Sets the flex-grow property.
• flex-shrink : Sets the flex-shrink property.
• flex-basis : Sets the flex-basis property.

While these utilities are not commonly needed, they can be helpful for addressing specific layout challenges.

flex-grow

Use flex-grow utility to set an element flex-grow.

flex-basis

Use flex-basis utility to set an element flex-basis.

flex-shrink

Use flex-shrink utility to set an element flex-shrink.