我已经开始使用flex，我喜欢它的工作方式。
我使用的是flex布局，我希望dashboard-body中的btn-group类与父级全宽。现在它的宽度等于两个按钮的宽度。
我想在这里实现的是增加两个按钮之间的空间，我也不想使用右或左边距。我希望btn-groupdiv具有其父dashboard-body的全宽，以便可以使用flex属性align-content:space-between在两个按钮之间具有足够的空间。
除了在按钮周围添加边距/填充之外，还有什么更好的方法来做同样的事情吗？
多谢了。
代码如下：
null
.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>null
这是实现这一目标的正确方法：
null
.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>
您可以在.btn-group上添加align-self:strett。
下面是一个演示:https://jsfidle.net/f5noh2q7/1/
