Füllen des Raums in der letzten Zeile mit Flexbox

Chris Albrecht postete eine Frage auf StackOverflow über Grids. Im Wesentlichen: Stellen Sie sich vor, Sie haben ein Element mit einer unbekannten Anzahl von Kindern. Jedes dieser Kinder nimmt einen bestimmten Prozentsatz der Breite des Elternelements ein, sodass sie gleiche Zeilen bilden, z. B. jeweils 25 % für vier Spalten, jeweils 33,33 % für drei Spalten usw. Das Ziel ist es, den Raum dieses "Grids" gleichmäßig zu füllen. Es gibt eine unbekannte Anzahl von Kindern, also nehmen wir an, Sie würden 25 % verwenden und es gäbe 7 Kinder, dann wären das 4 in der ersten Zeile und 3 in der zweiten. Chris benötigte, dass die letzten 3 Kinder ihre Breite anpassen, um den Raum zu füllen, anstatt die Lücke zu lassen.

Flexbox hat genau die richtige Antwort dafür, was sonst wahrscheinlich eine JavaScript-Intervention erfordern würde.

Die Lösung besteht im Wesentlichen darin, dass die Kinder mit flex-wrap umbrechen können und der Raum dann mit flex-grow gefüllt wird.

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  flex-grow: 1;
  min-width: 25%;
}

Hier ist ein visuelles Beispiel dafür, wenn jedes Grid-Element rot ist und mit einem Rahmen getrennt ist

Durch Anpassen der min-width bei verschiedenen @media query Breakpoints können Sie es ziemlich einfach responsiv gestalten

.grid-item {
  flex-grow: 1;
  min-width: 25%;
}
@media (max-width: 1200px) {
  .grid-item {
    min-width: 33.33%; 
  }
}

Hier ist diese Demo

Siehe den Pen Wrapping Flexbox with Media Query Widths von Chris Coyier (@chriscoyier) auf CodePen.

Wenn Sie Flexbox ablehnen, weil es noch nicht einsatzbereit ist, ist dieses Beispiel für Sie. flex-wrap war in Firefox überhaupt nicht vorhanden, bis ziemlich kürzlich, und ist noch nicht einmal stabil, also wahrscheinlich noch keine superpraktische Lösung für Chris. Aber denken Sie daran, dass Firefox automatisch aktualisiert, so dass, wenn 28 veröffentlicht wird, alle es ziemlich schnell haben werden. Ich bin immer noch optimistisch, dass Flexbox innerhalb eines Jahres oder so ein ziemlich Standard-Layout-Mechanismus für neue Websites sein wird.

Wenn Sie Flexbox nur für unidirektionale Dinge benötigen, ist die Rückfallebene auf display: table manchmal eine Option, wenn Sie mit Rückfallebene die Genauigkeit des Layouts wiedergeben meinen. Wenn Sie das Umbrechen benötigen, könnte inline-block funktionieren. Sie können die Unterstützung für Flexbox-Umbrüche mit

@supports not (flex-wrap: wrap) {

}

Und möglicherweise eine Rückfallebene auf inline-block (mit keinem Abstand dazwischen). Wenn Sie das getan haben, hier ist, wie Sie die letzte Zeile bei Bedarf mit JavaScript anpassen könnten

var leftovers = $(".child").removeAttr("style").length % 4;
  
if (leftovers > 0) {
  var newWidth = 100 / leftovers;
  var fromHere = $(".child").length - leftovers + 1;
  $(".child:nth-child(n+" + fromHere + ")").css("width", newWidth + "%");
}

Beachten Sie die hartcodierte 4 darin, die 25% Kinder annimmt. Sie könnten es ausgefeilter gestalten und das erkennen. Das überlasse ich Ihnen. Die Auswahl der letzten paar Nachzügler (bestimmt durch den Modulo-Operator (%)) habe ich mit ein paar :nth-child Rezepten gemacht. Hier ist aber eine Demo davon

Siehe den Pen Wrapping Flexbox with Media Query Widths von Chris Coyier (@chriscoyier) auf CodePen.

Denken Sie daran, dass es hier eine große Übersicht über alle Flexbox-Eigenschaften gibt: hier.