Utility classes for changing an element's align content property. Align content affects the alignment of child elements along the cross axis if the container spans multiple lines with the flex-wrap property.
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 alignment will adjust the alignment and spacing of child elements along the cross axis (horizontal).
Classes for align content are named using the format: [content]-[value].
Where value includes:
auto- foralign-content: autostart- foralign-content: flex-startcenter- foralign-content: centerend- foralign-content: flex-endstretch- foralign-content: stretch
| Class | Contents |
| |
| |
| |
| |
| |
Note that align-content: flex-start is the default value for align content in Unity. Unless the value needs to be overridden from a parent, the content-startclass is not needed.
With content-auto, child elements that code multiple lines are aligned to start at the parent's cross axis start, and progress to cross axis end like flex-start.
UXML
With content-start, child elements that code multiple lines are aligned to start at the parent's cross axis start, and progress to cross axis end.
UXML
With content-center, child elements are aligned to be centered on the parent's cross axis.
UXML
With content-end, child elements that code multiple lines are aligned to start at the parent's cross axis end, and progress to cross axis start.
UXML
With content-stretch, child elements are aligned to stretch along the parent's cross axis.
UXML
On this page