Flex layout

FlexLayout enables complex arrangement of UI elements within a container and facilitates responsive design by controlling the alignment, direction and size of items. Use it to arrange items in a row, evenly spaced and centered vertically, or to implement customized direction more complex than StackLayout, FlowLayout or SplitLayout. For additional control of the size and position of content, use FlexItem for each content item within FlexLayout.

Also known as: CSS flexbox, Flexible box, Responsive layout
Salt package@salt-ds/core
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

When building a layout for part of a page using FlexLayout, apply semantic HTML. This means using the correct HTML elements for their intended purpose as much as possible.

FlexLayout and FlexItem components support this behavior by allowing access to a prop called as that allows you to render the appropriate HTML instead of a plain “div”.