Flex | Tuff Docs

Usage

Loading demo...

<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. Use TxStack for common horizontal/vertical rhythm.
Use wrap="wrap" on toolbars and filter rows that must survive narrow containers.
Keep gap responsible for spacing; avoid margin hacks on child components.
Prefer semantic child controls (TxButton, links, form controls) inside TxFlex; the container itself does not add roles or keyboard behavior.
For grid-like repeated cards, use TxGridLayout instead of nested flex rows.

API Reference

Props

Prop	Type	Default	Description
`direction`	`'row' \| 'row-reverse' \| 'column' \| 'column-reverse'`	`'row'`	Main-axis direction; `row` lays children out horizontally, `column` stacks them vertically.
`gap`	`number \| string`	`12`	Gap between children. Numbers become px.
`align`	`string`	`'stretch'`	Cross-axis alignment (align-items); use `center` for icon+label rows and keep `stretch` when children should share the tallest height. Typed as a free string, so any CSS keyword is accepted.
`justify`	`string`	`'flex-start'`	Main-axis distribution (justify-content); `space-between` pushes items apart, `flex-start` groups them at the start. Also a free string.
`wrap`	`'nowrap' \| 'wrap' \| 'wrap-reverse'`	`'nowrap'`	Whether children wrap; use `wrap` for toolbars and filter rows that must survive narrow containers.
`inline`	`boolean`	`false`	Use `inline-flex` instead of block-level `flex`.

Slots

Slot	Props	Description
`default`	-	Flex children.

Events

No public events are emitted.

Exposed Methods

No public instance methods are exposed.

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 display: flex by default.
direction, wrap, align, and justify are passed directly through to Flexbox CSS variables.
Numeric gap values become px; string values are passed through unchanged.
inline=true switches display from flex to inline-flex.
Empty align, justify, direction, or wrap values fall back to the component defaults when computed.
The root sets min-width: 0 so children can shrink inside constrained cards.

Technologies

Reviewed against packages/tuffex/packages/components/src/flex/src/types.ts, TxFlex.vue, and flex.test.ts.
TxFlex is intentionally behaviorless: it adds no role, events, or focus handling beyond the slotted children.
Numeric gap is normalized to pixels; string gap values remain caller-owned CSS.
Component source: packages/tuffex/packages/components/src/flex/src/TxFlex.vue.
Types: packages/tuffex/packages/components/src/flex/src/types.ts.
Verified coverage: Coverage: packages/tuffex/packages/components/src/flex/__tests__/flex.test.ts verifies default CSS variables and slot content, custom layout variable forwarding, inline display, and numeric gap normalization.

查看源码

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