Flexbox und Grid Layout

Transkript

1 Flexbox und Grid Layout Eine kleine Einführung in die neuen Layoutmethoden Flexbox und Grid Layout 1

2 Gemeinsamkeiten von Flexbox und Grid Layout - Beide Techniken arbeiten mit Eltern- und Kindelementen - Echte Trennung von Anordnung im DOM und der Anzeige - Genaue Kontrolle der Ausrichtung: Horizontal und / oder vertikal - Beide Layouttechniken arbeiten richtungsunabhängig (Block-Layout: vertikal, Inline-Layout: horizontal) - Gleichhohe Spalten sowie horizontale und vertikale Zentrierung sind kein Problem - Standardmäßig responsive und flexibel Flexbox und Grid Layout 2

3 Flexbox Beschreibung vom Mozilla Developer Network: Die CSS3 Flexible Box, auch Flexbox genannt, ist ein Layoutmodus, um Elemente einer Seite so anzuordnen, dass sie sich vorhersagbar verhalten, wenn sich das Layout verschiedenen Bildschirmgrößen und Ausgabegeräten anpasst. Für viele Anwendungsfälle stellt das Flexible-Box- Modell eine Verbesserung gegenüber dem Block-Modell dar, da es keine Floats nutzt. Außerdem fallen die Margins eines Containers nicht mit den Margins seines Inhalts zusammen. Die genaue Definition zur Flexbox ist zu finden unter Flexbox und Grid Layout 3

4 Browserunterstützung für Flexbox Flexbox und Grid Layout 4

5 Was macht das Flexbox Layout aus? - Ideal für eindimensionales Layout (Horizontal oder vertikal) - Eine Flexbox besteht immer aus einem Flex-Container und Flex-Items - Ermöglicht gleiche Spaltenhöhen, da die Höhe einer Spalte immer vom Flex-Container abhängt (Bsp.: Flexbox gleiche Spaltenhöhe - Beispiel mit einer Sidebar und Content) - Trennung von Quelltext und Anzeige (Bsp.: Flexbox Navigation horizontal + row-reverse) - Kann Elemente horizontal und vertikal zentrieren (Bsp.: Flexbox Horizontale und vertikale Zentrierung) - Kein Clear notwendig, da es vorhergehende oder nachfolgende Elemente nicht beeinflusst - Standardmäßig responsive (Elemente reagieren dynamisch auf Änderungen des Viewports) Flexbox und Grid Layout 5

6 Begriffserklärungen - Flex Container: Elternelement der Flexbox (Bsp.: Begriffserklärungen - 1 Flex Container und Flex Items) - Flex Items: Kindelemente der Flexbox - Hauptachse (main axis): Bei flex-direction: row horizontale Achse Bei flex-direction: column vertikale Achse - Nebenachse (cross axis): Bei flex-direction: row vertikale Achse Bei flex-direction: column horizontale Achse Flexbox und Grid Layout 6

7 Eigenschaften von Flexbox Erstellung eines Flexbox-Layouts mit display: flex; im Elternelement Flex-Container: - Flussrichtung: flex-direction: row(-reverse), column(-reverse) - Umbrechen der Elemente: flex-wrap: wrap, no-wrap, wrap-reverse Kurzform: flex-flow: flex-direction flex-wrap - Ausrichtung: justify-content: align-items: align-content: flex-start, flex-end, center, space-between, space-around (Container-Hauptachse) flex-start, flex-end, center, stretch, baseline(container-nebenachse) flex-start, flex-end, center, stretch, space-between, space-around (Container- Nebenachse, für mehrzeilige Flex-Container) Flexbox und Grid Layout 7

8 Eigenschaften von Flexbox Teil 2 Erstellung eines Flexbox-Layouts mit display: flex; im Elternelement Flex-Items: - Ausrichtung: align-self: flex-start, flex-end, center, stretch, baseline, auto (Flex-Items-Nebenachse) - Größe der Elemente: flex-grow: Elemente können vergrößert werden, Werte >= 0 flex-shrink: Elemente können verkleinert werden, Werte >= 0 flex: Zahl (= flex: Zahl 1 auto) flex-basis: Gibt einem flexiblen Element eine Basisgröße (Werte: auto, %, feste Längenang., content, inherit) - Reihenfolge der Elemente: order: Zahl Flexbox und Grid Layout 8

