In de afgelopen lessen heb je elementen alleen nog maar onder elkaar gezet. Wil je de mogelijkheid om elementen ook naast elkaar te zetten? Dan kan je Flexbox gebruiken. Naast de mogelijkheid om elementen naast elkaar te zetten, krijg je ook de mogelijkheid om de uitlijning van de elementen te bepalen. Kijk maar eens naar het volgende voorbeeld:
Met slechts 4 regels code van Flexbox krijg je het eindresultaat dat de drie elementen naast elkaar staan, dat er een ruimte tussen de elementen zit, dat ze als geheel de hele breedte vullen en dat element 1 dubbel zo groot is als element 2 en 3. Maar het volgende is bijvoorbeeld ook mogelijk:
Om dit eindresultaat te krijgen heb je zelfs maar 3 regels code van Flexbox nodig. Hopelijk krijg je hiermee al een eerste indruk wat de kracht van Flexbox is en dat je met weinig code totaal andere layouts kan maken dan je tot nu toe hebt gedaan.
Het is met Flexbox trouwens ook mogelijk om elementen weer onder elkaar te zetten met alle opties tot uitlijnen zoals je net hebt gelezen.
Naast Flexbox heb je ook nog Grid. Deze techniek staat ook in de Expert-kolom in het beoordelingsmodel. Wil je hier meer over weten? Zie de hulpbronnen bij de eindopdracht.
Zoals gezegd kan je met een paar regels code al veel voor elkaar krijgen met Flexbox, maar je moet wel eerst weten hoe
het werkt. Het begint met in de CSS een HTML-tag instellen als Flexbox. Al zijn directe children kunnen vervolgens naar wens
worden ingesteld met de Flexbox-opties. Zie de afbeelding hieronder. Links in de afbeelding zie je de code die we voor
dit voorbeeld gebruiken: de <main> met daarin drie keer een <section>. In HTML-termen spreken we er nu van dat
de <main> de parent is en de drie keer <section> die erin staan de children. Aan de rechterkant van onderstaande
afbeelding zie je deze parent/child relatie ook nog eens met kleuren uitgebeeld.
De termen parent en children komen vaak terug bij HTML, dus onthoud ze goed!
Let erop dat in bovenstaand voorbeeld alleen de <main> een Flexbox is en dus alleen de drie children kunnen
worden vormgegeven met Flexbox. Dus stel, in de tweede <section> staat ook inhoud die je met Flexbox wil vormgeven,
dan stel je die <section> ook simpelweg in als Flexbox en dan heb je ook weer alle mogelijkheden. Zo krijg je dus een
Flexbox, in een Flexbox, in een Flexbox, etc. Dit is goed! We raden aan om zoveel mogelijk Flexbox te gebruiken om jouw
layout te bepalen.
De Flexbox-opties zijn in te delen in twee categorieën: parent-opties en child-opties. Zoals de naam al verraadt stel je de parent-opties in op de parent en heeft invloed op alle children. De child-opties stel je op de children zelf in en heeft alleen invloed op de children waarop je het instelt.
Flexbox-opties parent
| Optie | Omschrijving | Voorbeeld |
|---|---|---|
| display: flex; | Hiermee stel je een HTML-tag in als Flexbox. | display: flex; |
| flex-direction | Instellen of de children in een rij of kolom getoond moeten worden. | flex-direction: column; |
| justify-content | Bepaalt de uitlijning op de hoofdas (dus de richting die gekozen is bij flex-direction). |
justify-content: center; |
| align-items | Bepaalt de uitlijning op de dwars-as (dus het tegenovergestelde van wat gekozen is bij flex-direction). |
align-items: flex-end; |
| flex-wrap | Bepaalt of de Flexbox op één rij moet blijven, of zich mag verdelen over meerdere rijen. | flex-wrap: wrap; |
| align-content | Wanneer flex-wrap op wrap staat en de content valt over meerdere rijen, is met deze optie de uitlijning tussen deze rijen in te stellen. |
align-content: space-between; |
| gap | Bepaalt de ruimte tussen de children. | gap: 20px; |
Flexbox-opties child
| Optie | Omschrijving | |
|---|---|---|
| flex-grow | Bepaalt hoeveel deze child mag groeien t.o.v. de andere children. | flex-grow: 2; |
| flex-shrink | Bepaalt hoeveel deze child mag krimpen t.o.v. de andere children. | flex-shrink: 1; |
| flex-basis | Bepaalt de standaardgrootte van de child voordat de resterende ruimte wordt verdeeld. | flex-basis: 200px; |
| flex | Dit is de shorthand-notatie van bovenstaande drie opties. Het wordt aangeraden om deze te gebruiken. | flex: 1; |
| align-self | Deze optie werkt hetzelfde als align-items, maar wordt hier alleen toegepast op het specifieke child. | align-self: flex-end; |
Voor het volledige overzicht, zie deze documentatie.
Om erachter te komen wat er allemaal mogelijk is met Flexbox gebruik je de inspector. Hierin kun je namelijk met
simpelweg drukken op knopjes veel parent-opties uitproberen. Inspecteer een HTML-tag die staat ingesteld als Flexbox en
klik rechts van display: flex op het Flexbox-knopje. Voor meer info, bekijk de volgende
video: https://developer.chrome.com/docs/devtools/css/flexbox/
Reminder: je opent de inspector door met de rechter muistoets op een specifiek HTML-element te klikken en vervolgens op Inspecteren, óf met de sneltoets ⌥⌘i op Mac en F12 op Windows.
- Flexbox basics cheatsheet
- A Complete Guide to Flexbox
- Video: CSS Flexbox in 100 Seconds
- Video waarin flex-grow, flex-shrink en flex-basis wordt uitgelegd met voorbeelden
Klaar met het hoofdstuk over Flexbox?
Klik dan hier om naar de minipuzzels over Flexbox te gaan.
In de vorige lessen heb je al vaker met <nav> gewerkt en in deze les duiken we daar dieper op in. Je weet al dat je in de <nav> een <a> invoert voor ieder linkje die je wilt tonen. Maar hoe stel je dit linkje correct in? En hoe kan je deze vormgeven? Dat leer je in deze les.
Allereerst: wat is een <a> eigenlijk? Het doel van deze HTML-tag is dat de gebruiker erop kan klikken en dat die naar een ander stukje content wordt gebracht. Dus stel, je bent op een webshop en je wilt alle producten bekijken, dan klik je in het hoofdmenu (wat dus een <nav> is) op het linkje Producten (wat dus een <a> is), zodat je naar die betreffende pagina wordt gebracht.
De HTML van een navigatie ziet er doorgaans ongeveer als volgt uit:
<nav>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</nav>Je begint met de <nav> met daarin één of meerdere <a>'s. Tot zover niets nieuws, dit heb je al meerdere malen gemaakt. Je ziet bij het attribuut href nu een # staan in dit voorbeeld. Op die plek komt de daadwerkelijke link te staan waarnaar genavigeerd moet worden. Dus waar de gebruiker naartoe moet worden gestuurd wanneer die op de <a> klikt. Hiervoor heb je twee opties die hieronder worden toegelicht.
Linken binnen dezelfde pagina
Het is mogelijk om te linken naar een onderdeel op dezelfde pagina. Dus stel, er staan drie secties op jouw pagina, dan zou je in de navigatie per sectie een <a> in de <nav> kunnen plaatsen. Dit is vooral handig bij hele lange pagina's, zodat je gemakkelijk van de ene sectie naar de andere kan klikken. Een voorbeeld van de code hiervoor vind je terug in de Cheatsheet HTML & CSS op pagina 2.
Linken naar een andere pagina
Het is ook mogelijk om te linken naar een andere pagina. Dit kan een pagina van dezelfde website zijn, maar ook van een andere. De meeste websites bevatten meerdere pagina's. Zo heb je bijvoorbeeld vaak een homepage, een over-ons-pagina en een contactpagina. De navigatie voor een website met deze drie pagina's zou er als volgt uit kunnen zien:
<nav>
<a href="index.html">Home</a>
<a href="over-ons.html">Over ons</a>
<a href="contact.html">Contact</a>
</nav>Hier zie je bijvoorbeeld dat bij het linkje naar de contactpagina de href staat ingesteld op contact.html. Dit betekent dat er in jouw project ook een bestand moet staan die contact.html heet en die wordt dan geopend wanneer je op het linkje klikt.
Bij het linkje voor de homepage zie je in de href overigens index.html staan, hierin staat namelijk de homepage.
Tot slot, wanneer je een link wilt leggen naar een andere website, dan moet je de volledige URL invoeren, dus vanaf https://. Ook is het aan te raden om deze externe link in een nieuw tabje te openen, zodat jouw eigen website ook nog in een tabje open blijft staan. Dit stel je in met het attribuut target en de waarde moet dan _blank zijn. Dus stel, je wilt een linkje maken die naar de website van CMGT gaat, dan zou dat er als volgt uitzien:
<a href="https://cmgt.hr.nl/" target="_blank">Google</a>Het vormgeven van de <nav> werkt zoals met iedere andere HTML-tag, maar de <a> heeft enkele uitzonderingen die hier worden uitgelegd. Het is namelijk belangrijk om te weten dat een <a> verschillende states heeft. Dit betekent dat je afhankelijk van de situatie de <a> een andere styling kan geven. Het gaat om de volgende states:
- Standaard: de normale state wanneer geen andere van toepassing is;
- hover: wanneer de muisaanwijzer op de link is geplaatst (zonder te klikken);
- active: tijdens het klikken op de link;
- visited: wanneer de link al eerder aangeklikt is;
- focus: wanneer de focus op het linkje staat, meestal doordat je met de tabtoets door de pagina heen gaat.
Bovenstaande states kun je in de CSS selecteren door het gebruik van zogenaamde pseudo-classes. Deze classes hoef je niet handmatig in de HTML in te voeren, maar krijgt de HTML-tag vanzelf. Meer info is hier te lezen op W3Schools. Zo'n pseudo-class geef je in de CSS met een : aan. In het volgende voorbeeld zie je hoe je de kleur van de <a> kan veranderen wanneer je muisaanwijzer erop staat:
a:visited {
color: red;
}
a:hover {
color: blue;
}
a:active {
color: purple;
}
Klaar met het hoofdstuk over navigatie?
Klik dan hier om naar de minipuzzels over navigatie te gaan.
Klik hier om naar de minipuzzels over Flexbox te gaan.
Klik hier om naar de minipuzzels over navigatie te gaan.
Download de startcode als je dat nog niet had gedaan (zie Brightspace) en bouw vervolgens het volgende ontwerp na (klik op de afbeelding om te vergroten).
Let op, het gaat om twee pagina's: de homepage met recepten en de detailpagina van een recept. Wanneer er op de homepage wordt geklikt op Bekijk recept moet er dus naar de detailpagina worden genavigeerd.
De receptomschrijving op de detailpagina moet een échte lijst zijn. Gebruik hiervoor de tag <ol>.
Ook hierbij geldt weer: wanneer er een handje op een linkje wordt getoond, dan wordt de hover-state getoond.
Voor deze opdracht heb je de volgende kleurcodes nodig:
| Hex | RGB |
|---|---|
#000000 |
rgb(0,0,0) |
#FFFFFF |
rgb(255,255,255) |
#457B9D |
rgb(69,123,157) |
#A0ABC0 |
rgb(160, 171, 192) |
Homepage
Detailpagina recept
Als je wat extra uitdaging wilt, dan kan je ook onderstaande wireframe nabouwen. Hierin zitten extra elementen die je door zelfstudie moet zien te achterhalen. De afbeeldingen zijn te vinden in de startcode (zie Brightspace). Je mag de startcode gebruiken, maar je mag ook alles zelf maken.
Let op, ook bij deze opdracht gaat het om twee pagina's: de homepage met recepten en de detailpagina van een recept. De detailpagina is dezelfde als bij de reguliere opdracht, maar hij staat ook hieronder nog weergegeven. Wanneer er op de homepage wordt geklikt op Bekijk recept moet er dus naar de detailpagina worden genavigeerd
Zorg er tot slot ook voor dat de knoppen Bekijk recept netjes tegen de onderkant uitlijnen, zoals ook in het ontwerp te zien is.
Homepage advanced
Detailpagina recept