78
Sie können die :first-child
Breite auf 100% und die übrigen Kinder :not(:first-child)
auf einstellen flex: 1
. Verwenden Sie flex-wrap: wrap
für den Container Folgendes, um sie in mehrere Zeilen zu setzen:
.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>
Fügen Sie
width: 100%;
für Ihren ersten Artikel hinzu. Undflex: 1;
für andere..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>
quelle
Eine andere Lösung, die die
flex-basis
Option verwendet (der dritte Wert bei Verwendung dieses Formatsflex: 1 1 100%
).MDN-Link für Flex-Basis
.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>
quelle