Wie richtet man die letzte Zeile in einem Flexbox-Raster mit „justify-content: space-between' aus?

Flex-Box: So richten Sie die letzte Zeile am Raster aus

In einem Flex-Box-Layout mit einem Container wie:

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

Das Ziel besteht darin, Elemente in der letzten Reihe so auszurichten, dass sie auf gleicher Höhe mit anderen sind. Verwenden von justify-content: space-between; bleibt aufgrund der einstellbaren Rasterbreite und -höhe von entscheidender Bedeutung.

Derzeit mit:

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

.item {
  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;
}

Das Element unten rechts erscheint nicht ausgerichtet.

Um dies zu beheben:

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

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

Ein ::after wird hinzugefügt, um den Platz automatisch zu füllen, sodass keine HTML-Anpassungen erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie richtet man die letzte Zeile in einem Flexbox-Raster mit „justify-content: space-between' aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!