解决方法
您可以将:first-child设置为100%的宽度,其余的子项:not(:first-child)设置为flex:1。要将它们放在多行上,请使用flex-wrap:wrap on the container:
.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>