做小程序开发，布局是绕不过去的第一关。很多新手一上来就被页面排版搞得头大，写出来的界面不是错位就是高度塌陷。其实小程序布局并不难，核心就是掌握几个常用方案，理解清楚规则，剩下的都是熟能生巧。这篇文章就用大白话，把小程序布局的核心知识讲清楚。
小程序布局的基本单位：rpx 用起来最省心
小程序官方提供了 rpx 这个单位，可以说是为移动端量身定做的。它的规则很简单：不管什么手机，屏幕宽度一律算成 750rpx。也就是说，在 iPhone 上 1rpx 等于 0.5px，在老一点的设备上可能是 0.6px，但显示出来的比例始终一致。
实际开发中有个好用的换算方法：设计稿一般是 750px 宽，那设计师标注多少 px，你直接写成多少 rpx 就行，一个数字都不用改。比如设计稿上一个按钮宽 200px、高 88px，你直接写 width: 200rpx; height: 88rpx，省时省力。
当然，不是所有地方都非用 rpx 不可。像字体大小这种，有人喜欢用 rpx 保证整体缩放一致，也有人觉得小屏幕上字太小不友好，更愿意用 px 固定字号，这个看项目需求灵活选择就行。
Flex 弹性布局是小程序布局的主力
小程序官方文档明确推荐用 Flex 布局，原因很简单：它好懂、好用、兼容性好。小程序里的 view 组件默认就是块级排列，但只要你给父容器加上 display: flex，里面的子元素就能横向排成一排。
Flex 布局最常用的几个属性要记牢。justify-content 控制水平方向的对齐，常用的值有 flex-start 靠左、center 居中、space-between 两端对齐、space-around 均匀分布。align-items 控制垂直方向的对齐，最常用的是 center 垂直居中。flex-direction 决定主轴方向，默认是 row 横向，改成 column 就变成纵向排列。
举个最典型的例子，做导航栏的时候，左中右三块内容，只要父容器设置 display: flex; justify-content: space-between; align-items: center，三个元素自动左右分布并且垂直居中，几行代码搞定，完全不用去算间距。
子元素这边，flex: 1 是个神器。比如做一个列表页，左边图片固定 200rpx 宽，右边文字占剩余所有空间，给文字容器加个 flex: 1 就行，不用管屏幕多宽，它都会自动撑满剩下的位置。
定位布局：绝对定位和固定定位什么时候用
除了 Flex，position 定位也是绕不开的。position: absolute 是绝对定位，元素会脱离正常文档流，相对于设置了 position: relative 的父元素来摆放。常见场景是往图片右上角放个红色角标，或者往输入框里塞个小图标，都是图片或者容器设 relative，角标设 absolute，再用 top、left 精确控制位置。
position: fixed 是固定定位，元素会钉死在屏幕上，页面怎么滚动它都不动。底部 tabBar、悬浮客服按钮、回到顶部按钮，用的都是这个。要注意 fixed 的元素脱离了文档流，如果页面底部有个固定的操作栏，记得给页面内容留出等高的 padding，不然最后一段内容会被挡住。
还有一个新手常踩的坑：absolute 定位找不到参照物，元素直接跑到页面左上角去了。原因就是父元素没设 position: relative。记住一句话，子绝父相，子元素用绝对定位，父元素就设相对定位，基本不会出错。
页面整体结构：经典的上中下三段式
绝大多数小程序页面都是这个套路：顶部导航区、中间内容滚动区、底部操作栏。实现思路是让最外层容器占满全屏，高度用 100vh，然后设置 flex-direction: column 纵向排列。顶部和底部用固定高度或者固定内容高度，中间内容区给 flex: 1，再配上 overflow-y: scroll 或者直接用 scroll-view 组件，让中间部分自己滚动。
这样做的好处是结构清晰，顶部底部永远固定，中间内容随便滚动，用户体验和原生 App 一致。比直接让整个页面滚动再硬塞 fixed 元素的做法，维护起来舒服得多。
布局常见问题排查思路
最后说几个高频问题。第一个是元素不换行或者换行太多，横向排列放不下时，给父容器加 flex-wrap: wrap 就能自动换行，适合做标签墙、商品九宫格这类布局。第二个是文字超出被截断，单行省略用 overflow: hidden 加 white-space: nowrap 加 text-overflow: ellipsis 三件套，多行省略在微信小程序里可以用 -webkit-line-clamp 实现。第三个是小程序里没有 h1、p 这些标签，通通用 view 和 text，text 里的文字才能长按选中，view 里的不行，混用的时候要注意。
总结一下，小程序布局的主力是 Flex，辅助是定位，单位优先用 rpx，页面骨架用上中下三段式。把这几招练熟，日常百分之九十的页面布局都能应付自如，剩下的遇到具体问题具体查就行。