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!