Flex

Arrange elements with direction, alignment, spacing, and wrapping.

<sy-flex>Installation guide Basic usage

Live preview

Interact with the component to see results here.

DirectionMain-axis alignmentCross-axis alignmentLine wrappingRow spacingColumn gapPadding

View code

HTML

<sy-flex
  direction="horizontal"
  justify="start"
  align="center"
  wrap="wrap"
  row-gap="small"
  column-gap="small"
  padding="small"
  height="180px"
>
  <sy-button variant="primary">Save</sy-button>
  <sy-button>Preview</sy-button>
  <sy-button>Cancel</sy-button>
</sy-flex>

Usage guide

Use to align items along one axis, such as button groups or toolbars. Use Layout for the overall page structure.

Main-axis alignment

justify positions items along the axis specified by direction.

Cross-axis alignment

align aligns items on the perpendicular axis. Changing direction changes both axes.

Examples

Action button row

Keep consistent spacing and wrap items onto the next line as the width narrows.

View code

HTML

<sy-flex
  wrap="wrap"
  padding="none"
  column-gap="small"
>
  <sy-button variant="primary">Save</sy-button>
  <sy-button>Preview</sy-button>
  <sy-button>Cancel</sy-button>
</sy-flex>

Vertical layout

Stack items vertically and stretch them along the cross axis.

View code

HTML

<sy-flex
  direction="vertical"
  align="stretch"
  padding="none"
  row-gap="small"
>
  <sy-button variant="primary">Save</sy-button>
  <sy-button>Preview</sy-button>
  <sy-button>Cancel</sy-button>
</sy-flex>

Space between

Place primary and secondary actions at opposite ends.

View code

HTML

<sy-flex
  justify="space-between"
  align="center"
  padding="none"
  wrap="wrap"
>
  <sy-button>Back</sy-button>
  <sy-button variant="primary">Continue</sy-button>
</sy-flex>

Spacing across multiple rows

Set row and column gaps separately.

View code

HTML

<sy-flex
  wrap="wrap"
  row-gap="medium"
  column-gap="small"
  padding="none"
>
  <sy-button>Item 1</sy-button>
  <sy-button>Item 2</sy-button>
  <sy-button>Item 3</sy-button>
  <sy-button>Item 4</sy-button>
  <sy-button>Item 5</sy-button>
  <sy-button>Item 6</sy-button>
  <sy-button>Item 7</sy-button>
  <sy-button>Item 8</sy-button>
</sy-flex>

Feature examples

Choose a feature from 10 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.