CSS Flexbox

Leer snel CSS3 Flexable Box Layout Module in 1 uur video demonstraties. Je leert hoe je een Flexbox container maakt, zodat alle flexbox layout eigenschappen tot je beschikking komen. Daarna duiken we in de eigenschappen van de container voor het positioneren van de container en haar kinderen, de flex items. Daarna bekijken we alle eigenschappen van de flex items. Tussendoor en aan het eind van de cursus zie een aantal praktijkvoorbeelden, waaronder het maken van kolommen, een site in horizontale richting en een cardgroup component.

De meest in het oog springende eigenschap van Flexbox is, dat je de elementen niet enkel horizontaal of vertikaal kunt uitlijnen en afmetingen geven, maar dat je ze ook op verschillende manieren kunt verdelen over de ruimte. Zo kun je "met een druk op de knop" een aantal knoppen gelijkelijk verdelen over de beschikbare ruimte, zowel horizontaal of vertikaal. Of eenvoudig kolommen maken die altijd dezelfde hoogte hebben, ongeacht de inhoud.

Voorkennis
Voor deze cursus is het noodzakelijk dat je kennis hebt van HTML en CSS. Indien je dat niet hebt, kun je mijn cursussen HTML en/of CSS eerst volgen.

Deze cursus CSS is de derde in een reeks van vier waarin je van absolute beginner tot expert gaat. Je begint met HTML, dan CSS, en daarna CSS Flexbox en CSS Grid. Met deze laatste twee nieuwe CSS3 modules kun je elke soort lay-out maken, en behoren de beperkingen die webdesign tot een paar jaar geleden had, definitief tot het verleden.
Echter, deze cursus vormt een afgerond geheel en kan ook afzonderlijk worden gevolgd.

Praktijk
Naast de lessen waar je kunt zien hoe Flexbox werkt, zijn er een aantal praktijkvideo's die je laten zien hoe je bepaalde zaken snel kunt maken met Flexbox. zo maken we een header, een pagina met drie kolommen, en een complete "card" component, een tegenwoordig veelgebruikt design en layout element in webpagina's.