Flex

The ty-flex component leverages the power of CSS Flexbox to provide a simple yet flexible container for creating layouts. It allows for easy alignment, spacing, and distribution of child elements.

Usage

Use ty-flex to create layouts with various flex properties:

Live Editor

<ty-flex
  direction="row"
  justify="space-between"
  align="center"
  wrap="wrap"
  gap="10px"
>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</ty-flex>

Result

API

Properties

Name	Description	Type	Default
direction	Flex direction ('row', 'column', etc.)	String	'row'
justify	Justification of items ('center', 'space-around', etc.)	String	'flex-start'
align	Alignment of items ('stretch', 'center', etc.)	String	'stretch'
wrap	Wrap behavior ('wrap', 'nowrap')	String	'nowrap'
gap	Spacing between items	String	'0'

Usage​

API​

Properties​

Usage

API

Properties