爱星物联开发平台的自定义面板与屏应用面板的面板操作台，是通过拖拽组件进入显示区，通过组件拼装和配置项调整组件样式，动态实现界面可视化创建与编辑。即使不懂前端技术，也可以通过拼积木的方式创建新的APP控制面板或嵌入式屏，方便快捷。
面板操作台界面如图所示：
在操作台的右侧，有一列由图标组成的操作栏，，此操作栏就是快速实现组件间的对齐、等间距排版，使界面更加规整，优化视觉体验。 首先我们先定义下其概念
单组件对齐：选中一个组件进行对齐，则此组件是相对于其父组件进行对齐。 如下图所示：
多组件对齐：选中多个组件进行对齐，则根据所选组件的位置及宽高计算出最小包含所有组件的矩形的宽高及位置，所有组件相对这个最小包含所有组件的矩形进行对齐。 如下图所示：
垂直等间距：适用于3个及以上组件的排版。按组件的y轴定位排序，上一个组件的底边与下一个组件的顶边之间的间距相等。
水平等间距：适用于3个及以上组件的排版。按组件的x轴定位排序，上一个组件的右边与下一个组件的左边之间的间距相等。 了解了其定义后，我们看下在前端开发中如何实现呢？ 在拖拽面板中，所有组件都是通过相对其父组件定位进行位置确认的，在css中采用父组件设置position:relative，子组件设置position:absolute。在爱星物联面板操作台是相对父组件左上角的位置进行定位，即确认left和top的值；
单个组件对齐的计算方式： 左对齐：left = 0 水平居中：left = 父组件的宽度/2 - 本组件的宽度/2 右对齐：left = 父组件的宽度 - 本组件的宽度 顶对齐：top = 0 垂直居中：top = 父组件的高度/2 - 本组件的高度/2 底对齐：top = 父组件的高度 - 本组件的高度
多个组件对齐的计算方式： 需要计算出 最小包含所有组件的矩形 的位置left和top，及其宽、高。如图所示，其中绿色边框的矩形即是最小包含所有组件的矩形，我们暂且称其为外围矩形，用变量retangle表示。 我们需要计算出外围矩形相对于所选组件的父组件的位置left、top、right、bottom，及其宽高。计算出这些值后，多个组件循坏一一计算其位置。 左对齐：left = retangle.left 水平居中：left = (retangle.right - retangle.left)/2 - 本组件的宽度/2 + retangle.left 右对齐：left = retangle.right - 本组件的宽度 顶对齐：top = retangle.top 垂直居中：top = (retangle.bottom - retangle.top)/2 - 本组件高度/2 + retangle.top 底对齐：top = retangle.bottom - 本组件的高度
多个组件垂直等间距的计算方式： 1）将所选多个组件按top从小到大排序。 2）计算出所选组件的高度之和totalDistant = 所选组件的高度之和 - 最后一个组件的高度。 3）计算组件的间距gap = （最后一个组件的top - 第一个组件的top - totalDistant ）/（组件个数-1）。 4）除了第一个组件，后面的组件的top都加上间距gap的距离，重新计算位置。此时就实现了多组件等间距分布。
多个组件水平等间距的计算方式： 水平等间距的计算方式与垂直等间距类似，只是top换成left，高度换成宽度，即可实现。 解题公式都给你了，你学会了吗？
欢迎各位技术大神参与爱星物联开源云项目体验，爱星物联IoT云平台致力于提供更加成熟、安全、全球化可用的物联网服务，降低投入成本，快速开发 IoT 产品，构建安全稳定且可定制化的 IoT 解决方案。
| 
