概述
在飞书低代码平台中，应用页面提供了多样的「布局」与「样式」能力，能够实现丰富、灵活的页面效果。
借助「布局」配置，可以将内容在组件中合理排布，且适配容器的尺寸变化：
- 组件能够按照 12 栅格设置宽度，以及在画布内对组件宽度进行拖拽
- 支持在水平方向的排列布局，且组件较多时，能够自适应页面宽度进行折行显示
而各个组件，均配置了统一的「样式」面板，包含属性：尺寸、间距、背景、边框、阴影……可以灵活自定义组件的呈现效果。
配置项
（一）布局
布局方向
选择项 | 实现效果 |
水平 | 组件在水平方向排列。例如：当前行已有一个「图片」组件，在右侧拖入「搜索」组件。 250px|700px|reset |
垂直 | 组件在垂直方向排列。例如：当前行已有一个「图片」组件，在下方拖入「搜索」组件。 250px|700px|reset |
超出折行
当前行存在多个组件时，若组件尺寸超过当前行，则会变换“换行”效果：
250px|700px|reset
如图所示：
250px|700px|reset
溢出规则
当单个组件宽度或高度超过所在容器的宽高，可以设置：
- 截断
- 滚动
以设计一个网页的顶图为例。
设置详情：「图片」外层是「区块」，且「图片」高度超出「区块」高度
由于图片过长，当设置为【截断】，图片在实际显示时，只能查看到局部：
当设置为【滚动】时，图片则支持上下滚动，能够查看全图：
对齐方式
支持水平、垂直两个方向各 5 种对齐方式。
（二） 尺寸
宽度
选择项 | 配置说明 |
栅格 | 无论是页面的画布宽度、组件宽度，均做了 12 等分，我们将此称为「栅格」化。 通过设置栅格数量，可以更快速地改变组件宽度。例如，「图片」组件宽度设置为栅格 3 时，它将调整自身宽度，仅占区块的 3 个栅格： loading... |
适应内容 | 根据内容来调整宽度。 例如，「搜索」组件宽度设置【适应内容】时，按照字符自动适应缩小/扩大： 250px|700px|reset |
固定宽度 | 始终保持所设置的宽度。 |
填充容器 | 撑满容器的可用宽度。 例如，「搜索」组件宽度设置【填充容器】时，直接占满外层「区块」组件的最大宽度： 250px|700px|reset |
高度
选择项 | 配置说明 |
适应内容 | 根据内容来调整高度。同上文宽度说明一致。 |
固定高度 | 保持所设置的高度。同上文宽度说明一致。 |
填充容器 | 撑满容器的可用高度。同上文宽度说明一致。 |
弹性规则
「弹性规则」一般用于：当页面被拉宽或缩小时，页面中的组件能够灵活地调整自身大小，去适应页面。
选择项 | 配置说明 |
默认 | 无弹性。 |
伸展 | 当有剩余空间时，设置了【伸展】的组件，将尽可能撑满容器可用宽度。 当容器没有剩余空间时，伸展不会生效。 |
收缩 | 当空间小于所需时，设置了【收缩】的组件，将收缩自身宽度以适配容器。 |
例如下图排列效果，当左边的「图片」组件设置为【伸展】时，将自动填满剩余的空白区域。
参数详情：区块宽度默认 12 栅格，每个图片组件宽度都设置为 3 栅格
loading...
（三）间距
页面中，组件往往会进行嵌套、排列，为了更舒适的视觉效果，我们可以通过「间距」来调整：组件到组件间的距离、组件边框到内容的距离：
250px|700px|reset
250px|700px|reset
在间距设置的面板中，点击数值可对局部进行设置；当点击设置面板的任意空白角落，也可以一次性设置间距数值：
250px|700px|reset
例如，当水平位置有多个组件均设置了阴影效果，我们可以通过拉开组件的外层间距，让阴影效果展示的更为舒适：
loading...
（四）位置
可对某个组件在页面或者父容器中的位置进行特殊的配置，以实现除平铺排列外的其他展示效果。
250px|700px|reset
类型与边距
- 默认
- 组件跟随用户页面滑动。
- 绝对
- 组件始终保持和父容器的绝对位置，随父容器移动而移动，保持绝对固定。
- 且位置【绝对】的组件，不会因父容器中添加其他组件而移动位置，可以实现组件的堆叠。
- 对于位置【绝对】的组件，可设置上下左右数值来控制与父容器的边距。
250px|700px|reset
- 固定
- 始终保持在页面的固定位置，不随页面上下滑动而滑动。
- 对于位置【固定】的组件，支持设置上下左右数值来控制与页面的边距。
- 例如：想在滚动页面的时候，让图标始终固定悬浮在页面右下角。如下图：
250px|700px|reset
- 粘滞
- 初始在一个默认位置，超出后会固定定位。
例如：在滚动页面的时候，让原本在底部的区域，最终固定在页面顶部。如下图：
250px|700px|reset
- 粘滞配置方法：
- 设置粘滞时需要先明确组件是相对父容器的哪一个边进行固定。
- 然后将需要粘滞住的一边边距设置为某个固定值，即确定将组件粘滞在距离父容器边距多少的位置不再移动。
- 边距为「自动」的一边不会产生粘滞效果。
- 举例说明：下图中灰色区块设置为粘滞，左边距设置为8。滚动过程中如果距离父容器左边界的距离大于8，是会随着滚动位移的，但如果位移到小于8的位置，就会固定住不再移动。
- 配置说明：
- 250px|700px|reset
- 预览效果：
- 250px|700px|reset
位置粘滞，也非常适合：移动端有滚动时的顶部栏，效果和搭建页面如下，只需根据不同情况外层套个区块配置粘滞即可。
250px|700px|reset
「边距」设置
边距是指：组件在画布/容器中的坐标。通过设置 4 个值，可以控制：
- 顶：元素与画布/容器顶部的距离
- 右：元素与画布/容器右边界的距离
- 下：元素与画布/容器底部的距离
- 底：元素与画布/容器左边界的距离
注意：顶部、底部间只能设置一个；右边界、左边界间只能设置一个
Z轴层级
用于定位重叠的时候区分层级。默认为 1，数字越大，层级越高。
例如，将图标显示在图片组件上方。如图所示：将绿色图标的层级放大后，图标从图片下方，变到了图片上方：
loading...
（五）背景
模式
选择项 | 实现效果 |
透明 | 将页面最外层「区块」组件的背景，设置为【透明】效果： 250px|700px|reset |
颜色 | 将页面最外层「区块」组件的背景，设置为淡黄色效果： 250px|700px|reset |
图片 | 将页面最外层「区块」组件的背景，设置为【图片】效果： 250px|700px|reset 图片剪裁方式支持：
|
（六）边框
圆角
支持统一设置圆角样式，也可以分开设置组件的四个圆角样式。例如，将图片的圆角统一设置、分开设置后的效果：
暂时无法在飞书文档外展示此内容
（七）阴影
偏移
X 用于控制阴影显示在组件的左右侧方位；Y 用于控制阴影显示在组件的上下侧方位。可以通过对 X、Y 的数值设置，控制阴影出现在组件周围的 360 度。
例如，为图片设置不同偏移下的阴影效果：
参数设置：左【X 20 Y 0】。右【X 0 Y 20】。
250px|700px|reset
效果
- 模糊：可以让阴影的效果更为柔和。
- 扩展：让阴影的覆盖范围进行扩张（基于偏移量）。
例如，将图片阴影效果设置【模糊】与【扩展】下的不同效果：
参数设置：左 20 模糊。右 0 模糊。
250px|700px|reset
参数设置：左 0 扩展。右 20扩展。
250px|700px|reset
