1.基本功能 1.基本功能
弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
2.配置方法 2.配置方法
2.1.配置说明 2.1.配置步骤
flex标签。标签介绍
- full-height: 设置布局⾼度到与⽗层容器⼀致（100%）。
- flex-container: 设置 flex 布局⽗容器。
- flex-item: 必须设置在 flex-container 的直接⼦元素上，配置了此样式的布局具有弹性效果，会把
⽗容器的剩余部分⾼度分配到此元素上。 - 表格要配置弹性布局，需要在表格所在容器上配置 flex-container-grid，注意如果改变浏览器窗⼝
尺⼨，表格控件不会⾃动重设表格⾼度，需要额外处理。 - tab 要配置弹性布局，需要在tab所在容器上配置 flex-container-tab，注意如果改变浏览器窗⼝尺
⼨，TAB控件不会⾃动重设表格⾼度，需要额外处理。 - ⼀个 flex-container 下可以有多个 flex-item, 默认平均分配⽗容器的剩余⾼度，如需要按⽐例分
配，可配置为 flex-item-{比例}，⽐例的取值范围为 1-10。如 flex-container 下配有⼀个 flexitem-1 和⼀个 flex-item-2，那么这两个元素会按 1:2 的⽐例分配⽗容器的剩余⾼度。 - ⽀持嵌套配置。
- 增加 flex-container-horizontal 样式，作为横向布局的容器，其子元素的高度会适应到该容器高度。（举例：左侧查询条件，右侧表格的页面，在 moduleLeft/moduleRight 的父容器上配置 flex-container-horizontal）。
- 增加一个树控件的 flex 布局样式： flex-container-tree。
配置
- 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。
- 如果是弹性布局配置在tab上时，必须配置懒加载。懒加载配置可参考懒加载配置。
- 可视化中配置group且分组类型为group-box后，默认平台生成的group-box以div结构展示；如果group-box分组类型需生成fieldset结构，可以在项目管理–项目初始化–视图级配置下，新增一笔数据：配置项类型处选择group-box分组类型为fieldset结构，配置内容输入值Y。
2.2.常用例子 2.2.常用例子
2.2.1.上下结构查询界面 2.2.1.上下结构查询界面
上下结构布局，上面时候查询按钮，下面的是表格。表格需要进行自适应配置界面。
1. 最外层 div(module) 上配置 full-height。
2. module 下⼀层 div(container-fluid) 上配置 full-height 和 flex-container。
3. container-fluid 下有两个 row，表格所在的 row 配置 flex-item和flex-container。
4. 这个 row 下⾯是表格所在的 div，在这个 div 上配置 flex-item 和 flex-container-grid
2.2.2.TAB布局 2.2.2.TAB布局
上下结构布局，上面是主对象表单维护界面，中集是表格按钮。下面是tab页签。其中第二个tab明细中的表格需要进行自适应配置。此处举例TestLixq202对象配置。
1. 最外层 div(module) 上配置 full-height。
2. module 下⼀层 div(container-fluid) 上配置 full-height 和 flex-container。
3. tabs中配置flex-item，flex-container-tab标签。
4. 在切换到第二个tab页签，在tab配置个DIV，在div中配置full-height、flex-container标签。
5. 在表格所在行配置flex-item标签
6. 在表格上配置flex-container-grid、full-height标签。
7. 本例子中设计到tab，tab必须配置为懒加载形式。所以此处选择tabs时，在右侧需要勾选【是否主页签】，选择tab时，【页签生成方式】选择【DIV延时加载】。
8. 
2.2.3.左右结构查询界面2.2.3.左右结构查询界面
查询条件为左右结构的，表格上配置自适应场景。此处举例TestLixq101业务对象配置。
1. 最外层 div(module) 上配置 full-height。
2. module 下⼀层 div(container-fluid) 上配置 full-height 和 flex-container。
3. 在划分左右结构上的row中配置flex-item、flex-container-horizontal标签。
4. 在右侧的ModeleRight中配置标签flex-container标签。
5. 在表格所在行配置flex-item、flex-container标签
6. 在表格上配置flex-container-grid、flex-item标签。
