The Flex component is used to make flexbox layouts. It makes it simple to arrange child components in horizontal or vertical directions, apply wrapping, justify and align content, and automatically size components based on available space, making it ideal for building responsive layouts.

By default, children are arranged horizontally (direction="row") without wrapping.

With flex_wrap="wrap", the children will wrap to the next line instead of being resized.

With direction="column", the children will be arranged vertically.

Two props control how children are aligned within the Flex component:

• align controls how children are aligned along the cross axis (vertical for row and horizontal for column).
• justify controls how children are aligned along the main axis (horizontal for row and vertical for column).

The following example visually demonstrates the effect of these props with different wrap and direction values.

When a child component is included in a flex container, the flex_grow (default "0") and flex_shrink (default "1") props control how the box is sized relative to other components in the same container.

The resizing always applies to the main axis of the flex container. If the direction is row, then the sizing applies to the width. If the direction is column, then the sizing applies to the height. To set the optimal size along the main axis, the flex_basis prop is used and may be either a percentage or CSS size units. When unspecified, the corresponding width or height value is used if set, otherwise the content size is used.

When flex_grow="0", the box will not grow beyond the flex_basis.

When flex_shrink="0", the box will not shrink to less than the flex_basis.

These props are used when creating flexible responsive layouts.

Move the slider below and see how adjusting the width of the flex container affects the computed sizes of the flex items based on the props that are set.