Flow layout

Also known as

CSS Flexbox, Responsive Layout, Wrap

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.