Meester worden in CSS Flexbox

Meester worden in CSS Flexbox

Lesdoelen

Aan het einde van de les kun je uitleggen wat Flexbox is, de eigenschappen van de container en items benoemen en deze toepassen in een voorbeeld.

Wat weet je al over CSS Flexbox?

Wat is flexbox

CSS Flexbox is een lay-outmodel waarmee je een flexibele en efficiënte manier hebt om items te ordenen binnen een container.

Containers en items

Een flex-container bevat de items die erin worden geplaatst. De items binnen de container worden flex-items genoemd.

Container properties

Een aantal belangrijke eigenschappen van een flex-container zijn:

• display
  
• flex-direction
  
• justify-content
  
• align-items
  
• flex-wrap
  

Item properties

Voor flex-items zijn de belangrijkste eigenschappen:

• order
  
• flex
  
• align-self
  
• flex-basis
  

Flexbox cheatsheet

Voor flex-items zijn de belangrijkste eigenschappen:

• order
  
• flex
  
• align-self
  
• flex-basis
  

Design

Containers

Flex containers en items

Containers

Design

Containers

Flex containers en items

Containers

Flex containers en items

CCS code

Individuele oefening

• Kies een website naar keuze;
  
• Teken het design uit in flex containers en flex items;
• Maak de layout van de website na met een index.html en style.css
• Zet de bestanden in een ZIP en lever deze in in Itslearning

Lesdoelen toetsen

Nu volgt een korte quiz om te kijken 

Wat is flexbox

1. Flexbox is een Layout model om componenten flexibeler te maken
2. Flexbox moet je gebruiken in je CSS
3. Flexbox zorgt ervoor dat je pagina meeschaalt
4. Flexbox zorgt ervoor dat je pagina overzichtelijker wordt

Wat is geen flexbox container property?

1. align-content
2. justify-content
3. flex-direction
4. order

Wat is geen flexbox item property

1. align-self
2. flex-grow
3. justify-content
4. order