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

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

这会导致：

• 每个 <select> 的默认 flex-basis 是 auto，浏览器按内容（如“北京市”比“津”宽得多）计算初始宽度，再分配剩余空间 —— 初始宽度差异大，flex-grow 拉伸后仍不等宽
• 移动端 <select> 渲染受系统控件影响，iOS Safari 对 flex 支持有边界行为，尤其在表单内嵌场景
• 未重置 box-sizing，padding/border 叠加导致实际占用超预期

真正让三列严格等宽的写法

关键不是只靠 flex-grow，而是**切断内容对初始尺寸的影响**：

• 把所有子项的 flex-basis 设为 0，强制清空原始宽度，让 flex-grow 从零开始按比例分空间
• 配合 flex-shrink: 1 防止内容撑爆容器（尤其长地名）
• 统一 box-sizing: border-box 和 min-width: 0（防文本溢出破坏 flex 行为）

推荐写法：

.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;
}

注意：flex: 1 是简写，但它的默认 flex-basis 是 auto，不是 0 —— 这正是坑点。

适配 iOS Safari 的兼容处理

iOS 15+ 虽已支持标准 flex，但 <select> 在 flex 容器中仍可能被渲染引擎“保护”而忽略 flex-basis: 0。稳妥方案：

• 不用原生 <select>，改用语义化
  + 自定义弹层，完全可控
• 若必须用原生 <select>，加一层包裹 并对其设 flex，把 <select> 设为 width: 100%
• 加前缀保底（虽现代已非必需，但老版 WKWebView 仍有残留）：-webkit-flex: 1 1 0;

字体大小和 padding 对视觉等宽的影响

即使 flex 计算出的宽度一致，中文字符宽度不均（如“一” vs “龘”）、不同字号、padding 差异都会造成视觉错觉。建议：

• 三列使用相同 font-size、line-height 和 padding
• 给 .picker-item 加 text-overflow: ellipsis; white-space: nowrap; overflow: hidden; 防文字撑开
• 用 max-width 限制单列上限（例如 max-width: 33.333%），避免极端长名破坏布局

最易被忽略的一点：flex 分配的是主轴方向空间，而三级联动通常是水平排列（flex-direction: row），但如果误设为 column，flex-grow 就会去拉高而非拉宽 —— 动手前先确认主轴方向。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《移动端三级联动选择器设计优化方案》文章吧，也可关注golang学习网公众号了解相关技术文章。