Flex 弹性布局

通用 Flex 容器。

基础用法

Flex

示例即将加载...

<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

属性名	类型	默认值	说明
`direction`	`'row' \| 'row-reverse' \| 'column' \| 'column-reverse'`	`'row'`	flex-direction
`gap`	`number \| string`	`12`	间距
`align`	`string`	`'stretch'`	align-items
`justify`	`string`	`'flex-start'`	justify-content
`wrap`	`'nowrap' \| 'wrap' \| 'wrap-reverse'`	`'nowrap'`	flex-wrap
`inline`	`boolean`	`false`	是否使用 inline-flex