关于前端:浮木云随笔小记7布局容器弹性容器

自从发现浮木云这个宝藏级别的原型设计平台，我几乎对它爱不释手，因为他能让我在短时间内疾速搭建一个原型页面，这对于产品的初学者无疑是一个福音。之前针对浮木云搭建的页面做了一些简略的记录，然而在页面设计过程中波及的一些更加粗疏化的货色还须要深刻去钻研，接下来我将针对组件库出一个系列性的文章，帮忙我来加深对浮木云的理解，同时也心愿对大家对浮木云的理解有所帮忙。本次针对组件库的弹性容器 & 布局容器进行简略的记录。1、弹性容器「浮木云」中的「弹性容器」采纳「弹性布局」,「弹性布局」使父容器可能调节子组件的宽度 / 高度和排列程序，从而可能更好地填充可用空间。1.1 款式配置（1）布局款式：弹性容器的布局款式包含宽度、高度、定位形式、是否主动换行、横向对齐、纵向对齐、程度溢出、垂直溢出、内外边距。宽度 & 高度：弹性容器的默认宽、高度别离是百分之百和 200px，他这里的示意单位有三种形式：百分比、px 和自适应，百分比就是容器的宽度或者高度占据页面的比例，自适应是容器自身适应容器内的内容填充，随着内容的增多容器也会在高度和宽度上产生相应的变动。定位形式：定位形式包含绝·对定位和绝对定位。绝对定位的参考物是容器的初始地位，绝·对定位的参考物包裹容器的容器的左上顶点。如下图，我别离在两个弹性容器中搁置了一个文字组件和一个弹性容器，对于这个内嵌的弹性容器的定位形式别离设置为绝对定位和绝·对定位。会发现两个内嵌的弹性容器的地位有所不同。从这个图例就能够看出绝对定位和绝·对定位的区别。确定好定位形式依据需要确定偏移量。

主动换行：主动换行管制弹性容器的内容是搁置在一行还是多行。横向对齐：是容器中的组件内容横向方向的对齐形式，包含左对齐、右对齐、居中对齐、两端对齐、等距对齐、等外边距对齐。纵向对齐：是容器中的组件内容纵向方向的对齐形式，包含靠上对齐、靠下对齐、居中对齐、底线对齐。程度溢出：容器的组件内容宽度超过了容器的宽度，程度溢出设置“暗藏”，内容超出的局部将不会被看到，设置为“滚动”，页面横向会产生滚动。垂直溢出：同程度溢出，容器的组件内容高度超出了容器的高度，设置“暗藏”，超出的内容会被暗藏，设置为“滚动”，页面纵向会产生滚动。内外边距：外间距是设置容器外侧跟父级容器的间距，内间距是设置容器内侧的组件内容之间的间距。（2）背景款式：弹性容器的背景款式包含背景暗影，背景图片，背景色彩，显示边框，显示色彩，盒子边框背景暗影：背景暗影其实就是给容器设置暗影，让整个内容布局更有立体感，包含根底投影和浅色投影。背景图片：通过上传适合的图片设置对应的图片背景。显示边框：默认状况下是不显示边框的，能够依据理论需要让容器的边框是否显示在页面上。下图是弹性容器显示边框的例子。

边框款式：当显示边框时，对容器的边框设置合乎需要的款式，能够是实线、点状、双线、虚线。边框色彩：不言而喻，就是对容器的边框设置适合的色彩。盒子边框：内层的数值是设置容器边框线的粗细，四角的数值是设置容器的圆角，可依据本人的理论需要调整相应的数值。1.2 属性配置属性配置包含组件名称和是否暗藏。组件名称：给弹性容器命名，这里要强调一下，因为咱们的页面会蕴含多个容器，因而务必肯定要给容器命名，便于后续疾速定位相应的容器进行相应的款式批改或属性批改，同时在交互编排时也便于查找。是否暗藏：依据须要决定容器是暗藏还是显示，若暗藏，容器内的内容全副被暗藏。2、布局容器「浮木云」中的「布局容器」采纳「块级布局」，无论子组件尺寸如何，它都会独占一行的空间；一般来说，当须要外部子组件纵向排列时应用「布局容器」。布局容器的款式配置和弹性的容器的款式配置和属性配置简直无差别，只是弹性容器的款式配置多了一个是否主动换行，所以这里对弹性容器的款式配置不过多介绍。3、区别在原型设计过程中是抉择弹性容器还是布局容器呢？我做了一个示例图，大家就能够看出他们区别。

上图我搁置了两个容器，一个是布局容器，一个是弹性容器，在不同容器中别离搁置了文字、面包屑和头像三个根底组件，在布局容器中组件呈纵向散布，弹性容器中组件呈横向散布。在弹性容器的【款式配置】中将“主动换行”改成是，弹性容器中的组件出现模式跟布局容器的组件模式是一样的。看到这里大家是不是感觉布局容器有些多余，其实不然，布局容器能够强制每个组件纵向排列，而弹性容器即便你设置了主动换行，如果搁置的组件宽度没有达到容器的理论宽度，组件内容是无奈满足主动换行的。如下图：

我将容器设置为主动换行，然而两个文字组件仍然在同一行，所以，大家在制作页面时肯定要依据本人的理论需要抉择适合的容器，从而确保页面简洁好看。只有框架定义好了，后续才不会呈现大谬误。