如何让flex中的孩子全宽？

Question

我已经开始使用 flex，我喜欢它的工作原理。

我正在使用 flex 布局，我希望 btn-group 内的类 dashboard-body 达到父级的全宽。现在它的宽度等于两个按钮的宽度。

我想在这里实现的是在两个按钮之间添加空间，我也不想使用左右边距。我希望 btn-group div 具有其父级的全宽 dashboard-body 所以我可以使用 flex 属性 align-content: space-between 在两个按钮之间有足够的空间。

除了在按钮周围添加边距/填充来做同样的事情之外，还有什么更好的方法吗？

谢谢。

这是代码：

 .dashboard-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

 <div class="dashboard-body">
  <p>You don't have any sales data.</p>
  <p>Please add a new book or upload CSVs.</p>

  <div class="btn-group">
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Add New Book">
    </a>
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Upload CSV">
    </a>
  </div>

原文由 vikrantnegi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是实现这一目标的正确方法：

 .dashboard-body{
  text-align:center;
  width: 300px;
  margin: 0 auto;
}
.btn-group{
  display:flex;
  flex-direction:row;
  justify-content: space-between;
}
.btn-group a{
  flex:0 0 auto;
}

 <div class="dashboard-body">
  <p>You don't have any sales data.</p>
  <p>Please add a new book or upload CSVs.</p>

  <div class="btn-group">
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Add New Book">
    </a>
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Upload CSV">
    </a>
  </div>
</div>

原文由 Tarek.hms 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以在 .btn 组中添加 align-self:stretch 。

这是一个演示： https ://jsfiddle.net/f5noh2q7/1/

原文由 Mamboleoo 发布，翻译遵循 CC BY-SA 3.0 许可协议