# 布局容器
布局容器的主要作用是控制其内部元素的排列和布局，确保界面的整洁有序和响应式设计。
在左侧组件区域，选择"布局容器"组件，并拖拽至设计区域，如[图1]所示。
图1拖拽布局容器组件到设计区并设置属性   
![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000001999344517.png)
将组件拖拽至布局容器中，根据需求布局，选中组件可配置对应组件属性。
图2设计布局   
![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000001962909578.png)
#### 基础配置
- 链接块操作：单击链接块时触发的操作，默认为"打开已发布表单"，可根据需求选择"打开已发布表单"、"打开已发布数据管理页"、"打开已发布自定义页面"或"打开外部链接"。
- 打开方式：提供了"当前页面打开"、"新页面打开"和"弹窗打开"三种方式，您可根据需求选择。
- 按钮操作：设置单击触发的动作，默认为"打开已发布表单"，可根据需求选择"打开已发布表单"、"打开已发布数据管理页"、"打开已发布自定义页面"或"打开外部链接"。
- 选择页面：下拉框中选择已发布表单，当"按钮操作"选择"打开已发布表单"、"打开已发布数据管理页"或"打开已发布自定义页面"时可配置。 注意：请选择应用内已发布页面作为打开页面，页面停止发布将影响按钮事件。
  
- 当"按钮操作"选择""打开外部链接"时，输入以http(s)开头链接地址。
- 单元格高度：设置容器的单元格高度，以容纳其中最高的内容同时考虑到行间距原则，保持整体的平衡。默认高度为20px。
 
#### 样式配置
- 内间距：设置容器内组件与容器四边的间距，可分别配置上、下、左、右或四周。默认值为4px，范围为0\~100px。 ![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000002000387948.png)
  
- 外间距：设置容器外与其他容器四边的间距，可分别配置上、下、左、右或四周。默认值为0px，范围为0\~100px。
- 边框：
  - 位置：设置边框的位置，支持配置上、下、左、右和四周。
  
  - 宽度：设置边框的宽度。默认值为0px，范围为0\~50px。
  
  - 样式：设置边框样式，根据需求选择"无"、"圆点"、"虚线"和"实线"。
  
  - 颜色：设置边框显示的颜色。
  
  
  ![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000001874146720.png)
  
- 圆角：给元素添加圆角效果，设置圆角的大小和位置。 默认值为0px，范围为0\~500px。
  ![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000001865581816.png)
  
- 背景类型：设置组件样式的背景。
  - "背景类型"选择"颜色"时，选择背景展示的颜色。
  
  - "背景类型"选择"图片"时，上传图片作为背景，并设置图片的填充方式。 背景图片支持jpg、jpeg、png、gif格式，单张5MB以内。
    图3设置背景   
    ![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000002013716721.png) 
   
- 阴影：
  - X：X偏移，阴影相对于其源元素在水平方向（X轴）的偏移距离，取值范围\[-100, 100\]。
  
  - Y：Y偏移，阴影在垂直方向（Y轴）的偏移距离，取值范围\[-100, 100\]。
  
  - 模糊：阴影的模糊程度。值为0时表示阴影边缘锐利，没有模糊。值越大，阴影的边缘就越模糊，从而产生更柔和的阴影效果。取值范围\[0, 100\]。
  
  - 扩散：扩散半径，它允许阴影在原始尺寸基础上向外扩散。正值会使阴影扩大，负值则会减小阴影的尺寸。取值范围\[-100, 100\]。
  
  - 颜色：设置阴影的颜色。
  
  
  ![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000001911661453.png)