小程序的布局公式主要基于CSS布局，使用盒子模型、Flex布局等来实现。以下是小程序布局的一些关键点：
盒子模型
margin：外边距，透明区域，用于控制元素与其他元素之间的距离。
border：边框，围绕在内边距和内容外的部分。
padding：内边距，填充属性，用于控制内容周围的区域，也是透明区域。
content：内容，盒子的实际内容，用于展示页面组件。
显示方式
display：用于设定元素是否显示或元素行内显示还是块级显示。Flex布局也需要通过设定display属性来完成。
display: none和 visibility: hidden：都可以用来指定元素是可见还是隐藏，但隐藏元素会释放占用的页面空间。
Flex布局
display: flex：指定为行内容器模式，在一行内显示子元素。
flex-wrap：用于指定子元素是否换行，有三个值：nowrap（不换行）、wrap（换行）、wrap-reverse（换行第一行在下面）。
布局属性
width：使用百分比设置宽高，使布局更加灵活。
text-align：用于设置文本的对齐方式，如右对齐。
其他布局技巧
使用 margin: 0 auto使元素在普通文档流中水平居中。
在绝对定位和浮动中，元素不属于正常文档流，因此margin: 0 auto不适用。
总结起来，小程序的布局公式可以概括为：
```css
.element {
margin: 0 auto； /* 水平居中 */
border: 1px solid ccc；
padding: 11px 4px；
width: 90%；
border-radius: 4px；
display: flex； /* Flex布局 */
flex-wrap: wrap； /* 换行 */
justify-content: center； /* 水平居中对齐 */
align-items: center； /* 垂直居中对齐 */
}
```
建议在实际开发中，根据具体需求选择合适的布局方式，并灵活运用盒子模型和Flex布局等属性来实现所需的布局效果。