Flex 布局

1. 组件概述

Flex 布局是一个布局容器组件，基于 CSS Flexbox 技术实现。它的核心功能是帮助你创建灵活的多列布局结构，可以轻松控制内部元素的排列方向、对齐方式和空间分配。相比手动编写 CSS 样式，Flex 布局提供了可视化的配置方式，让不熟悉代码的用户也能快速搭建出专业的页面布局。它是构建页面整体结构的核心组件，几乎所有需要并排展示多个内容区域的场景都会用到它。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

场景一：搭建 AI 问答界面的左右分栏布局。左侧放置输入区域（文本框、按钮等），右侧放置 AI 回复的展示区域。使用「快捷版式设置」选择 1:2 的比例，让回复区域占据更大空间，方便阅读长文本内容。
场景二：创建知识卡片的多列展示。在学习辅导类应用中，需要并排展示多个知识点卡片。使用 Flex 布局设置 1:1:1 的三列等宽布局，配合「列间隔」设置适当的卡片间距，实现整齐美观的卡片墙效果。

加载中...

查看 JSON

复制 JSON

3. 功能配置

基础

配置折叠组

配置项	说明
快捷版式设置	用于快速设置内部列的宽度比例。通过点击预设的比例按钮（如 1:1、1:2、1:1:1 等），可以一键调整各列的相对宽度。这是最常用的布局配置方式，适合快速搭建常见的分栏布局。
下方插入新行	点击后在当前布局容器下方插入一个新的 Flex 布局容器，方便快速构建多行布局结构。
上方插入新行	点击后在当前布局容器上方插入一个新的 Flex 布局容器。
内边距和外边距	设置布局容器的内部间距（内边距）和与其他元素的外部间距（外边距）。内边距控制容器边缘与内部内容之间的空白区域，外边距控制容器与周围其他元素之间的距离。
边框	设置布局容器的边框样式，包括边框的粗细、颜色和圆角。可以为容器添加视觉边界，使布局区域更加清晰。
背景	设置布局容器的背景，支持纯色、渐变色或背景图片。可以用来区分不同的内容区域或增强视觉效果。
内部对齐设置	控制内部子元素的排列方式，包含三个核心设置：排列方向（水平排列或垂直排列）、水平对齐（子元素在水平方向上的对齐方式，如居中、两端对齐等）、垂直对齐（子元素在垂直方向上的对齐方式，如顶部对齐、居中对齐等）。
行间隔	当内部元素垂直排列时，设置各元素之间的垂直间距。数值越大，元素之间的纵向距离越远。
列间隔	当内部元素水平排列时，设置各元素之间的水平间距。数值越大，元素之间的横向距离越远。
高度设置	选择容器的高度模式。「固定」表示设置一个具体的高度值；「适配」表示高度根据内部内容自动调整。选择固定高度后，可以进一步设置具体的高度数值。
高度	当高度设置为「固定」时显示，用于输入具体的高度值，支持像素（px）、百分比（%）等单位。
最大高度	当高度设置为「适配」时显示，限制容器的最大高度。即使内容很多，容器高度也不会超过这个值。
最小高度	当高度设置为「适配」时显示，设置容器的最小高度。即使内容很少，容器也会保持这个最小高度。
宽度设置	选择容器的宽度模式。「固定」表示设置一个具体的宽度值；「适配」表示宽度根据父容器或内容自动调整。
宽度	当宽度设置为「固定」时显示，用于输入具体的宽度值。
最大宽度	当宽度设置为「适配」时显示，限制容器的最大宽度。
最小宽度	当宽度设置为「适配」时显示，设置容器的最小宽度。
对齐方式	当设置了固定宽度或最大宽度时显示。控制容器在父元素中的水平位置，可选择「靠左」、「居中」或「靠右」。
滚动吸附	开启后，当页面滚动时，容器会在到达父容器边缘时自动吸附固定。适用于需要始终保持可见的导航栏或工具栏。
吸附位置	当开启滚动吸附后显示。设置吸附的位置，可选择「吸顶」（固定在顶部）、「吸底」（固定在底部）或「自动」。

高级

配置折叠组

配置项	说明
如何换行	控制当内部元素超出容器宽度时的换行行为。「不换行」表示所有元素强制在一行显示（可能会被压缩或溢出）；「自动换行」表示超出时自动换到下一行；「自动换行（颠倒）」表示换行后新行显示在上方。
水平内容超出	设置当内容宽度超出容器时的处理方式。「超出显示」表示内容正常显示不裁剪；「超出隐藏」表示超出部分不可见；「水平滚动」表示显示水平滚动条；「自动适配」表示仅在需要时显示滚动条。
垂直内容超出	设置当内容高度超出容器时的处理方式。选项与水平内容超出相同，但作用于垂直方向。
显示层级	设置容器的堆叠顺序（z-index）。数值越大，容器越靠前显示。当多个元素重叠时，层级高的会遮挡层级低的。仅在定位模式不是「默认」时生效。
定位模式	设置容器的定位方式。「默认」表示正常文档流布局；「相对原位置定位」表示相对于原本位置进行偏移；「视窗中悬浮」表示固定在浏览器窗口的某个位置，不随页面滚动；「绝对定位」表示相对于最近的定位父元素进行定位。
参考位置	当定位模式为「视窗中悬浮」或「绝对定位」时显示。设置定位的参考角，可选择左上角、右上角、右下角、左下角。
布局位置	当定位模式不是「默认」时显示。精确设置容器距离上、右、下、左四个方向的距离。

状态折叠组

配置项	说明
可见	控制容器是否显示。默认为可见状态。可以绑定变量实现动态控制显示隐藏。
隐藏	控制容器是否隐藏。与「可见」相反。