Flex-box: Letzte Reihe an Raster ausrichten

Question

Ich habe ein einfaches Flexbox-Layout mit einem Container wie folgt:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

Jetzt möchte ich, dass die Elemente in der letzten Zeile mit den anderen ausgerichtet werden. justify-content: space-between; sollte verwendet werden, da die Breite und Höhe des Rasters angepasst werden können.

Aktuell sieht es so aus

Hier möchte ich, dass das Element unten rechts in der "mittleren Spalte" ist. Wie kann ich das am einfachsten erreichen? Hier ist ein kleines jsfiddle, das dieses Verhalten zeigt.

.exposegrid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

Answer 1

Fügen Sie einfach ein paar gefälschte Elemente mit denselben Eigenschaften hinzu, außer dass die Höhe auf 0px gesetzt ist.

Answer 2

Auch wenn gap zu Flexbox kommt, werde ich eine Lösung hinzufügen, die funktioniert.

Es verwendet den Geschwister-Kombinator, um 2 Bedingungen zu überprüfen.

Die erste Bedingung, die überprüft wird, ist, ob ein Element das zweitletzte div:nth-last-child(2) ist.

Für 4-Spalten-Layouts müssen wir die Positionen 2 & 3 überprüfen Überprüfen Sie, ob es in der zweiten Reihe von 4 div:nth-of-type(4n+2) oder dritter in einer Reihe div:nth-of-type(4n+3) ist.

Für 3-Spalten-Layouts müssen wir nur Position 2 überprüfen

div:nth-of-type(3n+2)

Dann können wir wie unten kombinieren für 4-Spalten-Layouts

div:nth-last-child(2) + div:nth-of-type(4n+2)

div:nth-last-child(2) + div:nth-of-type(4n+3)

Wir müssen uns auch um einen Randfall kümmern. Jede Zahl, die 3n+2 & Vielfaches von 4 ist, erhält den 35%igen margin-right div:nth-last-child(2) + div:nth-of-type(4n+4)

3-Spalten-Layouts werden sein

div:nth-last-child(2) + div:nth-of-type(3n+2)

Dann müssen wir dem oben genannten Selektor einen Rand hinzufügen. Der margin-right muss berechnet werden und hängt vom flex-basis ab.

Ich habe ein Beispiel mit 3 und 4 Spalten und einer Media Query hinzugefügt. Ich habe auch einen kleinen JavaScript-Button hinzugefügt, der ein neues div hinzufügt, damit Sie überprüfen können, ob es funktioniert.

Es ist ein bisschen CSS, aber es funktioniert. Ich habe auch darüber auf meiner Website geschrieben, wenn Sie eine etwas ausführlichere Erklärung möchten. https://designkojo.com/css-programming-using-css-pseudo-classes-and-combinators

var number = 11;

$("#add").on("click", function() {
    number = number + 1;
    $("#main").append("" + number + "");
});

body {
  margin: 0;
}
main{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start; /* vertikal */
  justify-content: space-between;
  min-width: 300px;
  max-width: 1200px;
  margin: 20px auto;
  background-color: lightgrey;
  height: 100vh;
}
div {
  flex-basis: 30%;
  background-color: #5F3BB3;
  min-height: 20px;
  height: 50px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #9af3ff;
  font-size: 3em;
}

div:nth-last-child(2) + div:nth-of-type(3n+2) {
  background-color: #f1b73e;
  margin-right: 35%;
}

@media screen and (min-width: 720px) {

  div {
    flex-basis: 22%;
  }

  div:nth-last-child(2) {
    background-color: greenyellow;
  }

  div:nth-of-type(4n+2) {
    background-color: deeppink;
  }

  /* Die Verwendung des Plus-Kombinators gilt für direkte Geschwister */
  div:nth-last-child(2) + div:nth-of-type(4n+2) {
    background-color: #f1b73e;
    margin-right: 52%;
  }

  div:nth-last-child(2) + div:nth-of-type(4n+3) {
    background-color: #f1b73e;
    margin-right: 26%;
  }

  /* Es muss auch das letzte auf 0% gesetzt werden, um zu überschreiben, wenn es (3n+2) wird
   * Jede Zahl, die 3n+2 & Vielfaches von 4 ist, erhält den 35% margin-right
   * div:nth-last-child(2) + div:nth-of-type(3n+2)
   */

  div:nth-last-child(2) + div:nth-of-type(4n+4) {
    background-color: #f1b73e;
    margin-right: 0;
  }

}

  Mein neues Projekt

Hinzufügen

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

Answer 3

Dies ist die beste Methode für Blöcke mit fester Breite:

http://codepen.io/7iomka/pen/oxxeNE

In anderen Fällen - Version von dalgard

http://codepen.io/dalgard/pen/Dbnus

body {
  padding: 5%;
}

div {
  overflow: hidden;
  background-color: yellow;
}

ul {
  display: flex;
  flex-wrap: wrap;
justify-content:center;
  margin: 0 -4px -4px 0;
  list-style: none;
  padding: 0;
}

li {
  flex: 1 0 200px;
  height: 200px;
  max-width:200px;
  min-width:200px;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  background-color: deeppink;
}
li:empty {
  height: 0;
  border: none;
}

*,
:before,
:after {
  box-sizing: border-box;
}

    a
    b
    c
    d
    e
    f
    g
    h
    i
    j
    k

Answer 4

Ich mochte die Einfachheit der Antwort von @Dan Andreasson & @Robin Métral.. jedoch hat sie nicht ganz für mich funktioniert.

Also anstatt:

.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.grid::after {
content: "";
flex: auto;
}

habe ich folgendes verwendet:

.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.grid::after {
content: "";
width: calc(100%/3 - 20px); /* beliebige Breite der Grid-Elemente */
}

bisher scheint es wie beabsichtigt zu funktionieren.

Answer 5

Es gibt Lösungen hier, wo Leute vorschlagen, exakte Layout-CSS-Klassen zu schreiben, das letzte Element mit einem Pseudo-Element zu fälschen, nicht-Flexbox-Ansätze zu verwenden usw.

Ein großes Problem sind die Abstände zwischen den Nachbarn (Fall - ausgerichtete Schaltflächen, die in mehreren Zeilen umgebrochen werden). In einem solchen Fall möchten Sie nicht, dass die Elemente sich berühren, es gibt einen Bedarf an Abständen. Ich möchte einfach eine anpassungsfähige Lösung hinzufügen, die Abstände respektiert und mit einer beliebigen Anzahl von Elementen funktioniert. Es basiert auch auf der Idee des gefälschten letzten Elements, ist jedoch universeller. Details finden Sie in den Schnippkommentaren.

html {
  font-size: 1px;
}

.container {
  font-size: 16rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  background-color: orange;
  border-radius: 10rem;
  box-sizing: border-box;
  color: white;
  margin-bottom: 10rem;
  padding: 15rem 10rem;
  text-align: center;
}

Mach etwas
Mach etwas
Mach etwas
Mach etwas
Mach etwas
Mach etwas