移动端嵌套堆叠按钮同宽实现：Flexbox配置方案（不可改HTML）

要让两层嵌套结构中的按钮在flex column布局下宽度统一，无需修改HTML，只需调整以下CSS规则：

方案一：基于Flex容器嵌套实现 #

.multi-cta-group {
  border: 1px solid gray;
  display: flex;
  align-items: stretch; /* 替换原align-items:center，让子容器撑满父容器宽度 */
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  margin: 20px;
  padding: 20px;
}

.multi-cta-container {
  border: 1px solid red;
  display: flex; /* 将中间容器转为flex容器 */
}

.multi-cta-container a {
  border: 1px solid lime;
  flex: 1; /* 按钮占满容器的全部可用宽度 */
}

方案二：通过块级元素宽度适配实现 #

.multi-cta-group {
  border: 1px solid gray;
  display: flex;
  align-items: stretch; /* 核心修改，让子容器宽度统一 */
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  margin: 20px;
  padding: 20px;
}

.multi-cta-container {
  border: 1px solid red;
}

.multi-cta-container a {
  border: 1px solid lime;
  display: block; /* 将a标签转为块级元素 */
  width: 100%; /* 占满父容器宽度 */
}

关键原理说明 #

1. align-items: stretch：原代码中align-items: center会让每个.multi-cta-container仅适配内部按钮的内容宽度，改为stretch后，所有子容器会自动继承父容器的水平宽度，确保所有中间容器宽度一致。
2. 按钮宽度适配：无论是通过flex属性拉伸，还是设置块级元素的width:100%，最终都是让按钮填满宽度统一的中间容器，从而实现所有按钮宽度一致。

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