之前我利用浮木云搭建了一些简单的页面，并形成一些简单的记录，表明这个原型设计平台能够快速做好一个页面，但是在页面设计过程中涉及的一些更加细致化的东西还需要深入去研究。接下来，我会从浮木云的基础的部分--容器进行研究了解，本次针对弹性容器&布局容器进行简单的记录。

1. 弹性容器

浮木云中的弹性容器采用弹性布局,弹性布局使父容器能够调节子组件的宽度/高度和排列顺序，从而能够更好地填充可用空间。

1.1. 样式配置

（1）布局样式：弹性容器的布局样式包括宽度、高度、定位方式、是否自动换行、横向对齐、纵向对齐、水平溢出、垂直溢出、内外边距。

宽度、高度：弹性容器的宽度、高度的表示单位有三种方式：百分比、px和自适应，百分比就是容器的宽度或者高度占据页面的比例，自适应是容器本身适应容器内的内容填充，随着内容的增多容器也会在高度和宽度上发生相应的变化。

定位方式：定位方式有两种，每种定位方式都有特定的作用与优势，其中相对定位的参考物是容器的初始位置，第二种定位方式的参考物是包裹容器的容器的左上顶点。如下图，我分别在两个弹性容器中放置了一个文字组件和一个弹性容器，对于这个内嵌的弹性容器分别设置不同的定位方式，如下图所示，会发现两个内嵌的弹性容器的位置有所不同。

自动换行：自动换行控制弹性容器的内容是放置在一行还是多行。

横向对齐：是容器中的组件内容横向方向的对齐方式，包括左对齐、右对齐、居中对齐、两端对齐、等距对齐、等外边距对齐。

纵向对齐：是容器中的组件内容纵向方向的对齐方式，包括靠上对齐、靠下对齐、居中对齐、底线对齐。

水平溢出：容器的组件内容宽度超过了容器的宽度，水平溢出设置“隐藏”，内容超出的部分将不会被看到，设置为“滚动”，页面横向会发生滚动。

垂直溢出：同水平溢出，容器的组件内容高度超出了容器的高度，设置“隐藏”，超出的内容会被隐藏，设置为“滚动”，页面纵向会发生滚动。

内外边距：外间距是设置容器外侧跟父级容器的间距，内间距是设置容器内侧的组件内容之间的间距。

（2）背景样式：弹性容器的背景样式包括背景阴影，背景图片，背景颜色，显示边框，显示颜色，盒子边框

背景阴影：背景阴影其实就是给容器设置阴影，让整个内容布局更有立体感，包括基础投影和浅色投影。

背景图片：通过上传合适的图片设置对应的图片背景。

显示边框：默认情况下是不显示边框的，可以根据实际需求让容器的边框是否显示在页面上。下图是弹性容器显示边框的例子。

边框样式：当显示边框时，对容器的边框设置符合需求的样式，可以是实线、点状、双线、虚线。

边框颜色：显而易见，就是对容器的边框设置合适的颜色。

盒子边框：内层的数值是设置容器边框线的粗细，四角的数值是设置容器的圆角，可根据自己的实际需求调整相应的数值。

1.2. 属性配置

属性配置包括组件名称和是否隐藏。

组件名称：给弹性容器命名，这里要强调一下，由于我们的页面会包含多个容器，因此务必一定要给容器命名，便于后续快速定位相应的容器进行相应的样式修改或属性修改，同时在交互编排时也便于查找。

是否隐藏：根据需要决定容器是隐藏还是显示，若隐藏，容器内的内容全部被隐藏。

2. 布局容器

「浮木云」中的「布局容器」采用「块级布局」，无论子组件尺寸如何，它都会独占一行的空间；一般来说，当需要内部子组件纵向排列时使用「布局容器」。

布局容器的样式配置和弹性的容器的样式配置和属性配置几乎无差别，只是弹性容器的样式配置多了一个是否自动换行，所以这里对弹性容器的样式配置不过多介绍。

3. 区别

在原型设计过程中是选择弹性容器还是布局容器呢？我做了一个示例图，大家就可以看出他们区别。

上图我放置了两个容器，一个是布局容器，一个是弹性容器，在不同容器中分别放置了文字、面包屑和头像三个基础组件，在布局容器中组件呈纵向分布，弹性容器中组件呈横向分布。在弹性容器的【样式配置】中将“自动换行”改成是，弹性容器中的组件呈现形式跟布局容器的组件形式是一样的。

看到这里大家是不是觉得布局容器有些多余，其实不然，布局容器可以强制每个组件纵向排列，而弹性容器即使你设置了自动换行，如果放置的组件宽度没有达到容器的实际宽度，组件内容是无法满足自动换行的。如下图：

我将容器设置为自动换行，但是两个文字组件依然在同一行，所以，大家在制作页面时一定要根据自己的实际需求选择合适的容器，从而确保页面简洁美观。只有框架定义好了，后续才不会出现大错误。