如何使Flex布局中的子元素充满整个宽度？

Question

我已经开始使用flex，并且喜欢它的工作方式。

我正在使用flex布局，我希望在dashboard-body中使用btn-group类时，它可以完全覆盖父元素的宽度。现在，它的宽度等于两个按钮的宽度之和。

我想要实现的是在两个按钮之间添加空间，但我不想使用右侧或左侧的margin。我希望btn-group div可以拥有其父元素dashboard-body的全部宽度，这样我就可以使用flex属性align-content: space-between来在两个按钮之间留出足够的空间。

除了在按钮周围添加margin/padding以外，还有没有更好的方法来实现相同的效果？

谢谢。

以下是代码：

.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

---

.btn-group { align-self:stretch; }。https://jsfiddle.net/bLaoh9td/ - pawel

align-content: space-between 在这种情况下不起作用。有什么解决方法吗？ - vikrantnegi

你需要将 .btn-group 也变成一个 flex 容器：https://jsfiddle.net/bLaoh9td/1/ （顺便说一下，应该是 justify-content）。 - pawel

@vikrantnegi007，你的示例在通过调整 CSS 使 "wide item" 成为 flexbox 的 first 或 last 元素时效果很好。然而，当我想让 "middle" item 占满 flexbox 的全部宽度时，似乎无法奏效。有没有办法解决这个问题呢？还是说这就是 flexbox 的工作方式？ - Dimitry K

@DimitryK，你能为你的情况创建一个jsfiddle吗？我可以通过查看代码来帮助你。 - vikrantnegi

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

---

我必须添加宽度100。 - bresleveloper

Answer 2

您可以在 .btn-group 上添加 align-self:stretch 样式。
这里有一个演示：https://jsfiddle.net/f5noh2q7/1/

- Mamboleoo

---

非常感谢，我都快抓狂了！这个代码只用了一行就立刻实现了我想要的功能。 - OwlOCR

这很有用，可以做相反的事情 :) 我需要不让子元素占满整个宽度，所以我将其设置为“start”。 - MCH

Answer 3

只需添加此CSS规则：

flex: auto;

- job.js.org

Answer 4

你可以使用CSS网格，只将样式应用于父元素。

在这里阅读更多 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layou

示例：

.btn-group{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

<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>

- Tiago