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.

When building a sub-section of a page using a flow layout, it's important to use semantic HTML, which means using the correct HTML elements for their intended purpose as much as possible.

Flow layouts support this behavior by allowing access to a prop called as that allows you to render the appropriate HTML instead of a plain div.