Contao in Bayern - Flexbox und Grid Layout 20170511 › newsreader › flexbox-und-grid... ·...

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


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/


Browserunterstützung für Flexbox


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)


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


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)


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


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;


Mögliche Fallback-Lösungen Flexbox


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/


Browserunterstützung für Grid Layout


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)


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)


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)


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)


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


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;


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;


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}


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/


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


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/


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


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

Date post:	30-Jun-2020
Category:	Documents
Upload:	others
View:	8 times
Download:	0 times

Contao in Bayern - Flexbox und Grid Layout 20170511 › newsreader › flexbox-und-grid... ·...

Documents