Layout Utilities

Utility	Effect
`flex`	Enables flex layout behavior
`hidden`	Hides the element
`visible`	Makes the element visible
`invisible`	Makes the element invisible while preserving layout
`flex-row`	Lays children out horizontally
`flex-col`	Lays children out vertically
`flex-row-reverse`	Horizontal layout in reverse order
`flex-col-reverse`	Vertical layout in reverse order
`flex-wrap`	Allows children to wrap
`flex-wrap-reverse`	Allows wrapping in reverse direction
`flex-nowrap`	Prevents wrapping
`overflow-hidden`	Clips overflowing content
`overflow-visible`	Allows overflowing content to render

Alignment

Utility	Effect
`items-start`	Aligns children to the start of the cross axis
`items-center`	Centers children on the cross axis
`items-end`	Aligns children to the end of the cross axis
`items-stretch`	Stretches children on the cross axis
`justify-start`	Packs children at the start of the main axis
`justify-center`	Centers children on the main axis
`justify-end`	Packs children at the end of the main axis
`justify-between`	Distributes children with space between
`justify-around`	Distributes children with space around

Self Alignment and Flex Sizing

Utility	Effect
`self-auto`	Uses automatic self alignment
`self-start`	Aligns this element to the start
`self-center`	Centers this element
`self-end`	Aligns this element to the end
`self-stretch`	Stretches this element
`grow`	Allows the element to grow
`grow-0`	Prevents the element from growing
`shrink`	Allows the element to shrink
`shrink-0`	Prevents the element from shrinking
`flex-1`	Uses flexible sizing
`flex-auto`	Uses automatic flexible sizing
`flex-none`	Disables flexible sizing
`basis-*`	Sets flex basis

Gap

Utility	Effect
`gap-*`	Sets horizontal and vertical gap
`gap-x-*`	Sets horizontal gap
`gap-y-*`	Sets vertical gap

gap-* is emulated with margins because this Unity UI Toolkit version does not support native flex gap.

Last updated on June 14, 2026

Variants Sizing