XtFlexBox 弹性布局组件

XtFlexBox 弹性布局组件

弹性布局组件，基于 CSS Flexbox 实现，提供便捷的布局能力。

基本用法

元素1

元素2

元素3

基本用法

<template>
  <XtFlexBox gap="16px">
    <div style="background: #1890ff; color: white; padding: 8px;">元素1</div>
    <div style="background: #52c41a; color: white; padding: 8px;">元素2</div>
    <div style="background: #faad14; color: white; padding: 8px;">元素3</div>
  </XtFlexBox>
</template>

显示代码 复制代码 复制代码

示例

水平居中且两端对齐

左侧内容 右侧内容

水平居中且两端对齐

<template>
  <XtFlexBox content="between" align="center">
    <span>左侧内容</span>
    <span>右侧内容</span>
  </XtFlexBox>
</template>

显示代码 复制代码 复制代码

垂直布局

顶部

中部

底部

垂直布局

<template>
  <XtFlexBox direction="column" gap="12px">
    <div style="background: #1890ff; color: white; padding: 8px;">顶部</div>
    <div style="background: #52c41a; color: white; padding: 8px;">中部</div>
    <div style="background: #faad14; color: white; padding: 8px;">底部</div>
  </XtFlexBox>
</template>

显示代码 复制代码 复制代码

均匀分布

元素1

元素2

元素3

元素4

均匀分布

<template>
  <XtFlexBox content="around">
    <div style="background: #1890ff; color: white; padding: 8px;">元素1</div>
    <div style="background: #52c41a; color: white; padding: 8px;">元素2</div>
    <div style="background: #faad14; color: white; padding: 8px;">元素3</div>
    <div style="background: #ea1d34; color: white; padding: 8px;">元素4</div>
  </XtFlexBox>
</template>

显示代码 复制代码 复制代码

自动换行

1

2

3

4

5

6

7

8

9

10

自动换行

<template>
  <XtFlexBox wrap="wrap" gap="8px">
    <div v-for="i in 10" :key="i" style="padding: 8px; background: #1890ff; color: white; width: 80px;">{{ i }}</div>
  </XtFlexBox>
</template>

显示代码 复制代码 复制代码

反向排列

第一 第二 第三

反向排列

<template>
  <XtFlexBox direction="row-reverse" gap="8px">
    <span style="padding: 8px; background: #1890ff; color: white; width: 80px;">第一</span>
    <span style="padding: 8px; background: #1890ff; color: white; width: 80px;">第二</span>
    <span style="padding: 8px; background: #1890ff; color: white; width: 80px;">第三</span>
  </XtFlexBox>
</template>

显示代码 复制代码 复制代码

嵌套使用

头部左侧 头部右侧

主内容区

侧边栏

嵌套使用

<template>
  <XtFlexBox direction="column" gap="16px">
    <XtFlexBox content="between">
      <span>头部左侧</span>
      <span>头部右侧</span>
    </XtFlexBox>
    <XtFlexBox>
      <div style="flex: 1; background: #e6f7ff; padding: 16px;">主内容区</div>
      <div style="width: 200px; background: #f6ffed; padding: 16px;">侧边栏</div>
    </XtFlexBox>
  </XtFlexBox>
</template>

显示代码 复制代码 复制代码

属性说明

属性	类型	默认值	可选值	说明
type	String	flex	-	布局类型
align	String	center	start、center、end、stretch、baseline	交叉轴对齐方式
content	String	start	start、center、end、between、around、evenly	主轴对齐方式
direction	String	row	row、row-reverse、column、column-reverse	排列方向
wrap	String	unset	wrap、nowrap、wrap-reverse	是否换行
gap	String	-	-	子元素间距