Question

我开始使用flex，我很喜欢它的工作方式。

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

我想在这里实现的是，我想在两个按钮之间添加空格，而我不想左右使用边距。我希望btn-group div达到其父dashboard-body的全宽，这样我就可以使用flex属性align-content: space-between在两个按钮之间留出足够的空间。

除了在按钮周围添加边距/填充之外，还有什么方法可以做同样的事情。

感谢。

以下是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

<a href="#" data-toggle="popover" title="Username:"  data-content='<input id="Uname" data-toggle="popover" data-trigger="focus" data-content="You are Successfull!!!!" type="text"/><input id="btnEdit" type="button" value="Edit" />'></a>

＆＃13;

.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;
}

＆＃13;

Answer 2

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

如何使柔韧的孩子全宽？

2 个答案: