Utility classes for changing an element's content justification property. Justify content affects the vertical justification of child elements along the main 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. Content justification will adjust the alignment and spacing of child elements along the main axis (vertical).

Classes for justify content are named using the format: [justify]-[value].

Where value includes:

  • start - for justify-content: flex-start
  • center - for justify-content: center
  • end - for justify-content: flex-end
  • between - for justify-content: space-between
  • around - for justify-content: space-around
  • evenly - for justify-content: space-evenly
ClassContents

Note that justify-content: flex-start is the default value for justify content in Unity. Unless the value needs to be overridden from a parent, the justify-startclass is not needed.

With justify-start, child elements are justified to start at the main axis start, and progress to main axis end.

0
1
2

UXML

With justify-center, child elements are justified to be centered on the main axis.

0
1
2

UXML

With justify-end, child elements are justified to start at the main axis end, and progress to main axis start.

0
1
2

UXML

With justify-between, child elements are justified to have the first element on the main axis start, the last element on the main axis end, and remaining element spaced with even gaps between each.

0
1
2

UXML

With justify-around, child elements are justified to have the first element on the main axis start, the last element on the main axis end, and remaining element spaced with even gaps between each. The first and last elements have half the gap between other elements applied to the bounds of the container.

0
1
2

UXML

With justify-evenly, child elements are justified to have the first element on the main axis start, the last element on the main axis end, and remaining element spaced with even gaps between each. The first and last elements have the same gap between other elements applied to the bounds of the container.

0
1
2

UXML