html - 对齐单选按钮时的 Flexbox 问题

我试图通过制作其父元素 display: flex; 来对齐单选按钮及其标签。
但是，当单选按钮的 label 包含多行时，单选按钮会变窄，即使其 width 已明确定义。
这是我的 html/css

label {
  display: flex;
  padding: 10px;
  margin: 10px;
  background-color: lightgrey;
  cursor: pointer;
}

input[type="radio"] {
  width: 12px;
  margin-right: 1em;
}

<div class="flex-radios">
  <label>
 <input type="radio" /> Lorem ipsum.
  </label>
  <label>
 <input type="radio" /> Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum.
  </label>
</div>

最佳答案

随着 label 的文本内容变长，它会扩展以填充更多宽度，直到文本使用 100% 的可用宽度并且必须开始断行。由于 flex-shrink 的默认值为 1，因此 <input type="radio"> 会随着文本的增长按比例减小宽度，从而导致单选按钮(或其周围明显的“边距”)显得更小。或者，如果您在屏幕截图中设置了自定义样式，请挤压。
为了避免这种情况，将 flex-shrink: 0 添加到 input 的 CSS 规则中，这样它就不会从默认大小缩小，即使它的 sibling 占据了他们共享的 flexbox 中的所有可用空间。

label {
  display: flex;
  padding: 10px;
  margin: 10px;
  background-color: lightgrey;
  cursor: pointer;
}

input[type="radio"] {
  width: 12px;
  margin-right: 1em;
  flex-shrink: 0;
}

<div class="flex-radios">
  <label>
 <input type="radio" /> Lorem ipsum.
  </label>
  <label>
 <input type="radio" /> Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum.
  </label>
</div>