9 Standardwerte Flexbox-Eigenschaften Flex-Container: display: flex oder inline-flex; Flex-Items: order: 1; flex-direction: row; flex-wrap: no-wrap; oder als Kurzform: flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; flex-grow: 0; flex-shrink: 1; flex-basis: auto; oder als Kurzform: flex: align-self: 0 1 auto; auto; align-content: stretch; Flexbox und Grid Layout 9

10 Mögliche Fallback-Lösungen Flexbox Flexbox und Grid Layout 10

11 CSS Grid Layout Beschreibung vom Mozilla Developer Network: CSS Grid Layout bringt ein zweidimensionales Layout-Tool ins Web mit der Fähigkeit, Elemente in Zeilen und Spalten zu legen. CSS Grid Layout kann verwendet werden, um viele verschiedene Layouts zu erreichen. Es zeichnet sich dadurch aus, dass man eine Seite in große Regionen teilt oder die Beziehung in Bezug auf Größe, Position und Schicht zwischen Teilen eines aus HTML- Regeln aufgebauten Steuerelements definiert. Die genaue Definition zum CSS Grid Layout ist zu finden unter Flexbox und Grid Layout 11

12 Browserunterstützung für Grid Layout Flexbox und Grid Layout 12

13 Was macht das Grid Layout aus? - Ideal für zweidimensionales Layout (Horizontal und vertikal) - Ermöglicht gleiche Spaltenhöhen, da die Höhe einer Spalte immer vom Grid-Container abhängt (Bsp.: Grid Layout gleiche Spaltenhöhe - Beispiel mit einer Sidebar und Content) - Trennung von Quelltext und Anzeige (Bsp.: Grid Layout Navigation horizontal) - Kann Elemente horizontal und vertikal zentrieren (Bsp.: Grid Layout Horizontale und vertikale Zentrierung) - Elemente können sich auch überlappen (Bsp.: Grid Layout 11 Boxen ausgerichtet und überlappend) - Standardmäßig responsive (Elemente reagieren dynamisch auf Änderungen des Viewports) (Bsp.: Grid Layout 8 Boxen responsiv) Flexbox und Grid Layout 13

14 Begriffserklärungen - Gridlinien (grid lines): Teilen das Grid auf und können horizontal und vertikal sein (Bsp.: Begriffserklärungen Linien) - Gridbereich (grid tracks): Platz zwischen zwei Linien (horizontal oder vertikal) (Bsp.: Begriffserklärungen Bereiche) - Gridzellen (grid cell): Kleinste Einheit eines Grids, wird von vier Gridlinien umgeben (Bsp.: Begriffserklärungen Gridzellen) - Gridarea (grid area): Enthält mehrere Gridzellen, umgeben von vier Gridlinien (Bsp.: Begriffserklärungen Gridarea) - Gridabstände (grid gutter): Definieren den Abstand zwischen Zeilen und Spalten (Bsp.: Begriffserklärungen Gridabstände) Flexbox und Grid Layout 14

15 Begriffserklärungen Teil 2 - Span (span): Angabe anstatt der Endlinie (Bsp.: Rachel Andrew - Span) - Benannte Linien (named lines): Variablen, um Linien zu benennen (Bsp.: Rachel Andrew Benannte Linien) Flexbox und Grid Layout 15

16 Eigenschaften von Grid Layout Erstellung eines Grid Layouts mit display: grid; im Elternelement - Grid-Container: display: grid-template-columns/-rows: grid-template-areas: grid-template: grid-column/-row-gap: grid-gap: justify-items: align-items: justify-content: align-content: grid, inline-grid, subgrid (Grid in Grid) feste Längenangabe, %, fr (fraction unit) grid-area-name,., none none, subgrid, grid-template-rows/-columns Definiert die Größe der Grid-Linien für Spalten oder Linien Definiert die Größe der Grid-Linien für Spalten und Linien start, end, center, stretch (Anord. der Inhalte in den Linienachse) start, end, center, stretch (Anord. der Inhalte in der Spaltenachse) start, end, center, stretch, space-around, space-between, spaceevenly (Verteilung des Grids auf die verfügbare Breite) start, end, center, stretch, space-around, space-between, spaceevenly (Verteilung des Grids auf die verfügbare Höhe) Flexbox und Grid Layout 16

