5. CSS Display

• Software Developer [WEB_A]
• MBO
• Studiejaar 1

WEB

Webdevelopment-II

Les 5 / Week 5

CSS Display

Week 5 // WEB

Display

September 2020

Het element is zo breed als de content padding en border strekt:

1. display: block
2. display: fixed
3. display: inline
4. display: grid

Het element is zo breed als de ingestelde breedte (width: ....)

1. display: grid
2. display: inline
3. display: block
4. display: position

Met welke property lijn ik mijn class "wrapper" uit in het midden van mijn pagina?

1. display: class; margin: auto 0;
2. display: inline; text-align: center;
3. padding: 0; margin: 0;
4. width: 70%; margin: 0 auto;

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

{

}

;

:

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

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

Nog even over...

• Pseudoclasses (bijv. hover / click / visited)
• box-shadow
• kleuren: hexa / rgb

display: flex

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. 

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/

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/

flex-direction

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

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

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/

!

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.

Gebruik van display

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. 

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.

Opdracht 5.2: Flexbox Froggy

Op de volgende pagina kun je op een leuke manier oefenen met flexbox.

https://flexboxfroggy.com/#nl

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. 

Klaar met Werkblad

Klik aan als je klaar bent

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