> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 布局容器

> 本文介绍了布局容器组件的使用方法，包括其定义、应用场景以及属性设置。还详细讲解了样式配置，如布局方式、移动端设置、源码编辑等，并提供了关于CSS布局模型的基础知识。

## 1. 布局容器组件介绍

### 1.1 什么是布局容器

* 布局：是对已有的可视化组件的位置摆放控制，表示了一种动作；
* 布局容器：是一种有布局能力的容器，可以放入多个组件到布局容器中进行展示；
* 对于复杂场景的布局，我们优先推荐宜搭弹性布局，即 **flex-layout** ，也是目前业界前端的主流 CSS 布局方式；
* 对于更详细的 flex 布局介绍，可参见 **教程链接** 。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639361091622-5282edd8-6df6-4306-938a-aab551d996f0.png)
</Frame>

添加布局容器组件

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639361153123-c61b174f-e18f-4e44-91a8-3fcc485b9805.png)
</Frame>

在布局容器内添加单独的组件

### 1.2 使用场景

* 当页面位置需要分块划分时，比如希望页面按两列进行展示时
* 当页面需要适配不同屏幕尺寸时
* 当页面的 layout 布局有嵌套，位置相对性，位置决定性时
* 当页面的样式实现，需要借助 CSS 等高级布局技术能力时

<Note>
  组件属性以及使用和示例请[**点击此处**](/zh/open/yida/components/layout/regionalContainer)查看
</Note>

## 2. 属性

### 2.1 布局

可以直接选择系统模板，也可自己自定义配置，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639361214365-eefe6799-584d-4f4a-a81f-501fd381fef7.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639361239348-d4ebe3f4-21e0-425b-816e-1307c215e329.png)
</Frame>

选择布局方式

### 2.2 Mobile 端设置

指的组件的排列方式，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639361269125-d167359f-3161-43d5-84c2-9f7ebb4dad75.png)
</Frame>

手机端设置

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639361317411-4ca81d25-74cb-426b-8948-f8889abc77e7.png)
</Frame>

## 3. 样式

对于布局容器的样式配置

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639361367916-8bdb8009-8a3b-4980-8db2-87062c9f26e1.png)
</Frame>

配置组件样式

### 3.1 源码编辑

即以 CSS 源代码方式进行样式编辑，当前 div 默认使用 flex 布局；

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639361484867-e7711ef6-1f56-49a5-b1fe-9c77aa8428c3.png)
</Frame>

### 3.2 状态

以传统 PC 端的组件状态进行分组设置：

* 默认：正常状态
* hover: 鼠标浮动在组件热区，且未产生点击行为
* focus：页面原色处于光标焦点位置
* active: 页面元素处于选中激活状态

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639361538058-25254118-eb4e-4dba-80e1-7d1a7779459a.png)
</Frame>

**注：**

* 不同的状态设置，默认状态会覆盖其他 3 种状态
* 而 hoverocusactive 3 种状态的配置则相互隔离，互不影响
* 体现在 CSS 中，是独立的选择器设置

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639361693932-6f0b8baa-c659-4308-a0a5-b58bb9067ce2.png)
</Frame>

### 3.3 显示

对应 CSS 的 display 模式：

* block：盒子模型
* inline-block：行内盒子模型
* inline：行内模型
* flex：弹性布局模型

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639361729080-6ff938db-f112-4dbb-bbe4-b71cde08683d.png)
</Frame>

以上四种均为标准前端 CSS 布局模型，这里不做展开介绍，有需要的话，可以参考 [**w3c对应文档**](https://www.runoob.com/css/css-website-layout.html)

举例，flex 比较常用的是

* 使用 flex 布局，按需采用横向排列、或纵向排列；
* 然后设置水平+垂直 均居中对齐，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639361823894-745a681d-cc7e-40f7-b57a-64cf9434e9ee.png)
</Frame>

### 3.4 Margin 及 Padding

Margin 指盒子模型中的，距离其他节点元素的距离；

Padding 指盒子模型中的，距离其内部元素的留白距离，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639361858843-5bc6dc83-9b18-441d-aa0d-3d7ea6fd82c3.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639361900834-44361a7f-62d5-4b11-95d9-ca066b531a37.png)
</Frame>

### 3.5 文字

设置文字之后，影响的分组里面的组件标题，可自定义，也可直接选择文字标题，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639361933731-3f38ab50-0e64-46e9-8bfd-c56af4a3c20a.png)
</Frame>

### 3.6 背景

可自主选择系统自带的颜色，也可使用本地图片背景上传，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639362030395-9a817332-c241-4662-8015-e9df8326d6ce.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639362078675-a23d8c14-88c4-447a-a7b0-a48f3c0dcc60.png)
</Frame>

### 3.7 边框

指设置布局容器组件的边框效果；

同时支持设置圆角大小，圆角指组件的四个角的弧度，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639362136614-7b413aff-bf42-4b13-974f-783429096501.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639362181658-0c12904d-353d-445c-b575-7ef176fd704f.png)
</Frame>

### 3.8 阴影

设置组件的阴影投影，通过 xy 设置方向，通过 blur 和 spread 设置阴影，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639362290789-7911e01a-3706-4a30-8e60-0f4f79e87c79.png)
</Frame>

### 3.9 不透明度

* 设置区块的整体透明度效果，范围 0\~100
* 默认为 100，0 为完全透明

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639362329346-8d8c70ae-cbe6-442e-a6dd-35ed1286ee4d.png)
</Frame>

### 3.10 鼠标手势

* 选择 pointer ，则当鼠标浮动在区块上方时，会出现小手标志
* 选择 default ，则当鼠标浮动在区块上方时，会出现箭头标志