Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid
So erhalten Sie Zugriff auf diesen Kurs
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.
Die Ausrichtung von Flex-Items kontrollieren mit justify-content, align-items und align-self
Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid
Die Ausrichtung von Flex-Items kontrollieren mit justify-content, align-items und align-self
Nach der Fließrichtung von Flex-Items geht es jetzt um die Ausrichtung von Flex-Items, und dazu gibt es unter anderem die Eigenschaften justify-content, align-items und align-self. Die Namen dieser Eigenschaften sind ein bisschen gewöhnungsbedürftig, aber das geht recht schnell, denn sie sind wirklich Klasse. Los geht's mit justify-content, also Ausrichten des Inhalts. justify-content wird dem Flex-Container zugewiesen, also in unserem Falle der Navigation, dem ul Element. justify-content kontrolliert die Ausrichtung der Flex-Items entlang der Hauptachse. justify-content arrangiert den Leerraum zwischen den Flex-Items. Das heißt, also wenn es keinen Leerraum geben sollte, dann hat die Eigenschaft überhaupt keine Auswirkung. Mögliche Werte auf einem Blick der Standardwert flex-start, dann das Gegenteil flex-end, dann center, space-between, space-around und space-evenly. Sie sehen, hier sind keine Werte, die irgendwie die Begriffe links oder rechts drinnen haben, das ist absichtlich so,…
Inhalt
-
-
-
-
-
-
-
(Gesperrt)
Flexbox und Grid: das moderne CSS-Layout1 Min. 45 Sek.
-
(Gesperrt)
Flexbox: display:flex erzeugt einen Flex-Container und Flex-Items4 Min. 4 Sek.
-
(Gesperrt)
Mehrspaltige Layouts per Flexbox: Neue Möglichkeiten ohne alte Probleme3 Min. 1 Sek.
-
(Gesperrt)
Die Fließrichtung von Flex-Items kontrollieren mit flex-direction, flex-wrap und flex-flow4 Min. 3 Sek.
-
(Gesperrt)
Die Ausrichtung von Flex-Items kontrollieren mit justify-content, align-items und align-self5 Min. 2 Sek.
-
(Gesperrt)
Automatische Abstände für Flex-Items mit margin: auto2 Min. 44 Sek.
-
Flexibilität für Flex-Items: Die Zauberformel flex: 14 Min. 53 Sek.
-
(Gesperrt)
Sticky Footer: Den Fußbereich mit flex: 1 am unteren Rand des Viewports platzieren4 Min. 4 Sek.
-
(Gesperrt)
Die Reihenfolge von Flex-Items definieren und Zwischenräume festlegen5 Min.
-
(Gesperrt)
Die wichtigsten Flexbox-Eigenschaften auf einen Blick2 Min. 48 Sek.
-
(Gesperrt)
Challenge: Die Navigation im Fußbereich gestalten1 Min. 29 Sek.
-
(Gesperrt)
Solution: Die Navigation im Fußbereich gestalten3 Min. 46 Sek.
-
(Gesperrt)
-
-
-