Appearance
Flex Row
A container that lays its children out left-to-right using CSS flexbox.
In Studio
In Studio, double-click Flex Row in the Containers category of the Components panel. It is added to the open view, where you can drag it into place.
When to use
Use Flex Row for a responsive horizontal group of components — a toolbar, a row of tiles — that should reflow if the screen or window is resized.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Surface | auto, card, flat, outline | auto | The container look: auto (default), card, flat or outline. card is a rounded panel with a hairline and soft shadow, outline is a rounded transparent panel with a border, and flat adds nothing. auto is card in a Daylight project and flat otherwise. It applies to a container nested inside another; a screen root is always flat. |
Binding
This component has no single value binding.
Layout
Gap and padding, and flex properties such as wrap, justify and align, are set on the container itself (not listed as schema properties here) rather than through the generic Properties table.