HTML Module 3 / Les 1.3

1. 3.1 Introductie Flexbox
HTML module 33.1 Intro Flexbox

2. Lesdoel!
Starten met flexbox
HTML module 33.1 Intro Flexbox

3. Flexbox
HTML module 33.1 Intro Flexbox
CSS Flexible Box Layout, beter bekend als
Flexbox, is een CSS3-weblay-outmodel die
het makkelijker maakt om responsive te
stijlen.

4. HTML module 33.1 Intro Flexbox
Hoe werkt Flexbox
property
Display: flex
Parent
=
Flex Container
Childeren
=
Flex Items
flex-flow
justify-content
align-content
align-items

5. HTML module 33.1 Intro Flexbox
Childeren
=
Flex Items
property
order:
flex:
align-self
direction:

6. HTML module 33.1 Intro Flexbox
Flex-container maken!

7. HTML module 33.1 Intro Flexbox
Flex toevoegen aan css

8. HTML module 33.1 Intro Flexbox
Opdracht
Maak een webpagina met 6 blokken van
100px bij 100px met allemaal een andere
achtergrond kleur. Gebruik flex om de blokken
naast elkaar te laten verschijnen op het scherm
We nemen hier max 15 minuten de tijd voor!

9. HTML module 33.1 Intro Flexbox
Uitwerking opdracht

10. HTML module 33.1 Intro Flexbox
Uitwerking opdracht

11. HTML module 33.1 Intro Flexbox
Flexdirection Row
flex-direction:
row
row-reverse

12. HTML module 33.1 Intro Flexbox
Opdracht
Pas de webpagina van de opdracht aan en maak
er 2 row’s van 1 normaal en 1 reverse
We nemen hier max 10 minuten de tijd voor!

13. HTML module 33.1 Intro Flexbox
Flexdirection Column
flex-direction:
column Column-reverse

14. HTML module 33.1 Intro Flexbox
Responsive !

15. HTML module 33.1 Intro Flexbox
I.p.v. display: flex; gebruik je in dit geval
display: block; daarnaast maak de ul 90vw;

16. HTML module 33.1 Intro Flexbox
We gebruiken
nu wel
display:
flex; en de
li wordt
berekend
d.m.v. calc().

17. HTML module 33.1 Intro Flexbox
Opdracht
Pas de webpagina van de opdracht aan en maak
deze responsive dus klein scherm onder elkaar
groot scherm naast elkaar.
We nemen hier max 10 minuten de tijd voor!

18. HTML module 33.1 Intro Flexbox
Breedte flex child-element
door flex laten bepalen.
flex:
1 t/m …..

19. HTML module 33.1 Intro Flexbox
Flex: 1 t/m …..
We vervangen de width: door flex: 1;
Flexbox bepaalt nu automatisch de breedte

20. HTML module 33.1 Intro Flexbox
Flex: verschillende breedtes
Flexbox berekent zelf het geheel door 7 en bepaalt de breedte
d.m.v. het getal achter flex:

21. HTML module 33.1 Intro Flexbox
Opdracht
Pas de webpagina van de opdracht aan en maak
ongelijke vakken d.m.v. flex: !
Zodra je gereed bent kun je met het huiswerk
beginnen.

22. 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.

23. wireframe opdracht !
HTML module 33.1 Intro Flexbox