捷码低代码｜FreeContainer 自由布局组件详解

背景知识：

1、布局组件：

布局组件是一种用于在用户界面中安排和组织其他组件的组件。它们提供了一种简单的方法来控制和管理页面上组件的位置、大小和层次结构。布局组件可以是容器，可以包含其他组件，并确定它们在界面上的显示方式。常见的布局组件有容器布局组件、网格布局组件、盒子布局组件、边界布局组件、流式布局组件等。

2、容器：

容器是被指定为弹性布局的父元素，它使用 display: flex 或 display: inline-flex 属性来定义。容器中的子元素会根据容器的规则进行布局。

FreeContainer组件是一个综合性的布局组件，可以使用该组件进行纵向和横向的布局操作，并且提供纵向和横向动态增加布局，更加高效的方式完成布局一致的模块。

一、如何使用

1、登陆捷码

没有账号的，点击获得免费账号：http://dev.gemcoder.com/front/development/index.html#/officialLogin?jm=cmVnaXN0ZXI9dHJ1ZQ%3D%3D

2、创建应用、页面

3、找到FreeContainer组件，拖放到页面位置

4、选择布局方式（默认为弹性布局），拖入其他组件

二、组件属性

FreeContainer 组件的属性有：

三、应用场景——对组件进行自由布局

1、对容器内组件进行纵向或横向布局

效果：

 配置：

2、 设置容器内文本组件换行

效果：

配置：

3、设置容器内部行列间距

效果：

配置：

4、行方向排列有5种排列方式控制容器内容的水平位置/控制列的对齐方式

效果：行

效果：列

配置：

  

5、改变样式背景

效果：

 设置：

 6、与其它组件协同使用

用于在同级添加列布局一致的FreeContainer组件

效果：