Flexbox und Grid Layout Eine kleine Einführung in die neuen Layoutmethoden 11.05.2017 Flexbox und Grid Layout 1
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 11.05.217 Flexbox und Grid Layout 2
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 https://drafts.csswg.org/css-flexbox/ 11.05.2017 Flexbox und Grid Layout 3
Browserunterstützung für Flexbox 11.05.2017 Flexbox und Grid Layout 4
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) 11.05.2017 Flexbox und Grid Layout 5
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 11.05.2017 Flexbox und Grid Layout 6
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) 11.05.2017 Flexbox und Grid Layout 7
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 11.05.2017 Flexbox und Grid Layout 8
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; 11.05.2017 Flexbox und Grid Layout 9
Mögliche Fallback-Lösungen Flexbox 11.05.2017 Flexbox und Grid Layout 10
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 https://drafts.csswg.org/css-grid/ 11.05.2017 Flexbox und Grid Layout 11
Browserunterstützung für Grid Layout 11.05.2017 Flexbox und Grid Layout 12
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) 11.05.2017 Flexbox und Grid Layout 13
Begriffserklärungen - Gridlinien (grid lines): Teilen das Grid auf und können horizontal und vertikal sein (Bsp.: Begriffserklärungen - 1 - Linien) - Gridbereich (grid tracks): Platz zwischen zwei Linien (horizontal oder vertikal) (Bsp.: Begriffserklärungen - 2 - Bereiche) - Gridzellen (grid cell): Kleinste Einheit eines Grids, wird von vier Gridlinien umgeben (Bsp.: Begriffserklärungen - 3 - Gridzellen) - Gridarea (grid area): Enthält mehrere Gridzellen, umgeben von vier Gridlinien (Bsp.: Begriffserklärungen - 4 - Gridarea) - Gridabstände (grid gutter): Definieren den Abstand zwischen Zeilen und Spalten (Bsp.: Begriffserklärungen - 5 - Gridabstände) 11.05.2017 Flexbox und Grid Layout 14
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) 11.05.2017 Flexbox und Grid Layout 15
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) 11.05.2017 Flexbox und Grid Layout 16
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 11.05.2017 Flexbox und Grid Layout 17
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; 11.05.2017 Flexbox und Grid Layout 18
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; 11.05.2017 Flexbox und Grid Layout 19
Mögliche Fallback-Lösungen Grid Mit Feature Queries, hier @supports: @supports (display: grid) { // Dieser Code wird nur ausgeführt, wenn CSS Grid vom Browser unterstützt wird } 11.05.2017 Flexbox und Grid Layout 20
Definitionen der CSS Working Group Flexbox: Grid Layout: https://drafts.csswg.org/css-flexbox/ https://drafts.csswg.org/css-grid/ Beispiele, Spiele und Generatoren für Flexbox https://flexbox.io Sehr guter Flexbox-Kurs von Wes Bos https://flexboxfroggy.com/ Spielerisch Flexbox lernen http://www.flexboxpatterns.com Einige Beispiele, was man mit Flexbox machen kann http://jonibologna.com/flexbox-cheatsheet/ Cheat Sheet für Flexbox von Joni Bologna http://bennettfeely.com/flexplorer/ Flexbox Explorer https://demo.agektmr.com/flexbox/ Flexbox Generator https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/ Flexbox Generator von Scotch.io 11.05.2017 Flexbox und Grid Layout 21
Bücher für Flexbox CSS3 Die neuen Features für fortgeschrittene Webdesigner, Florence Maurice, ISBN 978-3-86490-118-8 Einstieg in CSS Webseiten gestalten mit HTML und CSS, Peter Müller, ISBN 978-3-8362-3683-6 CSS Secrets Typische Webdesign-Probleme klug gelöst, Lea Verou ISBN 978-396009-025-0 Flexible Boxes Eine Einführung in moderne Websites, Peter Müller ISBN 978-3-8362-3499-3 Quellen und Tutorials für Flexbox www.maurice-web.de/flexbox_praesentation_maurice.pdf Endlich richtig Layouten: Durchstarten mit Flexbox https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/ Einführung in Flexbox https://www.w3schools.com/css/css3_flexbox.asp Einführung in Flexbox von W3Schools https://developer.mozilla.org/de/docs/web/css/css_flexible_box_layout/using_css_flexible_boxes Einführung in Flexbox vom Mozilla Dev. Network https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Tutorial von CSS Tricks für Flexbox https://wiki.selfhtml.org/wiki/css/eigenschaften/flexbox Einführung von SelfHTML zu Flexbox 11.05.2017 Flexbox und Grid Layout 22
Definitionen der CSS Working Group: Flexbox: Grid Layout: https://drafts.csswg.org/css-flexbox/ https://drafts.csswg.org/css-grid/ Beispiele, Spiele und Generatoren für Grid Layout http://cssgridgarden.com/ http://maddesigns.de/css-grid-layout-2764.html https://blog.kulturbanause.de/2013/12/css-grid-layout-module/ http://grid.malven.co/ http://jonibologna.com/spring-into-css-grid/ http://gridbyexample.com/examples/ https://alistapart.com/article/practical-grid 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 11.05.2017 Flexbox und Grid Layout 23
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 978-1-9375572-7-0 ebook, O Reilly ISBN 978-1-4919301-6-8 http://gridbyexample.com/ Einführung in Grid Layout von Rachel Andrew https://css-tricks.com/snippets/css/complete-guide-grid/ Einführung in Grid Layout von CSS Tricks https://developer.mozilla.org/en-us/docs/web/css/css_grid_layout Einführung in Grid Layout vom Mozilla Dev. Netw. http://wiki.selfhtml.org/wiki/grid Einführung von SelfHTML zu Grid Layout https://tympanus.net/codrops/css_reference/grid/ Einführung von Tympanus.net zu Grid Layout https://maurice-web.de/blog/ Flexbox und Grid Layout erklärt von F. Maurice 11.05.2017 Flexbox und Grid Layout 24
Videos für Flexbox und Grid Layout https://www.youtube.com/watch?v=lhuyxt8ypbm&app=desktop https://www.youtube.com/watch?v=16enlrdboyy Flex and Grid Sitting in a Tree Announcing CSS Grid & the Firefox Grid Inspector Tool von Jen Simmons https://www.youtube.com/watch?v=n5lt1slqbmq CSS Grid Layout - Rachel Andrew February 2017 https://www.youtube.com/watch?v=felq4z_rdpq https://www.youtube.com/watch?v=y8zmyad1bz0 Start using CSS Grid Layout by Rachel Andrew CSS Flexbox Tutorial #1 Introduction und folgende 28.04.2017 Flexbox und Grid Layout 25