Web Development Library: CSS Flexbox en Grid Layout

Web Development Library: CSS Flexbox en Grid Layout

Uitvoering
Paperback, zwart-wit , 212 pagina's
ISBN
9789059409217
Gepubliceerd
2017
€ 27,99
niet meer leverbaar

Handig om te weten: van dit boek is een webversie beschikbaar. Als u zich registreert, krijgt u gratis toegang, plus relevante extra’s.

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.

Meer informatie vindt u op www.webdevelopmentlibrary.nl.

Website: www.webdevelopmentlibrary.nl

Downloadbare bestanden
Wis filter
  • Peter Doolaard

    Peter Doolaard is front-enddeveloper en werkt aan projecten voor overheid en bedrijfsleven. Zijn specialiteiten zijn CSS en toegankelijkheid. In 2004 verscheen zijn eerste boek over webdevelopment en als co-auteur heeft hij meegewerkt aan diverse boeken...
    Doolaard D

Web Development Library: CSS Flexbox en Grid Layout

1
Introductie
Inleiding
Wat flexbox is
Wat flexbox kan
Wat flexbox oplost
Hello flexbox
Benodigde voorkennis
Samenvatting
Praktijkoefeningen
2
De basis van flexbox
Flexcontainers en flexitems
Ouders en kinderen
Rijen en kolommen: flex-direction
Regelomloop: flex-wrap
De verzameleigenschap flex-flow
De volgorde veranderen: order
Samenvatting
Praktijkoefeningen
3
Flexitems verdelen
Automatische marges
Flexeigenschappen voor uitlijnen
Uitlijnen in de hoofdrichting
Uitlijnen in de kruisrichting
De producten uitlijnen
Use cases uitlijnen
Samenvatting
Opdrachten
4
Een flexibel formaat
Groeien en krimpen met flex
Aanbevolen instelling: flex
Het basisformaat: flex-basis
Flex-grow en flex-shrink
Conclusie
Samenvatting
Praktijkoefeningen
5
Voorbeelden van flexbox
Website nos.nl
Venster voor instellingen
Kop en onderkop naast of onder elkaar
Items in een regel splitsen
Split screen
Split screen met footer
Hovereffect met flex
Show case: dobbelstenen
Samenvatting
6
Een opmaakraster maken met Grid Layout
Introductie
Kenmerken van gridlay-out
CSS-eigenschappen voor gridlay-out
Workflow in vogelvlucht
Een raster maken
Expliciet en impliciet raster
Kort: grid-template
Nog korter: grid
Samenvatting
Praktijkopdrachten
7
Items in het raster plaatsen
Plaatsingsmethoden
Plaatsen in benoemd vlak
Automatisch plaatsen
Uitlijnen
Samenvatting
Praktijkopdrachten
8
Voorbeelden van grid-layout
Website nos.nl
Instellingenvenster
Homepage
Conclusie
Index

Meer lezen? Op onze zustersite blog.computercreatief.nl publiceren wij en onze auteurs regelmatig interviews en artikelen met nuttige tips, trucs en andere lezenswaardigheden.

Bij Web Development Library: CSS Flexbox en Grid Layout hebben wij de volgende aanvullende artikelen gevonden:


Results of blog query (this text will be replaced...)

Meer artikelen over CSS op ComputerCreatief.nl

Relevante blogs zoeken...