CSS Flexbox 中的第一个孩子全宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41789278/
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
First-child full-width in Flexbox
提问by Sajad
How can I can set first-child in flexbox full-width and all of the other child set to flex:1(for split space)?
如何将 flexbox 中的第一个孩子设置为全宽，并将所有其他孩子设置为flex:1（用于拆分空间）？
Like this:
像这样：
回答by TheYaXxE
You can set the :first-childto a width of 100%, and the rest of the childs :not(:first-child)to flex: 1. To put them on multiplelines, use flex-wrap: wrapon the container:
您可以将 设置:first-child为 100% 的宽度，并将其余子项设置:not(:first-child)为flex: 1。要将它们放在多行上，请flex-wrap: wrap在容器上使用：
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background: #e2eaf4;
padding: 10px;
}
.child {
display: inline-block;
font-family: "Open Sans", Arial;
font-size: 20px;
color: #FFF;
text-align: center;
background: #3794fe;
border-radius: 6px;
padding: 20px;
margin: 12px;
}
.child:first-child {
width: 100%;
}
.child:not(:first-child) {
flex: 1;
}<div class="container">
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
</div>回答by Vadim Ovchinnikov
Add width: 100%;for your first item. And flex: 1;for others.
width: 100%;为您的第一个项目添加。而flex: 1;对于其他人。
.flex {
display: flex;
flex-wrap: wrap;
}
.flex-item:not(:first-child) {
flex: 1;
}
.flex-item:nth-child(1) {
width: 100%;
}
/* Styles just for demo */
.flex-item {
background-color: #3794fe;
margin: 10px;
color: #fff;
padding: 20px;
border-radius: 5px;
}<div class="flex">
<div class="flex-item">
Child
</div>
<div class="flex-item">
Child
</div>
<div class="flex-item">
Child
</div>
</div>回答by vaskort
Another solution which utilises the flex-basisoption (the third value when using this format flex: 1 1 100%).
另一种利用该flex-basis选项的解决方案（使用此格式时的第三个值flex: 1 1 100%）。
.flexContainer {
display: flex;
flex-wrap: wrap;
}
.item:first-child {
flex: 1 1 100%;
margin-bottom: 20px;
}
.item {
flex: 1 1 40%;
height: 50px;
background-color: red;
margin: 0 20px;
}<div class="flexContainer">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>