contao in bayern - flexbox und grid layout 20170511 › newsreader › flexbox-und-grid... ·...
TRANSCRIPT
Flexbox und Grid Layout
Eine kleine Einführung in die neuen Layoutmethoden
11.05.2017 Flexbox und Grid Layout 1
11.05.217 Flexbox und Grid Layout 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
11.05.2017 Flexbox und Grid Layout 3
FlexboxBeschreibung 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 4
Browserunterstützung für Flexbox
11.05.2017 Flexbox und Grid Layout 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)
11.05.2017 Flexbox und Grid Layout 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
11.05.2017 Flexbox und Grid Layout 7
Eigenschaften von Flexbox
Erstellung eines Flexbox-Layouts mit display: flex; im Elternelement
Flex-Container:- Flussrichtung:
flex-direction: row(-reverse), column(-reverse)Kurzform: flex-flow: flex-direction flex-wrap
- Umbrechen der Elemente:flex-wrap: wrap, no-wrap, wrap-reverse
- Ausrichtung:justify-content: flex-start, flex-end, center, space-between, space-around (Container-Hauptachse)
align-items: flex-start, flex-end, center, stretch, baseline(Container-Nebenachse)
align-content: flex-start, flex-end, center, stretch, space-between, space-around (Container-Nebenachse, für mehrzeilige Flex-Container)
11.05.2017 Flexbox und Grid Layout 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 >= 0flex-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 9
Standardwerte Flexbox-Eigenschaften
Flex-Container:
display: flex oder inline-flex;
flex-direction: row;flex-wrap: no-wrap;
oder als Kurzform:
flex-flow: row nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
Flex-Items:
order: 1;
flex-grow: 0;flex-shrink: 1;flex-basis: auto;
oder als Kurzform:
flex: 0 1 auto;
align-self: auto;
11.05.2017 Flexbox und Grid Layout 10
Mögliche Fallback-Lösungen Flexbox
11.05.2017 Flexbox und Grid Layout 11
CSS Grid LayoutBeschreibung 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 12
Browserunterstützung für Grid Layout
11.05.2017 Flexbox und Grid Layout 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)
11.05.2017 Flexbox und Grid Layout 14
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 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)
11.05.2017 Flexbox und Grid Layout 16
Eigenschaften von Grid Layout
Erstellung eines Grid Layouts mit display: grid; im Elternelement
- Grid-Container:display: grid, inline-grid, subgrid (Grid in Grid)grid-template-columns/-rows: feste Längenangabe, %, fr (fraction unit)grid-template-areas: grid-area-name, . , nonegrid-template: none, subgrid, grid-template-rows/-columnsgrid-column/-row-gap: Definiert die Größe der Grid-Linien für Spalten oder Liniengrid-gap: Definiert die Größe der Grid-Linien für Spalten und Linienjustify-items: start, end, center, stretch (Anord. der Inhalte in den Linienachse)align-items: start, end, center, stretch (Anord. der Inhalte in der Spaltenachse)justify-content: start, end, center, stretch, space-around, space-between, space-
evenly (Verteilung des Grids auf die verfügbare Breite)align-content: start, end, center, stretch, space-around, space-between, space-
evenly (Verteilung des Grids auf die verfügbare Höhe)
11.05.2017 Flexbox und Grid Layout 17
Eigenschaften von Grid Layout Teil 2
Erstellung eines Grid Layouts mit display: grid; im Elternelement
- Grid-Container (Fortsetzung)grid-auto-columns/-rows: feste Längen, %, fr (fraction unit) (Erzeugt autom. Gridzellen)grid-auto-flow: row, column, row dense, column dense (Platziert Elem. ohne Ang.)grid: 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 festgrid-row-start/-end: Legt die Zeilen-Start- und Endlinie im Grid für ein Element festgrid-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 Linienachsealign-self: Ausrichtung des Inhaltes entlang der Spaltenachse
11.05.2017 Flexbox und Grid Layout 18
Standardwerte Grid-Eigenschaften(Quelle: Mozilla Developer Network)
Grid-Container:
display: grid;
grid-template-columns: kein Standardwert;grid-template-rows: kein Standardwert;grid-template-areas: kein Standardwert;
oder als Kurzform:
grid-template: kein Standardwert;
grid-column-gap: 0;grid-row-gap: 0;
oder als Kurzform:
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 19
Standardwerte Grid-Eigenschaften 2(Quelle: Mozilla Developer Network)
Grid-Items:
grid-column-start: auto;grid-column-end: auto;grid-row-start: auto;grid-row-end: auto;
oder als Kurzformen:
grid-column: auto;grid-row: auto;
grid-area: auto;
justify-self: stretch;
align-self: stretch;
11.05.2017 Flexbox und Grid Layout 20
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 21
Beispiele, Spiele und Generatoren für Flexboxhttps://flexbox.io Sehr guter Flexbox-Kurs von Wes Boshttps://flexboxfroggy.com/ Spielerisch Flexbox lernenhttp://www.flexboxpatterns.com Einige Beispiele, was man mit Flexbox machen kannhttp://jonibologna.com/flexbox-cheatsheet/ Cheat Sheet für Flexbox von Joni Bolognahttp://bennettfeely.com/flexplorer/ Flexbox Explorerhttps://demo.agektmr.com/flexbox/ Flexbox Generatorhttps://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
Flexbox Generator von Scotch.io
Definitionen der CSS Working GroupFlexbox: https://drafts.csswg.org/css-flexbox/Grid Layout: https://drafts.csswg.org/css-grid/
11.05.2017 Flexbox und Grid Layout 22
Bücher für FlexboxCSS3 – Die neuen Features für fortgeschrittene Webdesigner, Florence Maurice, ISBN 978-3-86490-118-8Einstieg in CSS – Webseiten gestalten mit HTML und CSS, Peter Müller, ISBN 978-3-8362-3683-6CSS Secrets – Typische Webdesign-Probleme klug gelöst, Lea Verou ISBN 978-396009-025-0Flexible Boxes – Eine Einführung in moderne Websites, Peter Müller ISBN 978-3-8362-3499-3
Quellen und Tutorials für Flexboxwww.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 Flexboxhttps://www.w3schools.com/css/css3_flexbox.asp Einführung in Flexbox von W3Schoolshttps://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
Einführung in Flexbox vom Mozilla Dev. Networkhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/ Tutorial von CSS Tricks für Flexboxhttps://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox Einführung von SelfHTML zu Flexbox
11.05.2017 Flexbox und Grid Layout 23
Beispiele, Spiele und Generatoren für Grid Layouthttp://cssgridgarden.com/ Spielerisch Grid Layout lernenhttp://maddesigns.de/css-grid-layout-2764.html Ein Beispiel für Grid Layouthttps://blog.kulturbanause.de/2013/12/css-grid-layout-module/ Einführung in Grid Layouthttp://grid.malven.co/ Cheat Sheet für Grid Layouthttp://jonibologna.com/spring-into-css-grid/ Ein weiteres Beispiel von Joni Bolognahttp://gridbyexample.com/examples/ Beispiele von Rachel Andrewhttps://alistapart.com/article/practical-grid Beispiel für eine Umsetzung auf Grid
Definitionen der CSS Working Group:Flexbox: https://drafts.csswg.org/css-flexbox/Grid Layout: https://drafts.csswg.org/css-grid/
11.05.2017 Flexbox und Grid Layout 24
Bücher für Grid LayoutGet Ready For CSS Grid Layout, Rachel Andrew eBook, A Book Apart
ISBN 978-1-9375572-7-0Grid Layout in CSS, Eric A. Meyer eBook, O‘Reilly
ISBN 978-1-4919301-6-8
Quellen und Tutorials für Grid Layouthttp://gridbyexample.com/ Einführung in Grid Layout von Rachel Andrewhttps://css-tricks.com/snippets/css/complete-guide-grid/ Einführung in Grid Layout von CSS Trickshttps://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 Layouthttps://tympanus.net/codrops/css_reference/grid/ Einführung von Tympanus.net zu Grid Layouthttps://maurice-web.de/blog/ Flexbox und Grid Layout erklärt von F. Maurice
28.04.2017 Flexbox und Grid Layout 25
Videos für Flexbox und Grid Layouthttps://www.youtube.com/watch?v=lhuyxt8YpbM&app=desktop Flex and Grid Sitting in a Tree
https://www.youtube.com/watch?v=16enLRDbOyY 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 Start using CSS Grid Layout by Rachel Andrew
https://www.youtube.com/watch?v=Y8zMYaD1bz0 CSS Flexbox Tutorial #1 – Introductionund folgende