Heim > Web-Frontend > CSS-Tutorial > Wie richtet man die letzte Zeile in einem Flexbox-Raster mit „justify-content: space-between' aus?

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

Linda Hamilton
Freigeben: 2024-12-27 03:31:10
Original
684 Leute haben es durchsucht

How to Align the Last Row in a Flexbox Grid with `justify-content: space-between`?

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage