By default, FlexLayout displays items along the horizontal axis in a row, aligned to the start of the container. The spacing between items is driven by the property gap, which is a multiple of the Salt base unit and is set to 3. The dimensions of the layout (height or width) are driven by the items contained within it.

Set wrap={true} to overflow items onto subsequent rows when they no longer fit in the container.

The flex layout direction prop defines the main axis that items are displayed along. Set direction to column to display items in a vertical direction.

Control the position of the flex layout and its items using the align and justify props.

Use justify to define how to distribute any remaining space between or around all of the items along the main-axis of the flex layout (i.e., along the row or column).

If there is additional space available in the cross-axis of the layout (i.e., beside a row, or above/below a column), the align prop defines how items should be positioned within that space.

Flex layouts support responsive props, so you can define different behaviors based on viewport size (e.g., switching direction with screen size). You can use the default Salt breakpoints or pass in your own using SaltProvider.

A responsive prop is a prop that takes either multiple values (one value per breakpoint), or a single value that would take effect across all different screen sizes. For example, a layout that will responsively change direction from row to column at specific breakpoints or viewport sizes:

Use the flex item's align prop to set an alignment for a specific item in the layout. Use the align prop to set the item’s position along the cross-axis of the layout (i.e., perpendicular to the direction–row or column).

The flex item's grow prop enables specific items in the layout to grow and fill any remaining space that is available in the layout:

• By default, grow is set to 0 and items will be displayed in their ‘normal’ size.
• If an item is set to 1 it will fill the available space.
• If an item is set to 2 it will fill twice as much space as other items that have grow set to 1.

In contrast to the grow prop, the shrink prop makes a specific item as small as possible within the layout. By default, shrink is set to 1. If an item is set to 2, that item would attempt to take half as much space.

By default, FlexLayout displays items along the horizontal axis in a row, aligned to the start of the container. The spacing between items is driven by the property gap, which is a multiple of the Salt base unit and is set to 3. The dimensions of the layout (height or width) are driven by the items contained within it.

Set wrap={true} to overflow items onto subsequent rows when they no longer fit in the container.

The flex layout direction prop defines the main axis that items are displayed along. Set direction to column to display items in a vertical direction.

Control the position of the flex layout and its items using the align and justify props.

Use justify to define how to distribute any remaining space between or around all of the items along the main-axis of the flex layout (i.e., along the row or column).

If there is additional space available in the cross-axis of the layout (i.e., beside a row, or above/below a column), the align prop defines how items should be positioned within that space.

Flex layouts support responsive props, so you can define different behaviors based on viewport size (e.g., switching direction with screen size). You can use the default Salt breakpoints or pass in your own using SaltProvider.

A responsive prop is a prop that takes either multiple values (one value per breakpoint), or a single value that would take effect across all different screen sizes. For example, a layout that will responsively change direction from row to column at specific breakpoints or viewport sizes:

Use the flex item's align prop to set an alignment for a specific item in the layout. Use the align prop to set the item’s position along the cross-axis of the layout (i.e., perpendicular to the direction–row or column).

The flex item's grow prop enables specific items in the layout to grow and fill any remaining space that is available in the layout:

• By default, grow is set to 0 and items will be displayed in their ‘normal’ size.
• If an item is set to 1 it will fill the available space.
• If an item is set to 2 it will fill twice as much space as other items that have grow set to 1.

In contrast to the grow prop, the shrink prop makes a specific item as small as possible within the layout. By default, shrink is set to 1. If an item is set to 2, that item would attempt to take half as much space.

By default, FlexLayout displays items along the horizontal axis in a row, aligned to the start of the container. The spacing between items is driven by the property gap, which is a multiple of the Salt base unit and is set to 3. The dimensions of the layout (height or width) are driven by the items contained within it.

Set wrap={true} to overflow items onto subsequent rows when they no longer fit in the container.

The flex layout direction prop defines the main axis that items are displayed along. Set direction to column to display items in a vertical direction.

Control the position of the flex layout and its items using the align and justify props.

Use justify to define how to distribute any remaining space between or around all of the items along the main-axis of the flex layout (i.e., along the row or column).

If there is additional space available in the cross-axis of the layout (i.e., beside a row, or above/below a column), the align prop defines how items should be positioned within that space.

Flex layouts support responsive props, so you can define different behaviors based on viewport size (e.g., switching direction with screen size). You can use the default Salt breakpoints or pass in your own using SaltProvider.

A responsive prop is a prop that takes either multiple values (one value per breakpoint), or a single value that would take effect across all different screen sizes. For example, a layout that will responsively change direction from row to column at specific breakpoints or viewport sizes:

Use the flex item's align prop to set an alignment for a specific item in the layout. Use the align prop to set the item’s position along the cross-axis of the layout (i.e., perpendicular to the direction–row or column).

The flex item's grow prop enables specific items in the layout to grow and fill any remaining space that is available in the layout:

• By default, grow is set to 0 and items will be displayed in their ‘normal’ size.
• If an item is set to 1 it will fill the available space.
• If an item is set to 2 it will fill twice as much space as other items that have grow set to 1.

In contrast to the grow prop, the shrink prop makes a specific item as small as possible within the layout. By default, shrink is set to 1. If an item is set to 2, that item would attempt to take half as much space.