HTML Module 3 / Les3.3 t.b.v. studenten Applicatie en Mediaontwikkeling MBO Rijnland Leiden

1. 3.3 Flexbox 3
HTML module 33.3 Flexbox 3

2. Lesdoel!
Flexbox
HTML module 3
Deze les behandelen we de volgende flex-onderdelen
flex-basis / flex-grow / flex-shrink
3.3 Flexbox 3

3. HTML module 33.3 Flexbox 3

4. HTML module 33.3 Flexbox 3

5. HTML module 3
Eigenschappen toepassen op flex-items
flex-basis
flex-grow
flex-shrink
3.3 Flexbox 3
Voor meer controle op flex-items kunnen deze d.m.v.
de volgende 3 eigenschappen direct targetten.

6. HTML module 3
Eigenschappen toepassen op flex-items
3.3 Flexbox 3

7. HTML module 33.3 Flexbox 3 Opdracht
Neem onderstaande code over!

8. HTML module 3
Eigenschappen toepassen op flex-items
flex-grow flex-shrinkflex-basis
3.3 Flexbox 3

9. HTML module 33.3 Flexbox 3
flex-basis
Flex-basis houdt de breedte van de items
op 100px als het scherm onder de 300px
komt gaat de laatste naar de volgende
rij.

10. HTML module 3
Eigenschappen toepassen op flex-items
flex-grow flex-shrinkflex-basis
3.3 Flexbox 3

11. HTML module 33.3 Flexbox 3
flex-grow

12. HTML module 33.3 Flexbox 3
flex-grow flex-shrinkflex-basis

13. HTML module 33.3 Flexbox 3
flex-shrink

14. HTML module 33.3 Flexbox 3
flex-shrink

15. HTML module 33.3 Flexbox 3
flex-grow flex-shrinkflex-basis
Shorthand

16. HTML module 33.3 Flexbox 3
Waar draait
flexbox om?

17. HTML module 3
Hoe werkt Flexbox
property
Display: flex
Parent
=
Flex Container
Childeren
=
Flex Items
flex-flow
justify-content
align-content
align-items
3.3 Flexbox 3

18. HTML module 3
Childeren
=
Flex Items
property
order:
flex:
align-self
direction:
3.3 Flexbox 3

19. HTML module 3
Flexdirection Row
flex-direction:
row
row-reverse
3.3 Flexbox 3

20. HTML module 3
Flexdirection Column
flex-direction:
column Column-reverse
3.3 Flexbox 3

21. HTML module 3
Flex: 1 t/m …..
We vervangen de width: door flex: 1;
Flexbox bepaalt nu automatisch de breedte
3.3 Flexbox 3

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

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

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

25. HTML module 3
align-items:
flex-start(default)
flex-end
center
stretch
baseline
3.3 Flexbox 3

26. HTML module 3
align-items Column
3.3 Flexbox 3

27. HTML module 3
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
3.3 Flexbox 3

28. HTML module 3
justify-content:
flex-start(default)
flex-end
center
space-between
space-around
space-evenly
justify-content
3.3 Flexbox 3

29. Huiswerk opdracht !
HTML module 3
Maak met behulp van flex de webapplicatie
van de volgende pagina’s
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.
3.3 Flexbox 3

30. HTML module 2
Mobile
Groot scherm en ipad landscape
3.3 Flexbox 3

31. HTML module 2
IJsland.png
Ijsland_banner.
png
Font = Google fonts: IBM Plex Sans
banner_levering.png
Kleur rood = #ce0930
3.3 Flexbox 3

32. HTML module 2
Groot scherm en ipad landscape
3.3 Flexbox 3

33. HTML module 2
Logo_ijsbeer3.png /
bg kleur aliceblue
#E8F0FA
Google fonts: Roboto:100
Mobile
bg kleur aliceblue
en ronde hoeken
3.3 Flexbox 3

34. HTML module 2
Mobile
3.3 Flexbox 3