# 多列布局
多列布局是消息卡片搭建工具提供的布局容器能力。你可以使用多列布局横向排布多个列容器，在列容器内自由组合图文内容，解决多列内容对齐问题的同时，还实现了灵活的图文混排。warning
多列布局为历史版本消息卡片搭建工具组件。了解对应新版组件，参考[分栏](https://open.feishu.cn/document/uAjLw4CM/ukzMukzMukzM/feishu-cards/card-components/containers/column-set)。
## 功能介绍
多列布局容器由 **多列布局**（column_set）和 **列**（column）组成。在一个容器内可以横向填充多个列，在每个列内又可以纵向堆叠文本、图片等元素组件，或者是嵌套一个新的多列布局。
多列布局、列、元素组件的嵌套关系如下图所示。
列中再嵌套多列布局的层级关系，如下图所示。
布局容器提供了内容对齐方式、容器宽度、交互方式等属性，便于你更好地进行内容排版。基于这种布局方式，你可以搭建出数据表、商品文章列表、差旅信息等图文并茂、交互友好的混排消息卡片。warning
**注意：**
* 多层嵌套可能导致展示空间被压缩，影响卡片的展示品质，因此请尽量避免多层嵌套。
* 列（column）内目前支持添加的组件或模块包括：[文本](https://open.feishu.cn/document/ukTMukTMukTM/uUzNwUjL1cDM14SN3ATN)、[Markdown](https://open.feishu.cn/document/ukTMukTMukTM/uADOwUjLwgDM14CM4ATN)、[图片](https://open.feishu.cn/document/ukTMukTMukTM/uUjNwUjL1YDM14SN2ATN)、[分割线](https://open.feishu.cn/document/ukTMukTMukTM/uQjNwUjL0YDM14CN2ATN)、[备注](https://open.feishu.cn/document/ukTMukTMukTM/ucjNwUjL3YDM14yN2ATN)、[双列文本](https://open.feishu.cn/document/ukTMukTMukTM/uYzNwUjL2cDM14iN3ATN)、[文本 + 按钮](https://open.feishu.cn/document/ukTMukTMukTM/uYzM3QjL2MzN04iNzcDN/component-list/combinations/text-button)、[文本 + 图片](https://open.feishu.cn/document/ukTMukTMukTM/uYzM3QjL2MzN04iNzcDN/component-list/combinations/text-image)、[文本 + 列表选择器](https://open.feishu.cn/document/ukTMukTMukTM/uYzM3QjL2MzN04iNzcDN/component-list/combinations/text-option-picker)、[文本 + 折叠按钮组](https://open.feishu.cn/document/ukTMukTMukTM/uYzM3QjL2MzN04iNzcDN/component-list/combinations/text-overflow-button)、[文本 + 日期选择器](https://open.feishu.cn/document/ukTMukTMukTM/uYzM3QjL2MzN04iNzcDN/component-list/combinations/text-date-picker)。
## 组件展示
在消息卡片搭建工具中，多列布局组件的配置方式如下：
- 设置列比例
在添加多列布局组件时，你可以选择适用的列比例。
- 配置布局样式
选中多列布局后，支持配置布局的样式与交互。
- **窄屏自适应布局方式**：设置窄屏场景中，多列布局的展示。可选择 **无（none）**、**每列占满一行（stretch）**、**流式布局（flow）**、**等分双列（bisect）**、**等分三列（trisect）**。具体的参数配置说明，可参见下文 **参数说明** 章节内的 `flex_mode` 参数。
- **水平分栏间距**：多列布局内各列之间的间距，可选 **默认间距**、**小间距**。
- **背景色**：可选 **默认**（即默认的白底样式）、**灰色**。
- **绑定循环变量**：可添加循环对象数组变量。关于变量的说明，可参见[配置卡片变量](https://open.feishu.cn/document/ukTMukTMukTM/ucTNwUjL3UDM14yN1ATN/configure-card-variables)。
- **交互**：开启交互后，可以为多列布局配置跳转链接。支持开启差异化跳转，分别为 PC 端、Android 端、iOS 端配置不同的跳转链接。
- 配置列布局
选中多列布局中的列之后，支持配置列布局的样式。
- **列宽度模式**：选择 **按占比设置列宽** 后，可手动设置 **列宽占比**，系统会根据比例适配各列宽度。选择 **列宽适应内容** 后，列宽度与列内的元素宽度保持一致。
- **垂直对齐方式**：可选择 **顶对齐**、**居中对齐**、**底对齐**。
## 应用场景
多列布局常应用在以下场景：
* **数据报表推送场景**：使用多列布局可以快速构建整齐、自适应屏幕的多列数据表，解决了传统报表构建时繁琐的排版过程，以及无法自适应各类屏幕的样式问题。
* **图文混排场景**：多列布局灵活的横纵列排版能力，使你可以快速构建理想的图文消息卡片。有效降低手动调整图文排版的耗时。
## 参数说明
多列布局的参数说明如下表所示。
参数 | 是否必填 | 类型 | 描述
---|---|---|---
tag | 是 | String | 多列布局容器的标识，固定取值：column_set。
flex_mode | 是 | String | 移动端和 PC 端的窄屏幕下，各列的自适应方式。取值：
* **none**：不做布局上的自适应，在窄屏幕下按比例压缩列宽度。
* **stretch**：列布局变为行布局，且每列（行）宽度强制拉伸为 100%，所有列自适应为上下堆叠排布。
* **flow**：列流式排布（自动换行），当一行展示不下一列时，自动换至下一行展示。
* **bisect**：两列等分布局。
* **trisect**：三列等分布局。
**默认值**：none。
background_style | 否 | String | 多列布局的背景色样式。取值：
* **default**：默认的白底样式，dark mode 下为黑底。
* **grey**：灰底样式。
当存在多列布局的嵌套时，上层多列布局的颜色覆盖下层多列布局的颜色。
horizontal_spacing | 否 | String | 多列布局内，各列之间的水平分栏间距。取值：
* **default**：默认间距。
* **small**：窄间距。
columns | 否 | column[] | 多列布局容器内，各个列容器的配置信息。详情参见下文 **column 参数说明**。
action | 否 | action | 设置点击布局容器时的交互配置。当前仅支持跳转交互。如果布局容器内有交互组件，则优先响应交互组件定义的交互。
示例配置如下，其中支持内嵌 url 元素，该元素说明参见 [url](https://open.feishu.cn/document/ukTMukTMukTM/uczNwUjL3cDM14yN3ATN)。
```
{
"action": {
"multi_url": {
"url": "https://open.feishu.cn",
"pc_url": "https://open.feishu.com",
"ios_url": "https://developer.apple.com/",
"android_url": "https://developer.android.com/"
}
}
}
```
## column 参数说明
参数 | 是否必填 | 类型 | 描述
---|---|---|---
tag | 是 | String | 列容器标识，固定取值：`column`。
width | 否 | String | 列宽度属性。取值：
* **auto**：列宽度与列内元素宽度一致。
* **weighted**：列宽度按 `weight` 参数定义的权重分布。
weight | 否 | number | 当 `width` 取值 `weighted` 时生效，表示当前列的宽度占比。取值范围：1 ~ 5
vertical_align | 否 | String | 列内成员垂直对齐方式。取值：
* **top**：顶对齐。
* **center**：居中对齐。
* **bottom**：底部对齐。
elements | 否 | Elements[]
ColumnSet[] | 需要在列内展示的卡片元素。
## JSON 示例及效果
### 示例一：数据报表
JSON 示例：
```json
{
"elements": [
{
"tag": "markdown",
"content": "**个人审批效率总览**\n"
},
{
"tag": "column_set",
"flex_mode": "bisect",
"background_style": "grey",
"horizontal_spacing": "default",
"columns": [
{
"tag": "column",
"width": "weighted",
"weight": 1,
"elements": [
{
"tag": "markdown",
"text_align": "center",
"content": "已审批单量\n**${total_count}单**\n${total_percent}"
}
]
},
{
"tag": "column",
"width": "weighted",
"weight": 1,
"elements": [
{
"tag": "markdown",
"text_align": "center",
"content": "平均审批耗时\n**${hours}小时**\n${hours_percent}"
}
]
},
{
"tag": "column",
"width": "weighted",
"weight": 1,
"elements": [
{
"tag": "markdown",
"text_align": "center",
"content": "待批率\n**${pending}**\n${pending_rate}"
}
]
}
]
},
{
"tag": "markdown",
"content": "**团队审批效率参考：**"
},
{
"tag": "column_set",
"flex_mode": "none",
"background_style": "grey",
"columns": [
{
"tag": "column",
"width": "weighted",
"weight": 1,
"vertical_align": "top",
"elements": [
{
"tag": "markdown",
"content": "**审批人**",
"text_align": "center"
}
]
},
{
"tag": "column",
"width": "weighted",
"weight": 1,
"vertical_align": "top",
"elements": [
{
"tag": "markdown",
"content": "**审批时长**",
"text_align": "center"
}
]
},
{
"tag": "column",
"width": "weighted",
"weight": 1,
"vertical_align": "top",
"elements": [
{
"tag": "markdown",
"content": "**对比上周变化**",
"text_align": "center"
}
]
}
]
},
{
"tag": "column_set",
"flex_mode": "none",
"background_style": "default",
"columns": [
{
"tag": "column",
"width": "weighted",
"weight": 1,
"vertical_align": "top",
"elements": [
{
"tag": "markdown",
"content": "${person}",
"text_align": "center"
}
]
},
{
"tag": "column",
"width": "weighted",
"weight": 1,
"vertical_align": "top",
"elements": [
{
"tag": "markdown",
"content": "${time}",
"text_align": "center"
}
]
},
{
"tag": "column",
"width": "weighted",
"weight": 1,
"vertical_align": "top",
"elements": [
{
"tag": "markdown",
"content": "${week_rate}",
"text_align": "center"
}
]
}
],
"_varloop": "${group_table}"
}
]
}
```
效果展示：
桌面端效果 | 窄屏及移动端自适应效果
---|---
 | 
### 示例二：差旅卡片
JSON 示例：
```json
{
"header": {
"title": {
"tag": "plain_text",
"content": "🏨 酒店申请已通过，请选择房型"
},
"template": "green"
},
"elements": [
{
"tag": "markdown",
"content": "**入住酒店：**[杭州xxxx酒店](https://open.feishu.cn/)\n📍 浙江省杭州市西湖区"
},
{
"tag": "hr"
},
{
"tag": "column_set",
"flex_mode": "none",
"background_style": "default",
"horizontal_spacing": "default",
"action": {
"multi_url": {
"url": "https://open.feishu.cn",
"android_url": "https://developer.android.com/",
"ios_url": "https://developer.apple.com/",
"pc_url": "https://www.windows.com"
}
},
"columns": [
{
"tag": "column",
"width": "weighted",
"weight": 1,
"vertical_align": "center",
"elements": [
{
"tag": "img",
"img_key": "img_v2_120b03c8-27e3-456f-89c0-90ede1aa59ag",
"mode": "fit_horizontal",
"alt": {
"tag": "plain_text",
"content": ""
}
}
]
},
{
"tag": "column",
"width": "weighted",
"weight": 3,
"elements": [
{
"tag": "markdown",
"text_align": "left",
"content": "**高级双床房**\n双早|40-47㎡|有窗户|双床\n¥699 起"
}
]
}
]
},
{
"tag": "hr"
},
{
"tag": "column_set",
"flex_mode": "none",
"background_style": "default",
"horizontal_spacing": "default",
"action": {
"multi_url": {
"url": "https://open.feishu.cn",
"android_url": "https://developer.android.com/",
"ios_url": "https://developer.apple.com/",
"pc_url": "https://www.windows.com"
}
},
"columns": [
{
"tag": "column",
"width": "weighted",
"weight": 1,
"vertical_align": "center",
"elements": [
{
"tag": "img",
"img_key": "img_v2_120b03c8-27e3-456f-89c0-90ede1aa59ag",
"mode": "fit_horizontal",
"alt": {
"tag": "plain_text",
"content": ""
}
}
]
},
{
"tag": "column",
"width": "weighted",
"weight": 3,
"elements": [
{
"tag": "markdown",
"text_align": "left",
"content": "**精品大床房**\n双早|40-47㎡|有窗户|大床\n¥666 起"
}
]
}
]
}
]
}
```
桌面端效果 | 窄屏及移动端自适应效果
---|---
 | 