--- docid: alignment title: Alignment layout: docs permalink: /docs/alignment/ --- ### AlignItems The `AlignItems` property describes how to align children along the cross axis of their container. `AlignItems` is very similar to `JustifyContent` but instead of applying to the main axis, it applies to the cross axis. There are 4 options for `AlignItems`: * `Stretch` (default) * `FlexStart` * `FlexEnd` * `Center` The only non-obvious option of the four is `Stretch`. With `AlignItems = Stretch` you instruct children to match the size of their container in the cross axis. #### AlignItems = Stretch
#### AlignItems = FlexStart
#### AlignItems = FlexEnd
#### AlignItems = Center
### AlignSelf The `AlignSelf` property has the same options and effect as `AlignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. This property overrides any option set by the parent via the `AlignItems` property. #### AlignItems = FlexEnd; AlignSelf = FlexStart;
### AlignContent The `AlignContent` property is used to control how multiple lines of content are aligned within a container which uses `FlexWrap = wrap`. There are 6 options: * `FlexStart` (default) * `FlexEnd` * `Center` * `Stretch` * `SpaceBetween` * `SpaceAround` #### AlignContent = FlexEnd