1
LAYOUTING
MIT FLEXBOX & CSS GRID
VON TIMO KORINTH
2
HI! ICH BIN
TIMO KORINTH
job. UX Entwickler, Trainer & Autor personal. Verheiratet, Vater &
BVB Fan hobbies. Nerd Zeug where. Dortmund, Deutschland social.
@timokorinth timo-korinth timokorinth.de
3
CENTER
4
intriguing.com
5
DER HEILIGE GRAL
Der Webentwicklung
VOLLE BREITE HEADER
GLEICH HOCH LEFT RIGHT
CODE REIHENFOLGE
CONTENT
SO WENIG CODE WIE MÖGLICH
FOOTER
6
APPLIKATIONS-LAYOUT
Meist genutzt:
BLOCK & FLOAT
ABSOLUTE POSITIONIERUNG
FESTE GRÖßEN
JAVASCRIPT / JQUERY
CSS HACKS / TRICKS
7
FLEXBOX
8
FLEXBOX
The Flexbox Layout (Flexible Box) module (currently a
W3C Last Call Working Draft) aims at providing a more
efficient way to lay out, align and distribute space
among items in a container, even when their size is
unknown and/or dynamic (thus the word "flex").
9
FLEXBOX
Browser Support
http://caniuse.com/#feat=flexbox
10
FLEXBOX
Container
Item 1 Item 2
Direction
Cross axis
11
FLEXBOX
display: flex;
Container
12
FLEXBOX
flex-direction: row | row-reverse | column | column-reverse;
row (default)
row-reverse column
column-reverse
13
FLEXBOX
flex-grow: <number>; //default: 0
14
FLEXBOX
flex-grow: 0;
15
FLEXBOX
flex-grow: 1;
16
FLEXBOX
flex-grow: 1;
.item3 { flex-grow: 2; }
17
FLEXBOX
flex-grow: 0;
.item3 { flex-grow: 1; }
18
FLEXBOX
flex-shrink: <number>; //default: 1
19
FLEXBOX
flex-shrink: 1;
20
FLEXBOX
flex-shrink: 1;
.item3 { flex-shrink: 0; }
21
FLEXBOX
flex-basis: <length> | auto;
auto (default) 100px 20%
22
FLEXBOX
SHORTHAND
Kurzschreibweise:
flex: <grow> <shrink> <basis>;
23
FLEXBOX
Container flex-direction: column;
HEADER
flex: 0 0 auto;
MAIN
flex: 1 1 auto;
24
FLEXBOX
Container
NAV CONTENT
flex: 0 0 auto; flex: 1 1 auto;
25
BROWSER PREFIXE
Is actually...
display: flex;
display: -webkit-box; Ist eigentlich …
display: -webkit-flex;
display: -ms-flexbox;
26
AUTOPREFIXER
.flexDisplay {
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
}
https://github.com/postcss/autoprefixer
27
FLEXBOX
Der heilige Gral
28
CSS GRID
29
GRID LAYOUT
HEADER
NAV CONTENT
FOOTER
30
GRID LAYOUT
An important thing to understand about Grid is that
it's not ready to be used in production yet.
It's currently a W3C Working Draft and isn't supported
correctly in any browsers yet by default. Internet
Explorer 10 and 11 support it, but it's an old
implementation with an outdated syntax.
31
Browser Support
http://caniuse.com/#feat=css-grid
32
GRID LAYOUT
Grid Container display: grid;
33
GRID LAYOUT
Grid Items: Nur direkte Kinder des Conainers
34
GRID LAYOUT
Grid Line
35
GRID LAYOUT
Grid Track
36
GRID LAYOUT
Grid Cell
37
GRID LAYOUT
Grid Area
38
GRID CONTAINER
grid-template-columns: <track-size> … | <line-name> <track-size> …;
grid-template-rows: <track-size> … | <line-name> <track-size> …;
Shorthand: grid-template
50px auto 10%
50px
1fr
39
GRID CONTAINER
grid-column-gap: <line-size>;
grid-row-gap: <line-size>;
Shorthand: grid-gap
5px 5px
10px Nicht am Rand!
40
GRID CONTAINER
grid-auto-columns: <track-size> …;
grid-auto-rows: <track-size> …;
50px 50px
41
GRID CONTAINER
grid-auto-flow: row | column | row dense | column dense;
42
GRID ITEMS
grid-column-start, grid-column-end: <number> | span <number>;
grid-row-start, grid-row-end: <number> | span <number>;
Shorthand: grid-column, grid-row
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 3;
grid-column-end: span 2;
grid-row-start: 2;
grid-row-end: span 1;
43
GRID ITEMS
justify-self: start | end | center | stretch;
44
GRID ITEMS
align-self: start | end | center | stretch;
45
CSS GRID
Der heilige Gral
46
FLEXBOX VS. GRID
Flexbox Grid
1 Dimension 2 Dimensionen
Alien Syntax Intuitives Grid Modell
Browser Support -> Gut Browser Support -> Läuft.
Community -> Alt und Weise Community -> Frisch
… …
46
