Flow layout
Flow layout
Resources
FlowLayout displays items in a horizontal order and wraps them onto a subsequent row if they don’t fit within the defined width. It builds on top of the FlexLayout component and is best for small-scale layouts where you need to display components in a responsive row, such as a row of metrics or a filter bar where fields can wrap over multiple lines. For additional control of the size and position of content, use FlexItem for each content item inside a flow layout.
A flow layout displays items in a row that will responsively wrap onto a new line.
By default, items will stretch across the layout, with a gap between items of 3, which is a multiple of the Salt base unit.
The height and width of the layout area depend on the items contained within it.
Control the position of the flow layout and its items using align and justify props.
Use justify to define how to distribute any remaining space between or at the ends of items in the row.
If there's additional space available above or below the row, use the align property to define the position of items within that space.
Use the flex item align prop to set an alignment for a specific item in the layout.
Set the item’s position along the cross axis of the layout (i.e., perpendicular to the row).
The flex item grow prop enables specific items in the layout to grow and fill any remaining space in the row:
- By default,
growis 0 and items will be in their "normal" size. - If you set an item to 1, it will fill the available space.
- If you set an item to 2, it will fill twice as much space as other items that have
growset to 1.
In contrast to grow, shrink makes a specific item as small as possible within the row. By default, shrink is 1. If you set an item to 2, it will attempt to take half as much space.