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

Sie können nicht. Flexbox ist kein Rastersystem. Es hat nicht die Sprachkonstrukte, um das zu tun, was Sie verlangen, zumindest nicht, wenn Sie justify-content: space-between verwenden. Das Ähnlichste, was Sie mit Flexbox erreichen können, ist die Verwendung der Spaltenausrichtung, die eine explizite Höhe erfordert:

http://cssdeck.com/labs/pvsn6t4z (Hinweis: Präfixe nicht enthalten)

ul {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 4em;
}

Es wäre jedoch einfacher, einfach Spalten zu verwenden, die eine bessere Unterstützung haben und keine spezifische Höhe erfordern:

http://cssdeck.com/labs/dwq3x6vr (Hinweis: Präfixe nicht enthalten)

ul {
  columns: 15em;
}

Answer 2

Eine mögliche Lösung besteht darin, justify-content: flex-start; auf dem .grid-Container zu verwenden, Größenbeschränkungen für dessen Kinder festzulegen und Ränder an den geeigneten Kind-Elementen zu setzen - abhängig von der gewünschten Anzahl von Spalten.

Für ein 3-Spalten-Raster würde der grundlegende CSS-Code so aussehen:

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

.grid > * {
    flex: 0 0 32%;
    margin: 1% 0;
}

.grid > :nth-child(3n-1) {
    margin-left: 2%;
    margin-right: 2%;
}

Es ist eine weitere unvollkommene Lösung, aber sie funktioniert.

http://codepen.io/tuxsudo/pen/VYERQJ

Answer 3

Außerdem können Sie dies tun:

.exposegrid:last-child {
  margin-right: auto;
}

Answer 4

Dieses Problem wurde für mich mithilfe von CSS Grid gelöst,

Diese Lösung gilt nur, wenn Sie eine feste Anzahl von Spalten haben, d.h. Anzahl der Elemente, die in einer einzigen Zeile angezeigt werden sollen

-> Verwendung von Grid, aber ohne Angabe der Anzahl von Zeilen, da sich die Anzahl der Elemente erhöht, wickelt es sich in Spalten und fügt dynamisch Zeilen hinzu, in diesem Beispiel habe ich drei Spalten angegeben

-> Sie müssen Ihren Kind-/Zellen keine Position geben, da dies sie fest macht, was wir nicht wollen.

.grid-class{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 80px;
}

Answer 5

Wenn Sie ein Raster mit etwas Abstand zwischen den Elementen und den Elementen möchten, die ohne anfänglichen Abstand beginnen, funktioniert diese einfache Lösung:

.grid {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -5px; // entfernen Sie den anfänglichen 5px Abstand
    width: auto;
}
.grid__item {
    width: 25%;
    padding: 0 5px; // sollte gleich dem negativen Rand oben sein.
}

Wenn Sie den anfänglichen 5px Abstand möchten, entfernen Sie einfach den negativen Rand :) Einfach.

https://jsfiddle.net/b97ewrno/2/

Die akzeptierte Antwort, obwohl gut, führt dazu, dass zwischen den Elementen in der zweiten Zeile kein Platz mehr ist.