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 ).
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.
Project files
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:
portfolio-cursus