3.2 flexbox 2

1. 3.2 Flexbox 2 HTML module 33.2 Flexbox 2

2. Lesdoel! Flexbox HTML module 33.2 Flexbox 2 Deze les behandelen we de volgende flex-onderdelen flex-Wrap / order / align-items / justify content

3. HTML module 3 Flex-wrap flex-wrap: wrap wrap-reverse 3.2 Flexbox 2 no-wrap (default) no-wrap (default)

4. HTML module 3 Flex-wrap flex-wrap: wrap wrap-reverse 3.2 Flexbox 2 no-wrap (default) wrap Bij het verkleinen van het scherm gaan de flex-items automatisch naar de volgende rij

5. HTML module 3 Flex-wrap flex-wrap: wrap wrap-reverse 3.2 Flexbox 2 no-wrap (default) wrap-reverse Bij het verkleinen van het scherm gaan de flex-items reverse automatisch naar de volgende rij

6. HTML module 3 Opdracht Pas de laatste lesopdracht aan door flex-wrap te gebruiken en check wat er gebeurt als je de pagina verkleint. We nemen hier max 10 minuten de tijd voor! 3.2 Flexbox 2

7. HTML module 33.2 Flexbox 2

8. HTML module 3 order order: 1 t/m .. 3.2 Flexbox 2 Met order kun je bepalen waar je een item wil plaatsen in een row/column

9. HTML module 33.2 Flexbox 2 align-items: flex-start(default) flex-end center stretch align-items Dit definieert hoe flex-items geplaatst worden op cross-axis baseline

10. HTML module 33.2 Flexbox 2 align-items: flex-start(default) flex-end center stretch baseline

15. HTML module 3 align-items Column 3.2 Flexbox 2

16. HTML module 3 align-items Column 3.2 Flexbox 2

17. HTML module 3 Opdracht Maak onderstaand voorbeeld na. We nemen hier max 15 minuten de tijd voor! 3.2 Flexbox 2

18. HTML module 33.2 Flexbox 2 justify-content: flex-start(default) flex-end center space-between justify-content Dit definieert hoe flex-items geplaatst worden op de main-axis space-around space-evenly

19. HTML module 33.2 Flexbox 2 justify-content: flex-start(default) flex-end center space-between space-around space-evenly justify-content

26. HTML module 3 Opdracht Maak onderstaande na We nemen hier max 15 minuten de tijd voor! 3.2 Flexbox 2

27. Huiswerk opdracht ! HTML module 33.1 Intro Flexbox Maak met behulp van flex vanuit deze les de wireframe van de volgende pagina. Lever het geheel als zip/rar bestand in bij de opdracht van deze les in teams. Doe dit voor het begin van de volgende les en voorkom minpunten aan het eind van deze module. Plus oefenen baart kunst.

28. wireframe opdracht ! HTML module 33.1 Intro Flexbox

3.2 flexbox 2

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (6)

Featured

Featured (20)

3.2 flexbox 2