CSS Flexbox en Grid-Layout

1 Introductie 1
-Inleiding 2
-Wat flexbox is 4
Kenmerken 5
-Wat flexbox kan 8
-Wat flexbox oplost 9
-Hello flexbox 10
Verticaal centreren 14
-Benodigde voorkennis 17
Tips voor meer leesvoer 17
Editor en browser 18
Voorbeeldcode downloaden 19
Samenvatting 20
Praktijkoefeningen 20

2 De basis van flexbox 21
-Flexcontainers en flexitems 22
Een flexcontainer maken 23
Flexitems 24
De inhoud van flexitems 25
-Ouders en kinderen 26
-Rijen en kolommen: flex-direction 27
Twee dimensies 29
Flex-direction toegepast 30
-Regelomloop: flex-wrap 34
-De verzameleigenschap flex-flow 36
-De volgorde veranderen: order 37
Use case voor order 39
-Samenvatting 42
-Praktijkoefeningen 42


3 Flexitems verdelen 45
-Automatische marges 46
Use case met automarge 49
Automarge op kolommen 51
-Flexeigenschappen voor uitlijnen 53
-Uitlijnen in de hoofdrichting 54
Justify-content (flexcontainer) 55
Toelichting op de code 57
-Uitlijnen in de kruisrichting 58
Align-items (container) en align-self (item) 58
Align-content (flexcontainer) 60
-De producten uitlijnen 61
-Use cases uitlijnen 63
Navigatiebalk 64
-Samenvatting 66
-Opdrachten 66

4 Een flexibel formaat 69
-Groeien en krimpen met flex 70
Als flex niet wordt ingesteld 70
-Aanbevolen instelling: flex 71
-Het basisformaat: flex-basis 75
Absolute en relatieve flex 77
-Flex-grow en flex-shrink 78
Flex-shrink 79
-Conclusie 81
-Samenvatting 81
-Praktijkoefeningen 82

5 Voorbeelden van flexbox 85
-Website nos.nl 86
Smalle weergave 87
Breakpoint 37rem 90
Breakpoint op 47rem 91
Breakpoint 69rem en breder 93
-Venster voor instellingen 95
De hoofdstructuur 97
De header 98
De lijst met opties 99
De brede weergave 101

-Kop en onderkop naast of onder elkaar 104
-Items in een regel splitsen 105
-Split screen 107
-Split screen met footer 110
-Hovereffect met flex 115
-Show case: dobbelstenen 117
De basis 117
De één 118
De twee 118
De drie 119
De vier 119
De vijf 120
De zes 121
-Samenvatting 122

6 Een opmaakraster maken met Grid Layout 123
-Introductie 124
De status van gridlay-out 125
-Kenmerken van gridlay-out 126
-CSS-eigenschappen voor gridlay-out 128
Definitie van het raster 128
Plaatsing van de items 129
Uitlijning en tussenruimte 129
-Workflow in vogelvlucht 130
-Een raster maken 132
Auto-flow 135
Tussenruimte (gap) 136
Waarden voor tracks 137
De functie repeat() 138
-Expliciet en impliciet raster 141
-Kort: grid-template 142
-Nog korter: grid 144
-Samenvatting 146
-Praktijkopdrachten 147

7 Items in het raster plaatsen 149
-Plaatsingsmethoden 150
Plaatsen op index 152
Plaatsen op benoemde lijn 157
Index en naam combineren 159
Verkorte notatie 159
Kort met grid-area 160

-Plaatsen in benoemd vlak 161
-Automatisch plaatsen 164
Basisafmetingen 165
Span 167
Auto-fit en dense 168
-Uitlijnen 171
Items uitlijnen in de rij 171
Items uitlijnen in de kolom 172
Items centreren met margin 173
Tracks uitlijnen 174
-Samenvatting 177
-Praktijkopdrachten 178

8 Voorbeelden van grid-layout 179
-Website nos.nl 180
Smalle weergave 181
Breakpoint 37rem 183
Breakpoint op 47rem 184
Breakpoint 69rem en breder 186
-Instellingenvenster 187
-Homepage 189
-Conclusie 194

Index 197