Flex

The Flex component manages the layout of your application elements by utilizing CSS Flexbox. The properties for the Flex component are built on top of those from CSS Flexbox. Flex refers to the relationship between containers and items, similar to the Grid component. Containers wrap items, and items can also be containers. This relationship builds the structure of the layout. Flex layouts are largely 1-dimensional designs whereas Grid layouts offer control in a 2-dimensional format.

Direction

The direction property determines which axis will be the main axis. By default, this is set to row, meaning the horizontal axis will be the main axis that content will display along. If direction is set to column, then the vertical axis will become the main axis.

Item gap

The itemGap property defines how much space should exist between items within a container. It accepts a multiplier that sets the gaps between items relative to the base spacing value in the Theme.

Justify

The justify property defines how items within a container should be aligned along the main axis.

Wrap

The wrap property determines how to handle items that may span past the bounds of the container. By default, items will simply extend past those bounds.

Align items

The alignItems property defines how items within a container should be aligned along the cross axis (the axis perpendicular to the main axis).

Align content

The alignContent property defines how lines of items along the main axis of a container are aligned. Most values for this prop are only honored if there are multiple rows or columns depending on what the direction is set to.

Align self

The alignSelf property allows an item to override the alignItem property that is set on a container.

Grow

The grow property defines how an item fills any extra space within the container. If this prop is set to 1 on a single item, then that item will fill as much space within the main axis while maintaining all other items' sizes. If multiple items within the same container have values set on the grow property, then their sizes will be determined by the relative difference in the values. For example, if most items are set to grow = 1, and a few of them are set to grow = 2, then those with grow = 2 will be twice the size of the others.

Note: Negative values are not allowed for the grow property.

Shrink

The shrink property defines how an item resizes to allow more space for other items in a container. If this property is set to 1 on a single item, then that item will shrink enough within the main axis to allow other items to fill the space they need. If multiple items within the same container have values set on the shrink property, then their sizes will be determined by the relative difference in the values. For example, if most items are set to shrink = 1, and a few of them are set to shrink = 2, then those with shrink = 2 will be half the size of the others.

Note: Negative values are not allowed for the shrink property.