如何根据内容适配将双列居中单选按钮布局转为左对齐堆叠布局

根因说明 #

你当前的问题是给.radio.a固定设置了右对齐规则，该规则不会随布局是否换行自动切换，所以堆叠状态下右对齐依旧生效。我们只需要把右对齐逻辑和布局宽度做绑定即可解决。

解决方案1：兼容旧浏览器的媒体查询方案 #

无需修改原有HTML结构，直接替换CSS即可：

.parent {
  display: flex;
  flex-wrap: wrap;
  /* 两个单选按钮之间的间距，可自行调整 */
  gap: 16px;
}

.radio {
  /* 双列状态下默认占一半宽度，扣除一半间距 */
  flex: 0 1 calc(50% - 8px);
  /* 单选按钮的最小可显示宽度，可根据你的实际内容宽度调整 */
  min-width: 120px;
}

.radio.a {
  /* 宽度足够时右对齐 */
  text-align: right;
}

/* 断点值 = 2 * 单选按钮最小宽度 + 间距，和上面的参数对应修改即可 */
@media (max-width: 256px) {
  .radio.a {
    /* 宽度不足切换为堆叠时，改为左对齐 */
    text-align: left;
  }
}

解决方案2：无需固定断点的容器查询方案 #

如果不需要兼容IE及2021年之前的旧版浏览器，可以用容器查询实现更灵活的自适应，不用手动计算断点：

.parent {
  /* 声明父元素为容器，用于容器查询 */
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.radio {
  flex: 1 1 120px;
  text-align: left;
}

/* 当容器宽度足够容纳两个单选按钮时，才给第一个设置右对齐 */
@container (min-width: 256px) {
  .radio.a {
    text-align: right;
  }
}

两种方案都可以实现你要的效果：宽度足够时双列显示，第一个右对齐第二个左对齐；宽度不足时自动切换为左对齐的堆叠布局。

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