CSS3 flexbox layout max 3 untergeordnete Elemente in einer Zeile

Question

Ist es in CSS einfach, ein festes Maximum von untergeordneten Elementen in derselben Zeile zu haben, bevor Sie die nächsten untergeordneten Elemente in eine neue Zeile verschieben?

Wie ich Flexbox verstehen, Kind Artikel nur in eine neue Zeile geschoben bekommen, wenn ihre iSINT genügend Platz auf der Linie darüber. Aber ich suche eine CSS-Regel oder -Funktion, die mir sagen lässt: "Ich möchte maximal 3 untergeordnete Elemente auf einer beliebigen Leitung, und selbst wenn Platz für ein 4'tes verfügbar ist, drücken Sie es auf eine neue Leitung" .

Answer 1

Statt Anzeige mit: flex Sie float verwenden könnten: links und jeden dritten Kind-Knoten wie folgt löschen:

.child { 
    background: #000; 
    height: 300px; 
    float: left; 
    margin:15px 0 0 15px; 
    width:150px; 

} 
.child:nth-child(3n+1) { 
    clear: left; 
} 

ich für Sie eine Geige erstellt: fiddle example

Im Fall Damit das übergeordnete Element nur zwei untergeordnete Elemente enthalten kann, können Sie dieses kurze jQuery-Fix ​​verwenden:

var child = $('.child'), 
    parent = $('.child').parent(); 

if(child.width() > (parent.width()/3)) { 
    child.css('clear', 'none'); 
} 

Fiddle mit fix: fiddle example2

Answer 2

Sie könnten die Artikel in einem Container div platzieren, der eine Breite von 100% und eine maximale Breite hat, die gerade ausreicht, um drei Artikel darin zu platzieren?

.parent { 
    width:100%; 
    max-width:350px; 
} 

Und dann legen Sie das um alle Elemente.

<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

Answer 3

Wenn Sie es mit Bootstrap verwenden Sie das CSS für Pseudo-Zeilenklasse hinzufügen shoul

.row:before, 
.row:after{ 
    width:0 !important; 
} 

Answer 4

Verwenden Sie Flex-Basis.

.child { 
flex-basis: 33%; 
} 

Der Prozentsatz muss entsprechend Ihrem Box-Sizing-Modell und der Verwendung von Rändern und/oder Padding angepasst werden.

Answer 5

fiddle

#container { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-around; 
} 
#container>div { 
    margin: 15px; 
    width: 150px; 
    height: 150px; 
} 

/* negative paddings are treated as 0 so woohoo */ 
#container>div { 
    /* up to 3 boxes in a row */ 
    padding: 0 calc((100% - 180px * 3)/6); 
} 
#container>div { 
    /* up to 4 boxes in a row */ 
    //padding: 0 calc((100% - 180px * 4)/8); 
} 
#container>div { 
    /* up to 5 boxes in a row */ 
    //padding: 0 calc((100% - 180px * 5)/10); 
} 
/* 180px = width + horizontal margins */ 

Answer 6

Oder könnten Sie CSS Grid für diesen Einsatz:

Ihre HTML:

<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

Ihre CSS:

.parent { 
    display: grid; // activate grid 
    grid-template-columns: repeat(4, 1fr); //make 4 cols with size 1fr 
    grid-gap: 20px; //gap between the rows 
} 
.child { //thats written with less. Just unnest for vanilla css 
    &:nth-child(3n+1) { 
     grid-column: 1; 
    } 
    &:nth-child(3n+2) { 
     grid-column: 2; 
    } 
    &:nth-child(3n+3) { 
     grid-column: 3; 
    } 
    &:nth-child(3n+4) { 
     grid-column: 1; //put the fourth item in a new row 
    } 
} 

Ich bin da sicher sind effizienter Möglichkeiten, dies mit Raster zu schreiben. Aber das macht den Job.