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

Wenn Sie die Breite der Abstände zwischen Elementen in der Reihe und die Anzahl der Elemente in einer Reihe kennen, würde dies funktionieren:

Beispiel: 3 Elemente in einer Reihe, 10px Abstand zwischen Elementen

div:last-child:nth-child(3n+2) {
  flex-grow: 1
  margin-left: 10px
}

Answer 2

Angenommen:

• Sie möchten ein Rasterlayout mit 4 Spalten und Umbruch
• Die Anzahl der Elemente ist nicht unbedingt ein Vielfaches von 4

Legen Sie für jedes Element außer dem 1., 5. und 9. Element usw. einen linken Rand fest. Wenn der linke Rand 10px beträgt, hat jede Zeile einen um 30px verteilten Rand unter 4 Elementen. Die prozentuale Breite für ein Element wird wie folgt berechnet:

100% / 4 - horizontaler Rand - horizontaler Abstand - linker Rand * (4 - 1) / 4

Dies ist eine anständige Lösung für Probleme, die die letzte Zeile von Flexbox betreffen.

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1em 0 3em;
  background-color: peachpuff;
}

.item {
  margin-left: 10px;
  border: 1px solid;
  padding: 10px;
  width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
  background-color: papayawhip;
}

.item:nth-child(4n + 1) {
  margin-left: 0;
}

.item:nth-child(n + 5) {
  margin-top: 10px;
}

  1
  2
  3
  4

  1
  2
  3
  4
  5
  6

  1
  2
  3
  4
  5
  6
  7
  8
  9

Answer 3

Es scheint, als hätte niemand die Flex-Grow-Lösung für das letzte Element vorgeschlagen. Die Idee ist, dass das letzte Flex-Element den verfügbaren Platz mit flex-grow: 1 einnimmt.

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

.grid > *:last-child {
  flex-grow: 1;
}

Hinweis: Diese Lösung ist nicht perfekt, insbesondere wenn Sie zentrierte Elemente innerhalb Ihrer Flex-Elemente haben, da es sich auf das möglicherweise riesige letzte Flex-Element zentrieren wird.

Answer 4

Dies ist ziemlich hacky, aber es funktioniert für mich. Ich versuchte, konsistente Abstände/Ränder zu erreichen.

.grid {
  width: 1024px;
  display: flex;
  flex-flow: row wrap;
  padding: 32px;
  background-color: #ddd;  

  &:after {
    content: "";
    flex: auto;
    margin-left:-1%;
  }

  .item {
    flex: 1 0 24.25%;
    max-width: 24.25%;
    margin-bottom: 10px;
    text-align: center;
    background-color: #bbb;

    &:nth-child(4n+2),
    &:nth-child(4n+3),
    &:nth-child(4n+4) {
      margin-left: 1%;
    }

    &:nth-child(4n+1):nth-last-child(-n+4),
      &:nth-child(4n+1):nth-last-child(-n+4) ~ .item {
        margin-bottom: 0;
    }    

  }
}

http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/

Answer 5

Es gibt einen Weg ohne Flexbox, obwohl Sie die folgenden Bedingungen erfüllen müssten. 1) Der Container hat Padding. 2) Die Elemente haben die gleiche Größe und Sie wissen genau, wie viele Sie pro Zeile möchten.

ul {
  padding: 0 3% 0 5%;
}
li {
  display: inline-block; 
  padding: 0 2% 2% 0;
  width: 28.66%;
}

Das kleinere Padding auf der rechten Seite des Containers ermöglicht das zusätzliche Padding auf der rechten Seite eines jeden Listenelements. Unter der Annahme, dass die anderen Elemente im selben Elternelement wie das Listenobjekt mit 0 5% gepadded sind, wird es bündig mit ihnen sein. Sie können auch die Prozentsätze anpassen, um so viel Abstand zu bekommen, wie Sie möchten, oder berechnete px-Werte verwenden.

Natürlich können Sie dasselbe auch ohne das Padding auf dem Container machen, indem Sie nth-child (IE 9+) verwenden, um den Rand von jedem dritten Kasten zu entfernen.