Flex 弹性布局

Flex 组件是一个基于 Flexbox 布局模型的容器组件，用于创建灵活、响应式的布局结构。组件提供了10栏栅格系统，支持响应式布局，并且可以控制元素间距、排序和对齐方式。

基础用法

使用 t-flex 和 t-flex-group 组件创建简单的弹性布局。

使用 t-flex 和 t-flex-group 组件创建简单的弹性布局。

显示代码

栅格配置

通过 span 和 offset 属性创建栅格布局，总栅格数为10。

通过 span 和 offset 属性创建栅格布局，总栅格数为10。

显示代码

排序

使用 sort 属性控制元素的显示顺序。

使用 sort 属性控制元素的显示顺序。

显示顺序: 1 → 2 → 3（无论在代码中的位置如何）

显示代码

对齐方式

通过 justify 和 align 属性设置弹性容器内元素的对齐方式。

通过 justify 和 align 属性设置弹性容器内元素的对齐方式。

水平对齐（justify）

start（默认）

center

end

space-between

space-around

垂直对齐（align）

center（默认）

start

end

显示代码

间距设置

使用 gap 属性设置元素之间的间距。

使用 gap 属性设置元素之间的间距。

无间距（默认）

间距 8px

间距 16px

间距 24px

显示代码

响应式布局

Flex 组件支持响应式布局，可以根据不同屏幕尺寸自动调整布局。

Flex组件支持响应式布局，可以根据不同屏幕尺寸自动调整布局。

响应式变化（请调整浏览器窗口查看效果）

XS

<768px

SM

≥768px

MD

≥992px

LG

≥1200px

XL

≥1920px

屏幕尺寸变化时，每行显示的项目数量将改变：

• XS(<768px): 每行1个（10列宽）
• SM(≥768px): 每行2个（5列宽）
• MD(≥992px): 每行3-4个（3列宽）
• LG(≥1200px): 每行5个（2列宽）
• XL(≥1920px): 每行10个（1列宽）

显示代码

Flex API

Flex 属性

属性名	说明	类型	可选值	默认值
span	栅格占据的列数	number	0-10	-
offset	栅格左侧的间隔	number	0-10	0
sort	元素的排序	number	-	-
xs	<768px 响应式栅格数	number	0-10	-
sm	≥768px 响应式栅格数	number	0-10	-
md	≥992px 响应式栅格数	number	0-10	-
lg	≥1200px 响应式栅格数	number	0-10	-
xl	≥1920px 响应式栅格数	number	0-10	-

FlexGroup 属性

属性名	说明	类型	可选值	默认值
justify	主轴对齐方式	string	start/end/center/space-around/space-between/space-evenly	start
align	交叉轴对齐方式	string	start/center/end	-
gap	元素间距(px)	number	-	12

插槽

插槽名	说明
default	默认插槽，放置子元素

样式变量

Flex 组件使用了以下样式变量，可通过 SCSS 变量进行自定义：

变量名	说明
$bg-color-default	默认背景颜色
$border-color-default	默认边框颜色
$text-color-default	默认文本颜色