ExUI

Appearance

Flex 弹性布局 ​

弹性布局组件，基于 CSS Flexbox 实现，提供简单灵活的布局方式。

何时使用 ​

  • 需要快速实现元素的对齐和分布
  • 组件内部的简单布局
  • 不需要复杂的栅格系统
  • 需要灵活的间距控制

Flex vs Grid：Flex 组件适合简单快速的布局，如果需要复杂的栅格系统和响应式设计，建议使用 Grid 组件。

基础用法 ​

最简单的弹性布局。

Item 1
Item 2
Item 3
Item 4
vue
<template>
  <ExFlex>
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
    <div class="flex-item">Item 4</div>
  </ExFlex>
</template>

间隙设置 ​

通过 gap 属性设置子元素之间的间隙。支持数字、预设值（'xs', 'sm', 'md', 'lg', 'xl'）和字符串。

Gap 预设值 ​

预设值像素值使用场景
xs4px紧凑布局
sm8px密集内容
md16px标准间距（推荐）
lg24px宽松布局
xl32px超大间距

gap: 8

Item 1
Item 2
Item 3

gap: 16

Item 1
Item 2
Item 3

gap: 32

Item 1
Item 2
Item 3

使用预设值：gap="sm"

Item 1
Item 2
Item 3

使用预设值：gap="lg"

Item 1
Item 2
Item 3
vue
<template>
  <!-- 使用数字 -->
  <ExFlex :gap="8">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </ExFlex>

  <!-- 使用预设值 -->
  <ExFlex gap="md">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </ExFlex>

  <!-- 使用字符串 -->
  <ExFlex gap="2rem">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </ExFlex>
</template>

主轴对齐 ​

通过 justify 属性控制主轴对齐方式。

当前值: flex-start

1
2
3
vue
<template>
  <ExFlex justify="flex-start">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </ExFlex>

  <ExFlex justify="center">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </ExFlex>

  <ExFlex justify="space-between">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </ExFlex>
</template>

交叉轴对齐 ​

通过 align 属性控制交叉轴对齐方式。

当前值: flex-start

1
2
3
vue
<template>
  <ExFlex align="flex-start">
    <div class="flex-item">1</div>
    <div class="flex-item" style="height: 80px;">2</div>
    <div class="flex-item">3</div>
  </ExFlex>

  <ExFlex align="center">
    <div class="flex-item">1</div>
    <div class="flex-item" style="height: 80px;">2</div>
    <div class="flex-item">3</div>
  </ExFlex>
</template>

垂直布局 ​

使用 vertical 属性快速设置垂直布局。

Item 1
Item 2
Item 3
vue
<template>
  <ExFlex vertical :gap="16">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </ExFlex>
</template>

换行 ​

通过 wrap 属性控制是否换行。

wrap: nowrap (默认)

1
2
3
4
5
6
7
8
9
10

wrap: wrap

1
2
3
4
5
6
7
8
9
10
vue
<template>
  <ExFlex wrap="nowrap" :gap="8">
    <div class="flex-item" v-for="i in 10" :key="i">{{ i }}</div>
  </ExFlex>

  <ExFlex wrap="wrap" :gap="8">
    <div class="flex-item" v-for="i in 10" :key="i">{{ i }}</div>
  </ExFlex>
</template>

方向 ​

通过 direction 属性控制 flex 方向。

当前值: row

1
2
3
4
vue
<template>
  <ExFlex direction="row" :gap="8">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </ExFlex>

  <ExFlex direction="column" :gap="8">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </ExFlex>
</template>

FlexItem 组件 ​

使用 ExFlexItem 组件可以更精确地控制 flex 项目的属性。

使用 flex 属性

flex: 1
flex: 2
flex: 1

固定宽度 + 自适应

100px
自适应
150px

使用 order 调整顺序

1 (order: 3)
2 (order: 1)
3 (order: 2)
vue
<template>
  <!-- 使用 flex 属性 -->
  <ExFlex :gap="16">
    <ExFlexItem :flex="1">
      <div class="flex-item">flex: 1</div>
    </ExFlexItem>
    <ExFlexItem :flex="2">
      <div class="flex-item">flex: 2</div>
    </ExFlexItem>
    <ExFlexItem :flex="1">
      <div class="flex-item">flex: 1</div>
    </ExFlexItem>
  </ExFlex>

  <!-- 固定宽度 + 自适应 -->
  <ExFlex :gap="16">
    <ExFlexItem :basis="100" :shrink="0">
      <div class="flex-item">100px</div>
    </ExFlexItem>
    <ExFlexItem :flex="1">
      <div class="flex-item">自适应</div>
    </ExFlexItem>
    <ExFlexItem :basis="150" :shrink="0">
      <div class="flex-item">150px</div>
    </ExFlexItem>
  </ExFlex>

  <!-- 使用 order 调整顺序 -->
  <ExFlex :gap="16">
    <ExFlexItem :order="3">
      <div class="flex-item">1 (order: 3)</div>
    </ExFlexItem>
    <ExFlexItem :order="1">
      <div class="flex-item">2 (order: 1)</div>
    </ExFlexItem>
    <ExFlexItem :order="2">
      <div class="flex-item">3 (order: 2)</div>
    </ExFlexItem>
  </ExFlex>
</template>

内联 Flex ​

使用 inline 属性创建内联 flex 容器。

这是一段文字，

内联Flex容器
，继续文字内容。

vue
<template>
  <p>
    这是一段文字，
    <ExFlex inline :gap="8">
      <span class="inline-item">内联</span>
      <span class="inline-item">Flex</span>
      <span class="inline-item">容器</span>
    </ExFlex>
    ，继续文字内容。
  </p>
</template>

API ​

Flex Props ​

参数说明类型默认值
directionflex-direction 的值'row' | 'row-reverse' | 'column' | 'column-reverse''row'
wrapflex-wrap 的值'nowrap' | 'wrap' | 'wrap-reverse''nowrap'
justifyjustify-content 的值'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly''flex-start'
alignalign-items 的值'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch''flex-start'
align-contentalign-content 的值（仅在 wrap 不为 nowrap 时生效）'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch''stretch'
gap间隙大小，支持数字、预设值或字符串
预设值：'xs'(4px), 'sm'(8px), 'md'(16px), 'lg'(24px), 'xl'(32px)		string | number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'-
row-gap行间隙，优先级高于 gap，支持预设值string | number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'-
column-gap列间隙，优先级高于 gap，支持预设值string | number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'-
inline是否为内联 flex（display: inline-flex）booleanfalse
vertical是否垂直布局（等同于 direction="column"）booleanfalse

FlexItem Props ​

参数说明类型默认值
flexflex 简写属性，设置后会覆盖 grow、shrink、basisstring | number-
growflex-grow 的值，元素的放大比例number0
shrinkflex-shrink 的值，元素的缩小比例number1
basisflex-basis 的值，元素的基础大小string | number'auto'
align-selfalign-self 的值，单独设置该项的对齐方式'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch''auto'
orderorder 的值，调整元素的显示顺序number0

Flex Slots ​

名称说明
default默认插槽，flex 子元素

FlexItem Slots ​

名称说明
default默认插槽，flex 项目内容