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

Ich habe eine effiziente Lösung gefunden, dass das justify-content auch center / space-evenly / etc... sein kann (wenn Sie die Anzahl der Elemente in einer einzelnen Reihe kennen):

HTML:

Die Anzahl der

Tags (es kann auch ein anderes Tag sein) entspricht der Anzahl der Elemente in jeder Reihe minus 1. Mit verschiedenen Bildschirmgrößen kann man dies mit Media Queries manipulieren.

CSS:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.flex-item {
  width: 300px;
  height: 300px;
  background: #21BA45;
}

.container > p {
  width: 300px;
  height: 300px;
}

Answer 2

Wenn die einzelnen Child-Elemente eine explizite Breite haben (z.B. 32%), können Sie dies lösen, indem Sie dem Elternelement ein :after-Element hinzufügen und diesem die gleiche explizite Breite geben.

Answer 3

Ich habe das von Dan Andreasson präsentierte Beispiel modifiziert, indem ich an den Elementen einen rechten Rand verwendet habe, um einen Scheingatter zu erstellen. Sie können dann nth-child verwenden, um den Rand auf dem last-child des Spaltenrasters zu entfernen, das Sie benötigen. Hier ist eine Demo https://codepen.io/JacobLett/pen/mdVoroM

/* nur Demo */
body {
margin:0;
padding:0;
max-width:1024px;
margin:0 auto;
}
.block-list {
background: #ccc;
  border:1px solid #ccc;
}

.block-list .block-list__item {
background: #eee;
}
/* nur Demo */

.block-list .block-list__item {
   min-height: 100px;
   margin-bottom: 1rem;
}

@media only screen and (min-width: 900px) {
   .block-list {
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      justify-content: space-between;
      background-color: #ffffff;
      margin: 1em auto;
   }

   .block-list:after {
      content: "";
      -webkit-box-flex: 1;
      flex: auto;
   }

   .block-list__item {
      height: 10em;
      width: 25%;
      box-sizing: border-box;
      border-right: 10px solid white;
   }

   .block-list-2 .block-list__item {
      width: 50%;
   }

   .block-list-2 .block-list__item:nth-child(2n) {
      border: none;
   }

   .block-list-3 .block-list__item {
      width: 33.3%;
   }

   .block-list-3 .block-list__item:nth-child(3n) {
      border: none;
   }

   .block-list-4 .block-list__item {
      width: 25%;
   }

   .block-list-4 .block-list__item:nth-child(4n) {
      border: none;
   }

   .block-list-5 .block-list__item {
      width: 20%;
   }

   .block-list-5 .block-list__item:nth-child(5n) {
      border: none;
   }

   .block-list-6 .block-list__item {
      width: 16.66%;
   }

   .block-list-6 .block-list__item:nth-child(6n) {
      border: none;
   }
}

2 Spalten

   1

   2

   3

   4

   5

   6

3 Spalten

   1

   2

   3

   4

   5

   6

4 Spalten

   1

   2

   3

   4

   5

   6

5 Spalten

   1

   2

   3

   4

   5

   6

6 Spalten

   1

   2

   3

   4

   5

   6

Answer 4

Der beste Weg, dies zu tun, auch wenn Sie mehr Elemente zum Elternelement hinzufügen, ist folgender:

.parent {
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}

und fügen Sie einfach ::after diesem Elternelement hinzu:

.parent::after {
content: "";
flex-basis: 30% /* geben Sie ihm die gleiche Breite wie Ihr Kind oder Element; */
}

und jetzt ist es behoben, auch wenn Sie mehr Kinder oder Elemente hinzufügen, wird es nicht überlaufen

Answer 5

Oh Mann, ich glaube, ich habe eine gute Lösung mit minimalem CSS und ohne JS gefunden. Schau sie dir an:

img {width:100%;}
li {
  display: inline-block;
  width:8em;
  list-style:none;
}
ul {text-align: justify;}

Der Schlüssel hier ist daran zu denken, dass das, was wir erreichen wollen, genau das ist, was text-align: justify macht!

Die leeren Elemente im HTML dienen dazu, die letzte Zeile perfekt darzustellen, ohne das Aussehen zu ändern, aber sie müssen nicht unbedingt erforderlich sein, je nachdem, was du erreichen möchtest. Für eine perfekte Balance in jeder Situation benötigst du mindestens x-4 leere Elemente, wobei x die Anzahl der anzuzeigenden Elemente ist, oder n-2, wobei n die Anzahl der Spalten ist, die du anzeigen möchtest.