terug naar lessen overzicht

Zelfstudie 1: Flexbox

In deze zelfstudie serie:
checkmark simple
Les 2: Instellingen flexbox
checkmark simple
Les 3: Sandbox flexbox
checkmark simple
Les 4: Miniopdracht flexbox 1
checkmark simple
Les 5: Miniopdracht flexbox 2
checkmark simple
Les 6: Miniopdracht flexbox 3
checkmark simple
Les 7: Miniopdracht flexbox 4
checkmark simple
Les 8: Miniopdracht flexbox 5
checkmark simple

Alle lessen in deze reeks bekeken?

Je hebt alle lessen in deze reeks afgerond!

checkmark simple
Oops! Something went wrong while submitting the form.

Je hebt alle lessen afgerond!

checkmark simple

Les 1: Intro flexbox

Wat is Flexbox?

Flexbox is en CSS techniek waarmee je makkelijk en snel de layout van verschillende elementen op je paina kan aanpassen. Bij een flexbox heb je de flexcontainer ( het element met display: flex; ) en de flexchildren ( de childs van de flexcontainer ).

code snippet: display flex

Display flex en varianten

Met display flex kan je de children heel makkelijk naast elkaar of juist onder elkaar zetten

Flexcontainer en flexchildren (flex items)

Het element met display flex is de flexcontainer. De elementen in deze container zijn de flex items. Deze verhouding zich tenopzicht van de horzintale as (cross axis) en de verticale as (main axis)

Les 2: Instellingen flexbox

Instellingen flexbox

De instellingen op zowel de flex container als de flex items hebben invloed op de weergave van de items

Instellingen flex container

De flex container heeft de volgende properties:
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: column wrap;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right;
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end;
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline;

Instellingen flex items

De flex items hebben de volgende properties:
flex-grow: 4; /* default 0 */
flex-shrink: 3; /* default 1 */
flex-basis: 200px | auto; /* default auto */
flex: none | flex-grow + flex-shrink + flex basis
align-self: auto | flex-start | flex-end | center | baseline | stretch;

Handige links

Zie handige links voor de uitgebreide uitleg op w3Schools en CSS-Tricks

Les 3: Sandbox flexbox

W3schools flexbox sandbox

Codeer mee met de video. Ga vervolgens zelf experimenteren met de instellingen!

Les 4: Miniopdracht flexbox 1

Mini-opdracht Flexbox

Codeer mee met de video.

Les 5: Miniopdracht flexbox 2

Mini-opdracht Flexbox

Codeer mee met de video.

Les 6: Miniopdracht flexbox 3

Mini-opdracht Flexbox

Codeer mee met de vido.

Les 7: Miniopdracht flexbox 4

Mini-opdracht Flexbox

Codeer mee met de video.

Les 8: Miniopdracht flexbox 5

Mini-opdracht Flexbox

Codeer mee met de video.

*Er zijn geen links bij deze video reeks.
icon: files
Project files
* De link hierboven download een bestand via dropbox dit kan een zip of rar bestand zijn. Weet je niet hoe je dit type bestand kan gebruiken? Volg deze instructie voor zip bestanden. Of download WinRar voor rar bestanden.
* Er zijn geen project files om te downloaden voor deze zelfstudie.

Stel vragen en help medestudenten

Tijdens de live lessen zijn er opdrachten waarbij je zult samenwerken met jouw studiegenoten. Hiervoor gebruiken wij Discord. Daarnaast kun je ook jouw vragen stellen, de docenten zullen je vervolgens verder helpen.

Het kanaal voor deze cursus op onze discord: HTML CSS JS beginners course

portfolio-cursus

logo - discord

#code-cafe

100+ leden