我开始使用flex,我很喜欢它的工作方式.
我正在使用flex布局,我希望仪表板主体内的btn-group类能够达到父级的全宽.现在它的宽度等于按钮宽度.
我想在这里实现的是,我想在两个按钮之间添加空格,我不想使用右边或左边边距.我希望btn-group div能够使用其父仪表板主体的全宽,以便我可以使用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>
解决方法
这是实现这一目标的正确方法：
.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>