SlideShare a Scribd company logo
3.2 Flexbox 2
HTML module 33.2 Flexbox 2
Lesdoel!
Flexbox
HTML module 33.2 Flexbox 2
Deze les behandelen we de volgende flex-onderdelen
flex-Wrap / order / align-items / justify content
HTML module 3
Flex-wrap
flex-wrap:
wrap
wrap-reverse
3.2 Flexbox 2
no-wrap (default)
no-wrap (default)
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
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
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
HTML module 33.2 Flexbox 2
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
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
HTML module 33.2 Flexbox 2
align-items:
flex-start(default)
flex-end
center
stretch
baseline
HTML module 33.2 Flexbox 2
align-items:
flex-start(default)
flex-end
center
stretch
baseline
HTML module 33.2 Flexbox 2
align-items:
flex-start(default)
flex-end
center
stretch
baseline
HTML module 33.2 Flexbox 2
align-items:
flex-start(default)
flex-end
center
stretch
baseline
HTML module 33.2 Flexbox 2
align-items:
flex-start(default)
flex-end
center
stretch
baseline
HTML module 3
align-items Column
3.2 Flexbox 2
HTML module 3
align-items Column
3.2 Flexbox 2
HTML module 3
Opdracht
Maak onderstaand voorbeeld na.
We nemen hier max 15 minuten de tijd voor!
3.2 Flexbox 2
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
HTML module 33.2 Flexbox 2
justify-content:
flex-start(default)
flex-end
center
space-between
space-around
space-evenly
justify-content
HTML module 33.2 Flexbox 2
justify-content:
flex-start(default)
flex-end
center
space-between
space-around
space-evenly
justify-content
HTML module 33.2 Flexbox 2
justify-content:
flex-start(default)
flex-end
center
space-between
space-around
space-evenly
justify-content
HTML module 33.2 Flexbox 2
justify-content:
flex-start(default)
flex-end
center
space-between
space-around
space-evenly
justify-content
HTML module 33.2 Flexbox 2
justify-content:
flex-start(default)
flex-end
center
space-between
space-around
space-evenly
justify-content
HTML module 33.2 Flexbox 2
justify-content:
flex-start(default)
flex-end
center
space-between
space-around
space-evenly
justify-content
HTML module 33.2 Flexbox 2
justify-content:
flex-start(default)
flex-end
center
space-between
space-around
space-evenly
justify-content
HTML module 3
Opdracht
Maak onderstaande na
We nemen hier max 15 minuten de tijd voor!
3.2 Flexbox 2
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.
wireframe opdracht !
HTML module 33.1 Intro Flexbox

More Related Content

Featured

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
Christy Abraham Joy
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
MindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
Alireza Esmikhani
 

Featured (20)

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 

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
  • 11. HTML module 33.2 Flexbox 2 align-items: flex-start(default) flex-end center stretch baseline
  • 12. HTML module 33.2 Flexbox 2 align-items: flex-start(default) flex-end center stretch baseline
  • 13. HTML module 33.2 Flexbox 2 align-items: flex-start(default) flex-end center stretch baseline
  • 14. 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
  • 20. HTML module 33.2 Flexbox 2 justify-content: flex-start(default) flex-end center space-between space-around space-evenly justify-content
  • 21. HTML module 33.2 Flexbox 2 justify-content: flex-start(default) flex-end center space-between space-around space-evenly justify-content
  • 22. HTML module 33.2 Flexbox 2 justify-content: flex-start(default) flex-end center space-between space-around space-evenly justify-content
  • 23. HTML module 33.2 Flexbox 2 justify-content: flex-start(default) flex-end center space-between space-around space-evenly justify-content
  • 24. HTML module 33.2 Flexbox 2 justify-content: flex-start(default) flex-end center space-between space-around space-evenly justify-content
  • 25. 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