Html 如何让 flex 中的孩子全宽？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36080367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make child in flex go full width?
提问by vikrantnegi007
I've started using flex and I love how it works.
我已经开始使用 flex 并且我喜欢它的工作方式。
I'm using flex layout and I want the btn-groupclass inside dashboard-bodyto go full width of the parent. Right now its width is equal to the width of both buttons together.
我正在使用 flex 布局，我希望btn-group里面的班级dashboard-body达到父级的全宽。现在它的宽度等于两个按钮加在一起的宽度。
What I want to achieve here is adding space between both buttons also I don't want to use margin right or left. I want the btn-groupdiv to have full width of its parent dashboard-bodyso I can use the flex property align-content: space-betweento have enough space between both buttons.
我想在这里实现的是在两个按钮之间添加空间，而且我不想使用右边距或左边距。我希望btn-groupdiv 具有其父级的全宽，dashboard-body以便我可以使用 flex 属性align-content: space-between在两个按钮之间留出足够的空间。
Is there any better way other than adding margin/padding around buttons to do the same?
除了在按钮周围添加边距/填充来做同样的事情之外，还有什么更好的方法吗？
Thanks.
谢谢。
Here is the code:
这是代码：
.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>回答by Tarek.hms
This is the right way to achieve that:
这是实现这一目标的正确方法：
.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>回答by Mamboleoo
You can add align-self:stretchon the .btn-group.
Here is a demo : https://jsfiddle.net/f5noh2q7/1/
您可以添加align-self:stretch.btn-group。
这是一个演示：https: //jsfiddle.net/f5noh2q7/1/
