Positionierung von Elementen mit CSS 19.05.2021, 10:16 Uhr

Grid und Flexbox

Für die Positionierung von Elementen gibt es unter CSS verschiedene Möglichkeiten.
In diesem Workshop zeigen wir Ihnen, wie Sie auf der einen Seite sowohl mithilfe von Gitter (Grids), als auch mit einem Flexbox-Layout mehrere Elemente auf einer Webseite anordnen können. Ein großer Vorteil der Flexbox ist die Trennung der gestalterischen Elemente vom HTML-Code. Sie können damit problemlos lineare Strukturen umsetzen, bei verschachtelten stoßen Sie allerdings an die Grenzen der Vorgehensweise. An dieser Stelle bieten die CSS-Grids eine flexible Alternative. In einem Beispiel bauen wir ein 8x8 Grid auf und positionieren auf diesem unterschiedlich große Bilder, um Ihnen die Vorgehensweise zu demonstrieren.
Bei der Flexbox kommen zwei wesentliche Elemente zum Einsatz: der Flexbox-Container sowie die enthaltenen Flex-Items. Dies sind die direkten Kinder, die sich innerhalb des Containers befinden. Die Aktivierung findet, wie auch bei den Grids, über die display-Eigenschaft des Containers statt. Für das Flexbox-Modell nutzen Sie den Wert flex:

web & mobile DEVELOPER

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt web&mobile Developer plus Kunde.
  • 2 Monate Gratis testen
  • Über 4.000 qualifizierte Fachartikel
  • Diverse DevBooks thematisch für Sie zusammen gestellt
  • Webcasts von 30 - 90 Min.
  • Aufzeichnungen von ausgewählten Fortbildungen und Konferenzen
  • Auf jedem Gerät verfügbar