Stack layout

Also known as

Inline layout, Flex layout, Column layout

StackLayout displays items in horizontal or vertical order on a single line. It builds on the FlexLayout component and is best for small-scale layouts where displaying components in a single row or column is necessary. It may benefit from supported visual separators, such as a row of charts or a scrolling side panel comprising multiple sections. For additional control of the size and position of content, use FlexItem for each content item inside StackLayout.

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

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