单选按钮组用flex布局不换行是因为flex默认flex-wrap: nowrap，需显式设置flex-wrap: wrap才允许折行；同时要确保label正确包裹input或for/id配对以保障可访问性。
单选按钮组用 display: flex 布局时，为什么选项不换行？
默认情况下，flex-direction: row（Flex 默认方向）会让所有 <input type="radio"> 和紧邻的 <label></label> 挤在一行，超出容器也不折行。这不是 bug，是 Flex 的正常行为——它只在显式设置 flex-wrap: wrap 时才允许换行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给包裹单选按钮组的容器（如
<div> 或 <code><fieldset></fieldset>）加上display: flex和flex-wrap: wrap - 每个选项应为独立的
<label></label>（内含<input type="radio">），避免用多个<label></label>包同一个input，否则语义错误且影响可访问性 - 为防止小屏幕下选项过窄导致文字截断，给
label设置flex: 1 1 auto或最小宽度（如min-width: 120px） - 默认设为
flex-direction: column（移动端优先） - 在
@media (min-width: 768px)及以上，改用flex-direction: row - 注意：若同时用了
flex-wrap: wrap，column下wrap无效（列方向无法“换列”），所以移动端不用写flex-wrap - 可加
gap: 0.5rem统一间距，比用margin更可靠 - 要么用嵌套方式：
<label><input type="radio" name="x">选项A</label> - 要么用属性关联：
<input id="opt-a" type="radio" name="x"><label for="opt-a">选项A</label> - 确保
name相同才能构成互斥组；id和for值严格一致（区分大小写、不可含空格） - 不要为了“样式方便”把
input移到容器外或用display: none隐藏——要用opacity: 0+position: absolute配合z-index覆盖，否则可访问性失效 - 加前缀：
flex-wrap: wrap后补-ms-flex-wrap: wrap - 避免在 IE11 中依赖
flex: 1—— 改用-ms-flex: 1，并为每个label设固定width或max-width - 更稳妥的做法：用
@supports not (display: flex)提供inline-block回退（需清除换行符空白） - 如果项目已放弃 IE，直接忽略前缀——现代浏览器中
flex-wrap表现稳定
如何让移动端竖排、桌面端横排？用媒体查询控制 flex-direction
响应式核心不是“自动适配”，而是主动切换布局方向。横排（row）适合宽屏看选项对比，竖排（column）更适合触控操作和小屏阅读顺序。
实操建议：
立即学习“前端免费学习笔记（深入）”；
label 不包裹 input 时，点击无反应？必须用 for 和 id 配对
Flex 布局本身不影响表单交互，但常见错误是把 input 和 label 拆开写，又没建立关联。此时点击文字不会触发选中，用户体验直接降级。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
实操建议：
立即学习“前端免费学习笔记（深入）”；
IE11 兼容时 flex-wrap 不生效？需要补全旧版前缀和回退方案
IE11 支持 display: -ms-flexbox，但对 flex-wrap 的支持不完整，尤其和 min-width 混用时容易塌陷。真要兼容，不能只靠 Autoprefixer。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Flex 实现响应式单选按钮组的关键，不在“怎么排”，而在“谁控制换行”和“谁保证可点击”。很多人卡在点击无效或小屏堆成一团，其实问题往往出在标签结构或媒体查询漏写了 flex-wrap 切换，而不是 Flex 本身难用。
