单选按钮组应据上下文选flex或inline-flex：整组独立成行用display: flex并设flex-wrap: wrap；嵌入段落等行内场景用display: inline-flex以保持流式布局。
单选按钮组用 flex 还是 inline-flex？
单选按钮组（<input type="radio"> + <label>）要自适应屏幕宽度，必须用 display: flex 或 display: inline-flex，不能只靠 float 或纯 inline-block。
原因很简单：单选按钮本身是内联元素，但默认不换行、不自动均分空间，也不响应容器宽度变化；而 flex 容器能统一控制对齐、换行和收缩逻辑。
- 用
display: flex：适合整组作为块级区域（比如表单中独立一行），可设flex-wrap: wrap让选项自动折行 - 用
display: inline-flex：适合嵌入段落或标题中（比如“请选择状态：<radio-group>”），保持行内流特性 - 别用
display: grid做基础单选组——列数不确定时，grid-template-columns难维护，且旧版 Safari 对repeat(auto-fit, ...)支持不稳定
flex-wrap: wrap 是自适应排版的核心开关
不加 flex-wrap: wrap，所有单选项会强行挤在一行，小屏直接溢出或横向滚动——这是最常被忽略的点。
.radio-group {
display: flex;
flex-wrap: wrap; /* 关键！否则不换行 */
gap: 12px; /* 推荐用 gap，比 margin 干净 */
}-
gap在现代浏览器中已全面支持（Chrome 84+、Firefox 63+、Safari 14.1+），无需 fallback - 若需兼容 Safari ≤14，改用
margin-right+:last-child { margin-right: 0 } - 不要给每个
label设固定width，否则破坏“根据内容和剩余空间动态分配”的逻辑 - 小屏下，
flex-basis默认为auto，即按文字长度伸缩；大屏下可用flex: 1强制均分（慎用，文字长短差异大会导致挤压）
单选按钮文本过长时怎么截断不换行？
动态生成的选项（如 API 返回的文件名、分类名）可能超长，直接 flex-wrap 会导致文字在标签内换行，视觉割裂。
必须组合三者才能安全省略：
-
white-space: nowrap（防止内部换行） -
overflow: hidden（隐藏溢出部分） -
text-overflow: ellipsis（显示省略号）
.radio-group label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px; /* 必须设 max-width，否则 ellipsis 不生效 */
display: inline-flex;
align-items: center;
}- 父容器（
.radio-group）不能有overflow: hidden，否则会裁掉整个按钮或 label 边缘 - 不要用
width: 100%替代max-width，否则小屏下文字没空间就直接消失
移动端点击区域太小，怎么安全放大又不破坏布局？
原生 <input type="radio"> 点击热区极小，尤其在手机上容易误触。但直接放大 input 本身会破坏对齐，且无法用 CSS 设置宽高。
立即学习“前端免费学习笔记（深入）”；
正确做法是：
- 把
input视为“不可见控制器”，样式全交给label - 给
label设足够大的padding（如padding: 10px 16px），并确保for或嵌套关系正确 - 用
cursor: pointer明确提示可点击 - 避免用
transform: scale(1.2)拉伸input，它会改变基线位置，导致与文字错位
.radio-group input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.radio-group label {
padding: 10px 16px;
cursor: pointer;
border-radius: 4px;
}
.radio-group label:hover {
background-color: #f5f5f5;
}真正麻烦的是 label 和 input 的语义绑定——如果用了 JS 动态插入选项，务必确保每个 input 的 id 和对应 label 的 for 值严格一致，否则点击无效。这个细节在响应式切换时最容易被忽略。