17 Eigenschaften von Grid Layout Teil 2 Erstellung eines Grid Layouts mit display: grid; im Elternelement - Grid-Container (Fortsetzung) grid-auto-columns/-rows: grid-auto-flow: grid: feste Längen, %, fr (fraction unit) (Erzeugt autom. Gridzellen) row, column, row dense, column dense (Platziert Elem. ohne Ang.) Kurzbefehl für alle Angaben zu: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow und auch für grid-column-gap and grid-row-gap - Grid-Items: grid-column-start/-end: Legt die Spalten-Start- und Endlinie im Grid für ein Element fest grid-row-start/-end: Legt die Zeilen-Start- und Endlinie im Grid für ein Element fest grid-column/-row: Kurzbefehl für Start- und Endlinien (Spalten und Linien) grid-area: Legt für ein Element einen Namen fest (Verwendung im Template) justify-self: Ausrichtung des Inhaltes entlang der Linienachse align-self: Ausrichtung des Inhaltes entlang der Spaltenachse Flexbox und Grid Layout 17

18 Standardwerte Grid-Eigenschaften (Quelle: Mozilla Developer Network) Grid-Container: display: grid; oder als Kurzform: grid-template-columns: grid-template-rows: grid-template-areas: oder als Kurzform: grid-template: grid-column-gap: 0; grid-row-gap: 0; kein Standardwert; kein Standardwert; kein Standardwert; kein Standardwert; grid-gap: 0; justify-items: stretch; align-items: stretch; justify-content: kein Standardwert; align-content: kein Standardwert; grid-auto-columns: auto; grid-auto-rows: auto; grid-auto-flow: row; grid: kein Standardwert; Flexbox und Grid Layout 18

19 Standardwerte Grid-Eigenschaften 2 (Quelle: Mozilla Developer Network) Grid-Items: grid-column-start: grid-column-end: grid-row-start: grid-row-end: oder als Kurzformen: auto; auto; auto; auto; grid-area: justify-self: align-self: auto; stretch; stretch; grid-column: grid-row: auto; auto; Flexbox und Grid Layout 19

20 Mögliche Fallback-Lösungen Grid Mit Feature (display: grid) { // Dieser Code wird nur ausgeführt, wenn CSS Grid vom Browser unterstützt wird } Flexbox und Grid Layout 20

21 Definitionen der CSS Working Group Flexbox: Grid Layout: Beispiele, Spiele und Generatoren für Flexbox Sehr guter Flexbox-Kurs von Wes Bos Spielerisch Flexbox lernen Einige Beispiele, was man mit Flexbox machen kann Cheat Sheet für Flexbox von Joni Bologna Flexbox Explorer Flexbox Generator Flexbox Generator von Scotch.io Flexbox und Grid Layout 21

22 Bücher für Flexbox CSS3 Die neuen Features für fortgeschrittene Webdesigner, Florence Maurice, ISBN Einstieg in CSS Webseiten gestalten mit HTML und CSS, Peter Müller, ISBN CSS Secrets Typische Webdesign-Probleme klug gelöst, Lea Verou ISBN Flexible Boxes Eine Einführung in moderne Websites, Peter Müller ISBN Quellen und Tutorials für Flexbox Endlich richtig Layouten: Durchstarten mit Flexbox Einführung in Flexbox Einführung in Flexbox von W3Schools Einführung in Flexbox vom Mozilla Dev. Network Tutorial von CSS Tricks für Flexbox Einführung von SelfHTML zu Flexbox Flexbox und Grid Layout 22

23 Definitionen der CSS Working Group: Flexbox: Grid Layout: Beispiele, Spiele und Generatoren für Grid Layout Spielerisch Grid Layout lernen Ein Beispiel für Grid Layout Einführung in Grid Layout Cheat Sheet für Grid Layout Ein weiteres Beispiel von Joni Bologna Beispiele von Rachel Andrew Beispiel für eine Umsetzung auf Grid Flexbox und Grid Layout 23

24 Bücher für Grid Layout Get Ready For CSS Grid Layout, Rachel Andrew Grid Layout in CSS, Eric A. Meyer Quellen und Tutorials für Grid Layout ebook, A Book Apart ISBN ebook, O Reilly ISBN Einführung in Grid Layout von Rachel Andrew Einführung in Grid Layout von CSS Tricks Einführung in Grid Layout vom Mozilla Dev. Netw. Einführung von SelfHTML zu Grid Layout Einführung von Tympanus.net zu Grid Layout Flexbox und Grid Layout erklärt von F. Maurice Flexbox und Grid Layout 24

25 Videos für Flexbox und Grid Layout Flex and Grid Sitting in a Tree Announcing CSS Grid & the Firefox Grid Inspector Tool von Jen Simmons CSS Grid Layout - Rachel Andrew February Start using CSS Grid Layout by Rachel Andrew CSS Flexbox Tutorial #1 Introduction und folgende Flexbox und Grid Layout 25