当按钮在移动设备上堆叠时以及按钮在父级下嵌套两层时，使所有按钮具有相同的宽度

Question

使用Flexbox，如何配置按钮，以便在移动端应用flex-direction:column时它们的宽度相同？它通常很简单，但是，按钮位于父级下方两级，并且我无法更改 HTML 标记。下面是一个包含 HTML 和 CSS 的演示：

.multi-cta-group {
  border: 1px solid gray;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  margin: 20px;
  padding: 20px;
}

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

.multi-cta-container a {
  border: 1px solid lime;
  flex: 1;
}

<div class="multi-cta-group">
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">CTA label for video</a>
  </div>
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">Shop
    </a>
  </div>
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">Learn more
    </a>
  </div>
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">Subscribe now
    </a>
  </div>
</div>

Answer 1

很难确切地知道你想要什么，因为你提到这是针对“移动”的，我不确定你是否试图使其具有反应性。但根据你的例子，有几点：

1. 在

   flex: 1

   上设置

   .multi-cta-container a

   不会执行任何操作，因为这些元素不是容器的直接子元素。
2. 在

   width: 100%

   div 上设置

   multi-cta-container

   来强制它们达到容器的宽度是完全可以的。
3. 里面的元素不需要担心弹性布局。他们可以使用

   display: block

填充自己容器的宽度
4. 最后您可能想要将文本标签居中（？）

这是包含这些更改的片段。如果这不是您想要的，请评论，我会修改或删除。

.multi-cta-group {
  border: 1px solid gray;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  margin: 20px;
  padding: 20px;
}

.multi-cta-container {
  border: 1px solid red;
  flex: 1;
  width: 100%;
}

.multi-cta-container a {
  border: 1px solid lime;
  display: block;
  text-align: center;
}

<div class="multi-cta-group">
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">CTA label for video</a>
  </div>
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">Shop
    </a>
  </div>
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">Learn more
    </a>
  </div>
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">Subscribe now
    </a>
  </div>
</div>