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 ein ::after hinzu, das den Raum automatisch ausfüllt. Es ist nicht erforderlich, Ihr HTML zu verschmutzen. Hier ist ein Codepen, das es zeigt: http://codepen.io/DanAndreasson/pen/ZQXLXj

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

.grid::after {
  content: "";
  flex: auto;
}

Answer 2

Wie von anderen Postern erwähnt - es gibt keinen sauberen Weg, um die letzte Zeile mit Flexbox links auszurichten (zumindest gemäß der aktuellen Spezifikation)

Dennoch, wenn es darum geht: Mit dem CSS Grid Layout Modul ist dies erstaunlich einfach zu realisieren:

Im Grunde genommen läuft der relevante Code darauf hinaus:

ul {
  display: grid; /* 1 */
  grid-template-columns: repeat(auto-fill, 100px); /* 2 */
  grid-gap: 1rem; /* 3 */
  justify-content: space-between; /* 4 */
}

1) Mach das Container-Element zu einem Grid-Container

2) Setze das Raster mit automatischen Spalten von 100px Breite. (Beachte die Verwendung von auto-fill (im Gegensatz zu auto-fit - was (für ein Layout in einer Reihe) leere Spuren auf 0 zusammenfallen lässt - so dass die Elemente sich ausdehnen, um den verbleibenden Platz einzunehmen. Dies würde zu einem gerechtfertigten 'space-between' Layout führen, wenn das Raster nur eine Zeile hat, was in unserem Fall nicht das ist was wir wollen. (schau dir dieses Demo an, um den Unterschied zwischen ihnen zu sehen)).

3) Setze Abstände für die Gitterzeilen und -spalten - hier, da wir ein 'space-between' Layout wollen - wird der Abstand tatsächlich ein minimaler Abstand sein, weil er bei Bedarf wachsen wird.

4) Ähnlich wie bei Flexbox.

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 1rem;
  justify-content: space-between;

  /* langweilige Eigenschaften */
  list-style: none;
  background: wheat;
  padding: 2rem;
  width: 80vw;
  margin: 0 auto;
}

li {
  height: 50px;
  border: 1px solid green;
}

Codepen Demo (Ändern der Größe, um den Effekt zu sehen)

Answer 3

Eine Technik wäre das Einfügen einer Anzahl von zusätzlichen Elementen (so viele wie die maximale Anzahl von Elementen, die Sie jemals in einer Zeile erwarten), denen eine Höhe von Null gegeben wird. Der Platz wird immer noch aufgeteilt, aber überflüssige Zeilen kollabieren zu nichts:

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

body {
  padding: 5%;
}

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

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

li {
  flex: 1 0 200px;
  height: 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

In Zukunft könnte dies durch die Verwendung mehrerer ::after(n) erreichbar sein.

Answer 4

Ohne zusätzliche Markup hinzuzufügen, hat es bei mir funktioniert, indem ich ::after verwendet habe, um die Breite der Spalte anzugeben.

.grid {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.grid::after{
  content: '';
  width: 10em // Gleiche Breite wie .grid__element
}
.grid__element{
  width:10em;
}

Mit dem HTML wie folgt:

Answer 5

Ich weiß, es gibt viele Antworten hier, aber.. Der einfachste Weg, dies zu tun, ist mit einem Raster anstelle von flex und Raster Vorlagen Spalten mit wiederholen und Auto-Füllungen, bei denen Sie die Anzahl der Pixel festlegen müssen, die Sie jedem Element gegeben haben, 100px aus Ihrem Schnipselcode.

.exposegrid {
     display: grid;
     grid-template-columns: repeat(auto-fill, 100px);
     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;
}