除了网格布局，魔笔也提供了弹性布局的搭建能力，以提供更精细、自适应性更好的视觉还原能力。
一、网格布局 VS 弹性布局
网格布局是一种高效且灵活的页面搭建方式，通过组件拖拽和与坐标定位，能够帮助用户快速构建页面结构。但在某些场景下，网格布局在能力上存在一些不足。
1、易产生空隙：对于位于高度不定的文字段落下方的组件，在文字缩短时，容易产生空隙（对于这个场景而言，下方的组件紧贴文字组件之下，不会产生空隙）。
2、部分布局无法实现：由于网格的列是基于外部容器的宽度动态计算的，所以宽度不定的文字排列或正方形容器排列将无法实现。
左侧宽度不定，右侧元素相应地往后排列。
左侧排列一个正方形 100x100，右侧元素铺满剩余空间。
二、弹性容器配置
针对上述问题，我们可以通过弹性布局来解决。
您可以将所有容器的布局模式从“网格”切换到“弹性”。以下是弹性容器的相关配置：
1、弹性容器：排列方向
您可以设置弹性容器内的子元素向下、向右、向上以及向左的排列方向。
向下排列
向右排列
2、弹性容器：左右对齐或上下对齐
对于上下排列的父容器，支持设置子组件的左右对齐方向。
左对齐
居中对齐
右对齐
对于左右排列的容器，支持设置子容器上下对齐方向。
顶部对齐
居中对齐
底部对齐
3、弹性容器：垂直对齐与水平对齐
对于上下排列的父容器，支持设置子组件的垂直对齐方式。
顶部对齐
居中对齐
底部对齐
两端对齐
间距相等
对于左右排列的父容器，支持设置子组件的水平对齐方式
左对齐
居中对齐
右对齐
两端对齐
间距相等
4、弹性容器：子元素间距
您可以设置弹性容器内的子元素的垂直间距或水平间距。
垂直间距
水平间距
三、弹性尺寸配置
对于弹性容器下的子组件，有相应的弹性尺寸配置，分别是宽度、高度、上下对齐（左右对齐）、压缩配置与自身溢出等5个配置。下面分别进行介绍：
1、宽度与高度配置
对于宽度和高度配置，选项包括“自动、固定像素、百分比、自定义 CSS”。在父容器为左右排列时，宽度支持按比例配置；在父容器为上下排列时，高度支持按比例配置。
示例：child1 宽度设置为按比例“1”，child2 和 child3 宽度设置为 30px，child1 将铺满剩余空间。
将 child2 宽度设置为按比例“2”，此时 child1 和 child2 的宽度比例为 1:2。
“自动”的宽度与高度
在设置为自动时，元素将按照自身渲染所需的最小宽高进行渲染占位。
渲染排列优先级：1 自动、2 固定像素 | 百分比 | 自定义 CSS、3 按比例
父容器首先渲染自动和固定像素的子组件尺寸，剩余空间再支持按比例渲染。
2、上下对齐或左右对齐
根据父容器的排列方向，子组件可以设置与父容器不同的对齐方向。
3、压缩配置
在子组件尺寸超出父容器尺寸时，默认将进行压缩。
示例：设置高度为 999px
在此场景中，将 child1 的高度设置为 999px，3个组件叠加的高度已经超出父容器。由于子组件在高度上是默认压缩的，故将进行压缩渲染。
如果将3个子组件都设置为“不压缩”，父容器将出现滚动条以展示内容。
4、自身溢出
在弹性容器中，当子元素的分配尺寸不足以渲染自身时，通过此属性控制其显示。下面以容器作为自身溢出的例子，也适用于任意组件。
溢出滚动
溢出显示
溢出隐藏
总结
使用弹性布局的相关能力，您可以有效创建出适应性更好的页面布局。在“移动页面”场景中，使用弹性布局也将帮助您适配更多的设备机型。