最佳答案
您可以将 :first-child
的宽度设置为 100%
,而其余的 child :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>
关于css - Flexbox 中的第一个 child 全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41789278/