Peter Doolaard is eindredacteur en vormgever bij Van Duuren Media B.V. Hij redigeerde talloze boeken over aan computers gerelateerde onderwerpen en vertoont een bijna ongezonde belangstelling voor alles wat er op dit gebied valt te beleven.

Meer over Peter Doolaard

Peter Doolaard

CSS Flexbox en Grid-Layout

Name: CSS Flexbox en Grid-Layout
Author: Peter Doolaard

Paperback Nederlands 2017 1e druk 9789059409217

Dit product is niet leverbaar

Samenvatting

Dit deel van de serie Web Development Library biedt een stevige basis voor het maken van lay-outs voor webapps en webpagina’s met de opmaaktaal CSS. Centraal staat het nieuwste dat CSS te bieden heeft: Flexible Box Layout en Grid Layout. Daarmee zijn lay-outs mogelijk die voorheen alleen met veel moeite en omwegen of met behulp van scripting waren te realiseren. Het bekendste voorbeeld daarvan is the holy grail layout. De auteur gaat uitgebreid in op de fantastische mogelijkheden die dankzij goede ondersteuning door de belangrijkste browsers direct kunnen worden toegepast. Tot de behandelde onderwerpen behoren:

Flexcontainers en flexitems en hun instelmogelijkheden.
Uitlijnen en centreren in alle richtingen.
Elementen weergeven in een andere volgorde dan in de HTML.
Flexibiliteit met flex-grow, flex-shrink en flex-basis.
Kennismaken met CSS Grid Layout.
De principes achter rastercontainers en rasteritems.
Een raster maken: volledig gedefinieerd of automatisch.

Specificaties

ISBN13:9789059409217

Trefwoorden:internet, Web developer, CSS (Cascading Style Sheets), Grid Layout, CSS Flexbox

Taal:Nederlands

Bindwijze:paperback

Aantal pagina's:192

Uitgever:Van Duuren Media

Druk:1

Verschijningsdatum:4-5-2017

Hoofdrubriek:Computer en informatica

Serie:Web Development Library

Lezersrecensies

Wees de eerste die een lezersrecensie schrijft!

Schrijf een recensie

Uw cijfer

?

Log in om te stemmen

Over Peter Doolaard

Peter Doolaard is eindredacteur en vormgever bij Van Duuren Media B.V. Hij redigeerde talloze boeken over aan computers gerelateerde onderwerpen en vertoont een bijna ongezonde belangstelling voor alles wat er op dit gebied valt te beleven. Peter Doolaard heeft zich daardoor ontwikkeld tot algemeen kennisvat dat zo nu en dan in boekvorm overloopt. Hij schreef eerder de Basiscursus CSS. Peter Doolaard is tevens muziekfreak die een groot deel van zijn resterende vrije tijd doorbrengt met een koptelefoon op.

Andere boeken door Peter Doolaard

Bekijk alle boeken

Inhoudsopgave

U kunt van deze inhoudsopgave een PDF downloaden

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