浮木云学习日志（8）---布局容器&弹性容器

自从发现浮木云这个宝藏级别的原型设计平台，我简直对它爱不释手，因为他能让我在短时间内快速搭建一个原型页面，这对于产品的初学者无疑是一个福音。之前针对浮木云搭建的页面做了一些简单的记录，但是在页面设计过程中涉及的一些更加细致化的东西还需要深入去研究，接下来我将针对组件库出一个系列性的文章，帮助我来加深对浮木云的了解，同时也希望对大家对浮木云的了解有所帮助。

新进来的小伙伴如果感兴趣的话可直接进入他们的官网浮木云-产品设计开发智能助手进行了解试用，相信你也会有不一样的体验和收获。之前已经对容器的相关基础概念进行了简单的介绍，如果有不清楚的小伙伴可直接查看我这篇学习记录浮木云学习日志（2）----基础知识-CSDN博客。

本次针对组件库的弹性容器&布局容器进行简单的记录。

1、弹性容器

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

1.1样式配置

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

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

定位方式：定位方式包括绝对定位和相对定位。相对定位的参考物是容器的初始位置，绝对定位的参考物包裹容器的容器的左上顶点。如下图，我分别在两个弹性容器中放置了一个文字组件和一个弹性容器，对于这个内嵌的弹性容器的定位方式分别设置为相对定位和绝对定位。会发现两个内嵌的弹性容器的位置有所不同。从这个图例就可以看出相对定位和绝对定位的区别。确定好定位方式根据需求确定偏移量。

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

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

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

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

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

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

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

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

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

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

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

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

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

1.2属性配置

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

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

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

2、布局容器

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

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

3、区别

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

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

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

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