Flexbox is een van de twee nieuwe belangrijke layout systemen in CSS, naast CSS Grid. Deze twee technieken zijn bedoeld om samen te gebruiken: met CSS Grid kun je elke denkbare layout maken, in een denkbeeldig grid met horizontale en verticale lijnen.
Flexbox is bedoeld om te gebruiken binnen een CSS Grid rij (horizontaal), of binnen een kolom (verticaal)
Flexbox is een eendimensionaal layout systeem dat dus altijd maar in een richting tegelijk werkt. Dat maakt het een stuk eenvoudiger dan CSS Grid, maar krachtig genoeg om eenvoudige layouts snel te realiseren. (Je kunt Flexbox ook nesten, waardoor je toch twee richtingen op kunt)
Daarnaast is Flexbox ook bedoeld om een aantal layout problemen op te lossen waarmee webdesigners al jaren tobben: verticale centrering, gelijkmatige verdeling van elementen binnen de ruimte, kolommen met gelijke hoogte ongeacht de inhoud, het is allemaal mogelijk.
Flexbox is een must als je goed met CSS wilt leren werken!
Downloads voor de cursus
Indien ingeschreven op deze cursus, kun je de bestanden die gebruikt zijn voor deze cursus downloaden. Dit zijn HTML bestanden waar alle CSS code in staat die gebruikt, plus de afbeeldingen die voorkomen in de cursus.
Cursus CSS Flexbox
In bijna 2 uur video lessen leer je je webpagina’s layout vorm te geven met Flexbox: de nieuwste CSS module om snel, effectief en responsive layouts te maken.
Wat leer je?
- Wat is Flexbox en wanneer ga je het gebruiken
- Hoe maak je een Flexbox container
- Welke onderdelen worden flaxbox items?
- Werken met eigenschappen van de Flexbox container
- Werken met eigenschappen van de flexbox items
- Manieren om elementen te verdelen over de vrije ruimte
- Manieren om eenvoudig horizontaal en verticaal te centreren
- Een header layout maken met flexbox
- Simpel pagina layouts maken met flexbox
- Een “card” module maken met flexbox
Inhoud
De cursus Flexbox bestaat uit de volgende video presentaties:
- Een flexbox container maken
- Praktijk: flexbox container
- Praktijk: werken met marges
- Flex direction: richting van de layout
- Flex flow
- Flex wrap
- Hoofdas en secundaire as uitgelegd
- Justify content: uitlijnen op de hoofdas
- Align items: uitlijnen van de vertikale as
- Praktijk: een header maken
- Align content: uitlijnen van meerdere regels
- Item order: de volgorde van flex items aanpassen
- Flex grow: hoe items kunnen groeien
- Flex shrink: hoe items kunnen krimpen
- Flex basis: de afmetingen van een item bepalen
- Flex shorthand: groei, krimp en basisafmetingen bepalen
- Praktijk: verschil tussen flex:1 en flex: auto
- Align self
- Praktijk: drie kolommen maken
- Praktijk: een site van drie rijen
- Praktijk: site met drie rijen en een kolom
- Praktijk: de cardgroup component uitgelegd
- Praktijk: de cardgroup maken
- Praktijk: de cards maken
Vervolg
Je kunt nu verder gaan met CSS Grid, een layout systeem waarmee elke denkbare layout kan worden gemaakt. Of Bootstrap, een bibliotheek waarvan het layout systeem op flexbox is gebaseerd. Of Greensock, animaties maken met HTML, Javascript en CSS.
Geplande cursussen in 2020
- juni: CSS Grid Layout: Een revolutionaire manier om elk soort layout te maken. Het nieuwste op het gebied van CSS.
- augustus: Bootstrap, de bibliotheek om snel responsive websites te maken.
- oktober: Greensock, de bibliotheek om animaties te maken met CSS en Javascript.
Geplande cursussen in 2021
CSS geavanceerd: Beweging, zoals transities, transformaties, animaties. Speciale effecten zoals filters, en meer…