rpx 和 Flex 布局虽然都为了“适配”，但解决的是不同维度的问题，它们更像是尺子和 glue 的关系。
- rpx 是尺子：它负责让一个按钮在大屏手机上比在小屏手机上更大一些。
- Flex 是 Glue：它负责让一排按钮在不同宽度的屏幕上，能自动伸缩、换行或对齐，始终保持美观。
简单说，rpx 定义“元素有多大”，而 Flex 定义“元素怎么排列”。一个按钮可以用 100rpx 定义其宽度（rpx 的工作），同时用 Flex 来决定它在一行中是居中、靠左，还是和旁边的元素如何分布（Flex 的工作）。
一、rpx 与 Flex 布局的核心差异
| 特性 | rpx | Flex 布局 | 协作场景 |
|---|---|---|---|
| 作用维度 | 单维度缩放（宽度/高度） | 多维度空间分配（排列/对齐/伸缩） | 同时控制尺寸和排列 |
| 适配逻辑 | 固定比例缩放（如 750rpx = 屏幕宽） | 动态空间分配（剩余空间/比例伸缩） | 响应式容器内元素自动排列 |
| 依赖关系 | 依赖设计稿基准（如 750px） | 依赖父容器空间和子元素配置 | 父容器用 rpx 定宽，子元素用 Flex 排列 |
| 局限性 | 无法解决元素排列顺序、对齐问题 | 无法独立实现元素尺寸的屏幕适配 | 需结合使用 |
二、为什么需要同时使用两者？
1. rpx 的局限性
- 仅解决尺寸问题：rpx 可以让一个按钮在不同屏幕下保持相对宽度（如
200rpx在 iPhone 6 是 200px，在 iPhone 12 Pro Max 是 414px），但无法控制按钮在容器中的位置（居中/靠右）或多个按钮的排列方向（横向/纵向）。 - 无法处理动态空间：当屏幕宽度变化时，rpx 无法自动调整元素间的间距或换行。例如，一行商品卡片在窄屏需纵向排列，在宽屏需横向排列。
2. Flex 的核心价值
- 动态空间分配：通过
flex: 1可让元素自动填充剩余空间（如搜索框占满导航栏剩余宽度）。 - 排列控制：轻松实现元素居中、等间距分布、换行等复杂布局（如活动菜单的图标自动均分一行）。
- 响应式排列：结合
flex-wrap: wrap可实现商品列表的自适应换行，无需媒体查询。
三、实际协作案例（以电商主页为例）
1. 导航栏布局
<view class="navbar">
<text class="title">首页</text>
<view class="search-box" style="flex: 1;"></view> <!-- Flex 占据剩余空间 -->
</view>
- rpx 作用：标题宽度固定为
100rpx。 - Flex 作用：搜索框自动填充标题右侧剩余空间。
2. 商品列表响应式
<view class="goods-grid" style="display: flex; flex-wrap: wrap;">
<view class="goods-item" style="width: 375rpx;" v-for="i in 6"></view>
</view>
- rpx 作用：每个商品项宽度固定为屏幕一半（
375rpx）。 - Flex 作用：自动换行，确保在任意屏幕宽度下商品项均匀排列。
四、错误用法警示
- 仅用 rpx 导致布局断裂
若商品列表仅用 rpx 定宽而不用 Flex：- 窄屏下商品项溢出屏幕。
- 宽屏下商品项无法自动横向扩展。
- 仅用 Flex 导致尺寸失真
若轮播图仅用 Flex 而不用 rpx：- 图片高度无法随屏幕宽度等比缩放，可能变形。
五、总结
rpx 和 Flex 是互补关系：
- rpx 负责“尺寸弹性”：确保元素在不同屏幕下保持合理大小。
- Flex 负责“空间弹性”：确保元素在容器内智能排列和对齐。
二者结合才能实现真正健壮的跨设备布局，缺一不可。