5. CSS Display

WEB
Webdevelopment-II
Les 5 / Week 5
CSS Display
1 / 22
next
Slide 1: Slide
Software Developer [WEB_A]MBOStudiejaar 1

This lesson contains 22 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 180 min

Items in this lesson

WEB
Webdevelopment-II
Les 5 / Week 5
CSS Display

Slide 1 - Slide

Week 5 // WEB
Display

September 2020

Slide 2 - Slide

Beschrijf wat een display: block doet als je dit toepast op een element.

Slide 3 - Open question

Beschrijf wat een display: inline doet met je element in CSS.

Slide 4 - Open question

Met welke property lijn ik mijn class "wrapper" uit in het midden van mijn pagina?
A
display: class; margin: auto 0;
B
display: inline; text-align: center;
C
padding: 0; margin: 0;
D
width: 70%; margin: 0 auto;

Slide 5 - Quiz

Op welke manier geef ik alles in de footer een groene achtergrondkleur?

Slide 6 - Mind map

{
}
;
:
Op welke manier kan ik mijn a-elementen met 1 regel code links en rechts 10 pixels en boven en onder 5 pixels ruimte ín het element geven? 
a
.a
*
padding
margin
5px 10px
10px 5px

Slide 7 - Drag question

Hoe zorg ik ervoor dat van de onderstaande HTML-code er in CSS een blauwe gestippelde rand van 1 pixel komt om alle a-elementen in totaal heen (dus niet elk individueel element)

{
}
:
;
header
links
.links
border
1px solid black
1px dotted blue
1px solid blue
padding

Slide 8 - Drag question

display: flex

Slide 9 - Slide

display: flex
  • Display:flex beschouwt een element als een flexbox-container. Dat wil zeggen: het element dat je aanspreekt kan in zijn geheel worden aangesproken en je kunt alle elementen direct onder het element (een class in die class bijvoorbeeld) een bepaalde uitlijning geven. 
  • Dat kan heel handig zijn als je elementen in een navigatiebalk bijvoorbeeld gelijkmatig wilt verdelen over de regel, alles op dezelfde lijn wilt zetten op een regel of bijvoorbeeld content gelijkmatig over de pagina wilt verdelen. 

Slide 10 - Slide

justify-content
. Elementen die bij elkaar horen, maar wel verschillende groottes hebben.
Het zorgt voor de uitlijning rond de hoofdas. Het helpt om overgebleven vrije ruimte op je pagina gelijkmatig te verdelen, maar ook als je items de volledige size hebben bereikt, maar toch op 1 regel dienen te staan.







https://css-tricks.com/snippets/css/a-guide-to-flexbox/














https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Slide 11 - Slide

align-items
Property ‘align-items’ lijnt een flex-container uit over de dwarsas van de huidige regel. Het is als de justify-content-property, enkel dan verticaal in plaats van horizontaal.





https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Slide 12 - Slide

flex-direction








https://css-tricks.com/snippets/css/a-guide-to-flexbox/




https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Slide 13 - Slide

flex-wrap
Flex-items zullen proberen allemaal op één regel te passen. Dit kun je veranderen door de items de mogelijkheid te geven om te ‘wrappen’ zoals nodig met de breedte instelling van de pagina











https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Slide 14 - Slide

!
Flexbox pas je toe op de parent van een element of class. De properties worden uitgevoerd op de childs van het betreffende element of class. 



In het voorbeeld hierboven wordt flex toegepast op de children van nav, wat in dit geval de a-elementen zijn.

Slide 15 - Slide

Gebruik van display

Slide 16 - Slide

Opdracht 5.1: navigatiebalk inrichten met flex
1. Download uit Itslearning uit de map ‘Lesmateriaal’ de map ‘flex’ uit week 4. In dit document zit al wat HTML-code en ook wat CSS. Jij moet nu wat HTML en CSS gaan toevoegen om het document er netjes uit te laten zien.
2. We voegen eerst classes toe aan onze gemaakte code, zodat we daarna kunnen gaan spelen met de locatie van de elementen.
3. Zet een <header> element om het gehele stuk HTML-code in je body heen (let op: header hoort wel ín de body). Merk op dat de achtergrondkleur verandert omdat er een CSS-selector de achtergrondkleur van de header verandert.
4. Zet een class genaamd ‘logo-name’ om je afbeelding en <h2> heen. Je <div class> begint dus een regel vóór de <img> en eindigt de regel na </h2> Zorg dat je img en h2 goed geindent worden.

5. Zet een <nav>-element om je <a>-elementen heen. Je begint dus een regel voor de eerste <a> en eindigt met </nav> na je laatste </a> op een nieuwe regel. 




Slide 17 - Slide

Opdracht 5.1 (vervolg)
1. Geef de header een display: flex en bekijk het effect in de browser. De class ‘logo-name’ en element nav worden uitgelijnd op 1 lijn.
2. We willen alle elementen centreren in het midden van de pagina. Geef property justify-content de waarde center.
Kijk in je browser wat er gebeurt. Als het goed is zijn alle elementen in het midden van de pagina gecentreerd.
1. Spreek de class ‘logo-name’ aan in CSS en geef deze een display: flex;
2. We willen de elementen <img> en <h2> op dezelfde verticale lijn uitlijnen, zodat ze naast elkaar staan. Geef class ‘logo-name’ ook de property align-items de waarde center;
Kijk in de browser wat er gebeurt. De elementen <img> en <h2> staan nu op een verticale lijn naast elkaar (de h2 staat halverwege de afbeelding).
1. Spreek de <nav> aan in CSS en geef deze display: flex;
2. Geef de nav een justify-content: space-between; en zet align-items op center om ze in het midden uit te lijnen.




Slide 18 - Slide

Opdracht 5.2: Flexbox Froggy
Op de volgende pagina kun je op een leuke manier oefenen met flexbox.

Slide 19 - Slide

Opdracht 5.3: werkblad met Flexbox
Je krijgt een werkblad waarbij je verschillende flexbox-properties zult moeten toepassen. Je moet code toevoegen en gebruikt daarbij de kennis die je al eerder opgedaan hebt. 

Slide 20 - Slide

Welke vraag zou jij bedenken als je de toets over de afgelopen 5 weken ging maken?

Slide 21 - Open question

Slide 22 - Slide