Flex | Tuff Docs

Usage

Basic

Loading demo...

wrap="wrap" lets a toolbar wrap in a narrow container.

<template>
  <TxFlex align="center" justify="space-between" wrap="wrap" gap="0.75rem">
    <TxFlex align="center" gap="0.5rem" wrap="wrap">
      <TxTag label="Docs" />
      <TxTag label="Reviewed" color="var(--tx-color-success)" />
    </TxFlex>
    <TxButton size="sm">Publish</TxButton>
  </TxFlex>
</template>

Reverse Direction

<template>
  <TxFlex direction="row-reverse" align="center" gap="8px">
    <TxButton variant="primary">Primary</TxButton>
    <TxButton variant="ghost">Secondary</TxButton>
  </TxFlex>
</template>

Best Practices

Use TxFlex when you need exact Flexbox semantics, and TxStack for everyday horizontal or vertical rhythm.
Space children with gap, not margins on the children.
The container adds no roles or keyboard behavior; leave interaction to semantic child controls.
Lay out repeated cards with TxGridLayout, not nested flex rows.

API Reference

Props

Prop	Type	Default	Description
`direction`	`'row' \| 'row-reverse' \| 'column' \| 'column-reverse'`	`'row'`	Main-axis direction.
`gap`	`number \| string`	`12`	Gap between children; numbers are px, strings pass through.
`align`	`string`	`'stretch'`	`align-items`; accepts any CSS value. Use `center` for icon-and-label rows.
`justify`	`string`	`'flex-start'`	`justify-content`; accepts any CSS value.
`wrap`	`'nowrap' \| 'wrap' \| 'wrap-reverse'`	`'nowrap'`	`flex-wrap`.
`inline`	`boolean`	`false`	Uses `inline-flex`.

Slots

Slot	Props	Description
`default`	-	Flex children.

CSS Variables

Variable	Source	Description
`--tx-flex-gap`	`gap`	CSS gap.
`--tx-flex-align`	`align`	`align-items`.
`--tx-flex-justify`	`justify`	`justify-content`.
`--tx-flex-direction`	`direction`	`flex-direction`.
`--tx-flex-wrap`	`wrap`	`flex-wrap`.
`--tx-flex-display`	`inline`	`flex` or `inline-flex`.

Overview

The root is a div with min-width: 0, so children can shrink inside constrained containers.
Props write the --tx-flex-* variables on the root, and the stylesheet reads them.
Empty align, justify, direction, or wrap values fall back to the defaults.

Technologies

Source: packages/tuffex/packages/components/src/flex/.

查看源码

packages/tuffex/packages/components/src/flex/index.ts