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
Code
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Using the components

When to use

  • When a complex layout cannot first be achieved using flow, stack and split layouts. However, if you are very familiar with CSS Flexbox, you may choose to use a flex layout from the start.
  • You want a layout that flows in a single dimension, where the dimension may change depending on other factors, such as viewport size. For example, in layouts where the direction and overflow behavior need to change depending on the viewport size or device.
  • For small-scale layout of components within a container or region within an application or webpage.

When not to use

  • When a flow, stack or split layout can achieve your desired layout. These components are optimized for specific use cases in a constant direction.
  • When you need to present content over both rows and columns at the same time, such as a dashboard or multi-column Form, use GridLayout.
  • For large-scale, page-level layout. Instead, use GridLayout or BorderLayout.

Import

To import FlexLayout and FlexItem from the core Salt package, use:

Props

FlexLayout

FlexItem