Utility classes for changing an element's flex grow and flex shrink property. Grow/shrink specify how the element will grow or shrink relative to other flex elements in the parent container.

New VisualElements added to the UXML document will have a default inline override of flex-grow: 1. If this is not desired behaviour, unset the inline override.

Classes for flex grow / shrink are named using the format: [function]-[value].

Where function includes:

  • grow - for flex-grow
  • shrink - for flex-shrink

Where value includes:

  • # - 0.# value for that flex-grow/shrink property. If no value is included, the basegrow class, and shrink class will be used.
ClassContents

Note that flex-grow: 0 is the default value for flex grow in Unity but has an automatic inline override applied, and flex-shrink: 1 is the default value for flex shrink in Unity with no inline override.

With grow, the element will grow to take up all available space along the parent's main axis. The available space will be shared with other elements that have a grow value larger than 0 according to their value.

0
1

UXML

Grow amount can be further controlled relative to other elements by changing the flex-growvalue to a float between 0-1 such as flex-grow: 0.4 (40% of available space), orflex-grow: 0.6 (60% of available space) to control how much available space the element consumes. Elements that share a grow value will share available space evenly.

0
1

UXML

0
1

UXML