Slide 1
Slide 1 text
@BERMONPAINTER
CSS LAYOUT TECHNIQUES:
REPLACING FLOATS
WITH FLEXBOX
Slide 2
Slide 2 text
SOLVING THE HARDEST PROBLEM
THE WEB HAS EVER KNOWN…
Slide 3
Slide 3 text
SOLVING THE HARDEST PROBLEM
THE WEB HAS EVER KNOWN…
Slide 4
Slide 4 text
CSS
HTML
body {
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 100px;
height: 100px;
}
Slide 5
Slide 5 text
THE HOLY GRAIL
A BRIEF HISTORY
IN LAYOUT
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
THE MEDIA OBJECT
A BRIEF HISTORY
IN LAYOUT
Slide 17
Slide 17 text
Ullamcorper Adipiscing Venenatis Consectetur Tortor
Curabitur blandit tempus porttitor. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
Curabitur blandit tempus porttitor. Maecenas sed diam eget
risus varius blandit sit amet non magna.
Slide 18
Slide 18 text
Ullamcorper Adipiscing Venenatis Consectetur Tortor
Curabitur blandit tempus porttitor. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
Curabitur blandit tempus porttitor. Maecenas sed diam eget
risus varius blandit sit amet non magna.
Slide 19
Slide 19 text
Ullamcorper Adipiscing Venenatis Consectetur Tortor
Curabitur blandit tempus porttitor. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
Curabitur blandit tempus porttitor. Maecenas sed diam eget
risus varius blandit sit amet non magna.
Slide 20
Slide 20 text
Ullamcorper Adipiscing Venenatis Consectetur Tortor
Curabitur blandit tempus porttitor. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
Curabitur blandit tempus porttitor. Maecenas sed diam eget
risus varius blandit sit amet non magna.
Slide 21
Slide 21 text
Ullamcorper Adipiscing Venenatis Consectetur Tortor
Curabitur blandit tempus porttitor. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
Curabitur blandit tempus porttitor. Maecenas sed diam eget
risus varius blandit sit amet non magna.
Slide 22
Slide 22 text
Ullamcorper Adipiscing Venenatis Consectetur Tortor
Curabitur blandit tempus porttitor. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
Curabitur blandit tempus porttitor. Maecenas sed diam eget
risus varius blandit sit amet non magna.
Slide 23
Slide 23 text
THE GRID
A BRIEF HISTORY
IN LAYOUT
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
FLEXBOX & GRID
NOT COMPETING STANDARDS
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Ullamcorper Adipiscing Venenatis Consectetur Tortor
Curabitur blandit tempus porttitor. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
Curabitur blandit tempus porttitor. Maecenas sed diam eget
risus varius blandit sit amet non magna.
Slide 31
Slide 31 text
gridbyexample.com/video/
RACHEL ANDREW
@RACHELANDREW
labs.jensimmons.com
JEN SIMMONS
@JENNSIMMONS
Slide 32
Slide 32 text
PARENT/CONTAINER PROPERTIES
FLEXBOX PRIMER
Slide 33
Slide 33 text
CSs
.container {
display: flex;
}
.box {
...
}
1
Slide 34
Slide 34 text
CSs
.container {
display: flex;
flex-direction: row;
}
.box {
...
}
1 2 3 4
Slide 35
Slide 35 text
CSs
.container {
display: flex;
flex-direction: row-reverse;
}
.box {
...
}
1
2
3
4
Slide 36
Slide 36 text
CSs
.container {
display: flex;
flex-direction: column;
}
.box {
...
}
1
2
3
4
Slide 37
Slide 37 text
CSs
.container {
display: flex;
flex-direction: column-reverse;
}
.box {
...
}
4
3
2
1
Slide 38
Slide 38 text
CSs
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.box {
...
}
1 2 3 4 5
Slide 39
Slide 39 text
CSs
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.box {
...
}
1 2 3 4 5 6 7
Slide 40
Slide 40 text
CSs
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box {
...
}
1 2 3 4 5
6 7
Slide 41
Slide 41 text
CSs
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
}
.box {
...
}
1 2 3 4 5
6 7
Slide 42
Slide 42 text
CSs
.container {
display: flex;
flex-flow: row nowrap;
}
.box {
...
}
1 2 3 4 5
Slide 43
Slide 43 text
CSs
.container {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
.box {
...
}
1 2 3 4 5
Slide 44
Slide 44 text
CSs
.container {
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
}
.box {
...
}
1 2 3 4 5
Slide 45
Slide 45 text
CSs
.container {
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
.box {
...
}
1 2 3 4 5
Slide 46
Slide 46 text
CSs
.container {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.box {
...
}
1 2 3 4 5
Slide 47
Slide 47 text
CSs
.container {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
.box {
...
}
1 2 3 4 5
Slide 48
Slide 48 text
CSs
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
}
.box {
...
}
1 2 3 4 5
Slide 49
Slide 49 text
CSs
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.box {
...
}
1 2 3 4 5
Slide 50
Slide 50 text
CSs
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-end;
}
.box {
...
}
1 2 3 4 5
Slide 51
Slide 51 text
CSs
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
.box {
...
}
1 2 3 4 5
Slide 52
Slide 52 text
CSs
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
}
.box {
...
}
1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
16 17
Slide 53
Slide 53 text
CSs
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
.box {
...
}
1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
16 17
Slide 54
Slide 54 text
CSs
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
}
.box {
...
}
1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
16 17
Slide 55
Slide 55 text
CSs
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.box {
...
}
1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
16 17
Slide 56
Slide 56 text
CSs
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: space-between;
}
.box {
...
}
1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
16 17
Slide 57
Slide 57 text
CSs
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: space-around;
}
.box {
...
}
1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
16 17
Slide 58
Slide 58 text
ELEMENT PROPERTIES
FLEXBOX PRIMER
Slide 59
Slide 59 text
CSs
.container {
display: flex;
flex-flow: row nowrap;
}
.box:nth-child(0) {
order: 0;
}
.box:nth-child(1) {
order: -1;
}
.box:nth-child(2) {
order: 1;
}
.box:nth-child(3) {
order: 0;
}
.box:nth-child(4) {
order: 0;
}
2 1 4 5 3
Slide 60
Slide 60 text
CSs
.container {
display: flex;
flex-flow: row nowrap;
}
.box {
flex-grow: 1;
}
1 2 3 4 5
Slide 61
Slide 61 text
CSs
.container {
display: flex;
flex-flow: row nowrap;
}
.box {
flex-shrink: 0;
}
1 2 3 4 5
Slide 62
Slide 62 text
CSs
.container {
display: flex;
flex-flow: row nowrap;
}
.box {
flex-grow: 1;
}
.box:nth-child(2) {
flex-grow: 2;
}
1 3
2 4 5
Slide 63
Slide 63 text
CSs
.container {
display: flex;
flex-flow: row nowrap;
}
.box {
flex-grow: 1;
}
.box:nth-child(2) {
flex-basis: 200px;
}
1 3
2 4 5
Slide 64
Slide 64 text
CSs
.container {
display: flex;
flex-flow: row nowrap;
}
.box {
flex: 1 0;
}
.box:nth-child(2) {
flex: 1 2;
}
1 3
2 4 5
Slide 65
Slide 65 text
PRACTICE
FLEXBOX PRIMER
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
http://codepen.io/collection/DbrpKV
Slide 69
Slide 69 text
MAKING MORE COMPLEX LAYOUTS
FLEXBOX PRIMER
Slide 70
Slide 70 text
HTML
Title
Content...
Title
Content...
Venenatis Fringilla Justo Sem Amet Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Venenatis Fringilla Justo Sem Amet Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.Slide 71
Slide 71 text
CSs
.panes {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
height:100vh;
text-align: center;
width: 100%;
}
Venenatis Fringilla
Justo Sem Amet
Aenean eu leo quam. Pellentesque
ornare sem lacinia quam venenatis
vestibulum. Nullam quis risus
eget urna mollis ornare vel eu
leo. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras
justo odio, dapibus ac facilisis
in, egestas eget quam.
Venenatis Fringilla
Justo Sem Amet
Aenean eu leo quam. Pellentesque
ornare sem lacinia quam venenatis
vestibulum. Nullam quis risus
eget urna mollis ornare vel eu
leo. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras
justo odio, dapibus ac facilisis
in, egestas eget quam.
Slide 72
Slide 72 text
CSs
.panes {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
height:100vh;
text-align: center;
width: 100%;
}
.pane {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
Venenatis Fringilla
Justo Sem Amet
Aenean eu leo quam. Pellentesque
ornare sem lacinia quam venenatis
vestibulum. Nullam quis risus
eget urna mollis ornare vel eu
leo. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras
justo odio, dapibus ac facilisis
in, egestas eget quam.
Venenatis Fringilla
Justo Sem Amet
Aenean eu leo quam. Pellentesque
ornare sem lacinia quam venenatis
vestibulum. Nullam quis risus
eget urna mollis ornare vel eu
leo. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras
justo odio, dapibus ac facilisis
in, egestas eget quam.
Slide 73
Slide 73 text
HTML
Slide 74
Slide 74 text
HTML
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
Slide 75
Slide 75 text
HTML
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex: 1;
}
Slide 76
Slide 76 text
HTML
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex: 1;
}
.content {
flex: 1;
}
Slide 77
Slide 77 text
HTML
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex: 1;
}
.content {
flex: 1;
}
.navigation {
flex-basis: 30%;
order: -1;
}
Slide 78
Slide 78 text
HTML
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex: 1;
}
.content {
flex: 1;
}
.navigation {
flex-basis: 30%;
order: -1;
}
.sidebar {
flex-basis: 20%;
}
Slide 79
Slide 79 text
HTML
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex: 1;
}
.content {
flex: 1;
}
.navigation {
flex-basis: 30%;
order: -2;
}
.sidebar {
flex-basis: 20%;
order: -1;
}
Slide 80
Slide 80 text
HTML
...
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Title
Description
Title
Description
Title
Description
Slide 81
Slide 81 text
CSs
.cards {
display: flex;
flex-flow: row wrap;
}
.card {
flex: 1 0 25%;
}
.card:nth-last-child(2):nth-child(4n) {
min-width: 33%;
}
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Slide 82
Slide 82 text
CSs
.cards {
display: flex;
flex-flow: row wrap;
}
.card {
flex: 1 0 25%;
}
.card:nth-last-child(2):nth-child(4n) {
min-width: 33%;
}
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Slide 83
Slide 83 text
CSs
.cards {
display: flex;
flex-flow: row wrap;
}
.card {
flex: 1 0 25%;
}
.card:nth-last-child(2):nth-child(4n) {
min-width: 33%;
}
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis
Sem Amet
Slide 84
Slide 84 text
ACCESSIBILITY
Slide 85
Slide 85 text
CSS
HTML
.container {
display: flex;
flex: 1;
}
.content {
flex: 1;
}
.navigation {
flex-basis: 30%;
order: -1;
}
.sidebar {
flex-basis: 20%;
}
1
2 3
DOM ORDER
Slide 86
Slide 86 text
CSS
HTML
.container {
display: flex;
flex: 1;
}
.content {
flex: 1;
}
.navigation {
flex-basis: 30%;
order: -1;
}
.sidebar {
flex-basis: 20%;
}
2
1 3
VISUAL ORDER
Slide 87
Slide 87 text
CSS
HTML
.container {
display: flex;
flex: 1;
}
.content {
flex: 1;
}
.navigation {
flex-basis: 30%;
order: -1;
}
.sidebar {
flex-basis: 20%;
}
1
2 3
TAB ORDER
Slide 88
Slide 88 text
BROWSER SUPPORT
Slide 89
Slide 89 text
FULL SUPPORT
SAFARI : 6.1+ FIREFOX : 28+
OPERA : 12.1+ IE EDGE : 12+
CHROME : 21+
Slide 90
Slide 90 text
PARTIAL SUPPORT
IE: 10-11
Slide 91
Slide 91 text
FIN
OPEN OFFICE HOURS
Friday mornings: 7am-9am
officehours.io/people/bermonpainter
TWITTER/SKYPE/EMAIL
@bermonpainter
KEEP IN TOUCH