如何用Flexbox实现首个元素换行至其他元素上方？单选按钮样式调试

你的基础样式已经搭得很好了，我帮你补全未选中状态的hover逻辑，同时优化一些视觉细节和无障碍体验，让交互更流畅：

/* 隐藏原生单选框，保留其表单功能 */
input[type=radio] { 
  position: absolute; 
  visibility: hidden; 
  display: none; 
}

/* 基础label样式，做了一些细节优化 */
label { 
  flex: 1 0 auto; 
  background-color: white; 
  text-align: center; 
  color: dimgray; 
  cursor: pointer; 
  font-weight: bold; 
  user-select: none; 
  padding: 8px 5px; /* 扩大点击区域，提升易用性 */
  width: 60px; 
  transition: background 0.2s, color 0.2s, border-color 0.2s; /* 统一过渡动画 */
  border: 2px solid transparent; /* 透明边框避免hover时布局跳动 */
  border-radius: 4px; /* 圆角让样式更柔和 */
}

/* 未选中状态的hover效果，提供清晰反馈 */
input[type=radio] + label:hover {
  background-color: #f5f5f5;
  color: #333;
  border-color: #ddd;
}

/* 选中状态样式，强化视觉区分 */
input[type=radio]:checked + label {
  color: white; 
  background: dimgrey; 
  border-color: dimgrey;
}

/* 选中状态下的hover，保持选中感同时提供反馈 */
input[type=radio]:checked + label:hover {
  background: #444; /* 稍微加深颜色，避免hover时样式跳变 */
  border-color: #444;
}

/* 可选：聚焦状态优化（无障碍必备） */
input[type=radio]:focus + label {
  outline: 2px solid #2196F3;
  outline-offset: 2px;
}

优化细节说明： #

• 新增了透明边框，解决hover时元素尺寸变化导致的布局跳动问题；
• 补全了未选中状态的hover样式，让用户能清晰感知可交互；
• 选中状态的hover做了细微的颜色加深，既保留选中状态，又有交互反馈；
• 增加了聚焦状态样式，支持键盘导航的用户能明确看到当前选中项，提升无障碍体验；
• 微调了内边距，扩大了点击热区，让操作更顺手。

内容的提问来源于stack exchange，提问作者mTv