Flex

Use Flex when you need direct Flexbox semantics for rows, columns, wrapping groups, and inline layout surfaces.

Basic Usage

Flex

Demo will load when visible.

<template>
  <div style="width: 360px; padding: 16px; border: 1px solid var(--tx-border-color); border-radius: 12px;">
    <TxFlex justify="space-between" align="center">
      <TxTag label="Left" />
      <TxButton variant="primary">
        Action
      </TxButton>
    </TxFlex>
  </div>
</template>

API

Props

Prop	Type	Default	Description
`direction`	`'row' \| 'row-reverse' \| 'column' \| 'column-reverse'`	`'row'`	flex-direction
`gap`	`number \| string`	`12`	Gap
`align`	`string`	`'stretch'`	align-items
`justify`	`string`	`'flex-start'`	justify-content
`wrap`	`'nowrap' \| 'wrap' \| 'wrap-reverse'`	`'nowrap'`	flex-wrap
`inline`	`boolean`	`false`	Uses `inline-flex` instead of block-level `flex`.