Utility classes for changing an element's align items property. Align items affects the horizontal alignment of child elements along the cross axis.

Main and cross axes change depending on an element's current flex direction, which affects the behaviour of it's flex properties. By default, elements have a flex direction of column meaning the main axis start is at the top, and main axis end is at the bottom of the element. Item alignment will adjust the alignment and spacing of child elements along the cross axis (horizontal).

Classes for align items are named using the format: [items]-[value].

Where value includes:

  • auto - for align-items: auto
  • start - for align-items: flex-start
  • center - for align-items: center
  • end - for align-items: flex-end
  • stretch - for align-items: stretch
ClassContents

Note that align-items: stretch is the default value for align items in Unity. Unless the value needs to be overridden from a parent, the items-stretchclass is not needed.

With items-auto, child elements are aligned along the cross axis the same way they would be with items-end.

0
1
2

UXML

With items-start, child elements are aligned to start at the cross axis start, and progress to the cross axis end.

0
1
2

UXML

With items-center, child elements are aligned to be centered on the cross axis.

0
1
2

UXML

With items-end, child elements are aligned to start at the cross axis end, and progress to cross axis start.

0
1
2

UXML

With items-stretch, child elements are aligned along the cross axis the same way they would be with items-start, but will stretch the entire cross axis if the child element is not given an explicit size property value, and if the element itself has content to display.

0
1
2

UXML