移动端三级联动选择器设计优化方案

本文深入剖析了移动端三级联动选择器（如省-市-区）中三列无法严格等宽的常见痛点，指出问题根源并非flex-grow本身失效，而是开发者忽略了flex-basis: auto导致内容宽度干扰初始布局；通过采用flex: 1 1 0配合box-sizing: border-box、min-width: 0及统一字体/内边距等关键策略，可真正实现视觉与计算双重等宽，并针对性地给出iOS Safari兼容方案、文字截断处理和主轴方向校验等实战细节，为前端工程师提供一套稳定、跨端、开箱即用的布局解决方案。

flex-grow 无法直接“平分宽度”——它分配的是剩余空间，不是容器总宽。 很多开发者在移动端三级联动选择器（比如省-市-区）上用 flex-grow: 1 期望三个下拉框严格等宽，结果发现宽度不均、文字溢出或错位。根本原因不是写法错，而是没控制初始尺寸基准。

为什么 flex-grow: 1 在三级联动里常失效

移动端选择器通常由三个 或自定义

组成，父容器设为 display: flex 后，常见错误是只加：

.picker-row { display: flex; }
.picker-item { flex-grow: 1; }

这会导致：

• 每个

的默认 flex-basis 是 auto，浏览器按内容（如“北京市”比“津”宽得多）计算初始宽度，再分配剩余空间 —— 初始宽度差异大，flex-grow 拉伸后仍不等宽

.picker-row {
  display: flex;
}
.picker-item {
  flex: 1 1 0; /* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
  box-sizing: border-box;
  min-width: 0;
}