Flexbox in CSS & HTML (Tutorial) - responsieve Lay-outs ontwikkelen.

Dit is wat je kunt verwachten in de cursus over Flexbox in CSS en HTML.

Wat is Flexbox-layout en waarom zou je het eigenlijk gebruiken?

Hier wordt het project opgezet waar vervolgens verder aan gewerkt zal worden.

Ik presenteer hier de voorbeeldstructuur en de debugmogelijkheden geïntegreerd in VS-Code met de MS Edge-tools. Bovendien wordt in deze video voor het eerst het Flexbox-layout geactiveerd en de richting ingesteld.

Hoe kan de ruimte gelijkmatig of in specifieke verhoudingen worden verdeeld in het Flexbox-opmaakmodel?

Een kleine oefening waarbij je niet om een beetje (eenvoudige) wiskunde heen kunt.

Hier presenteer ik een horizontaal ontwerp met twee zijbalken, dat responsief is en zich aanpast aan de breedte.

Kindelementen kunnen worden uitgelijnd door de flex-container langs de hoofdas. Hier laat ik zien hoe dit kan worden ingesteld.

Niet alleen bij de container kun je de uitlijning van alle kinderelementen instellen, met align-self kun je dit ook verschillend afstellen bij de individuele elementen.

Een kleine oefening voor het plaatsen van een dobbelsteen.

Niet alleen langs de dwarsas, maar ook langs de hoofdas kan er in een flex-container uitgelijnd worden. ;-)

Een klein voorbeeld van hoe het uitlijnen langs de hoofdas goed gebruikt kan worden voor een veelvoorkomend ontwerp.

Wie flexibel wil zijn, moet ook de grootte van de kind-elementen kunnen specificeren, onafhankelijk van de specifieke breedte of hoogte. Gelukkig is er de flex-basis--eigenschap waarmee dit precies bereikt kan worden. Als je de flex-direction verandert, verandert een breedte zo in een hoogte en vice versa. 

Hoeveel moet een element groeien als er meer ruimte beschikbaar is dan aangegeven door de flex-basis? Dit kan specifiek worden ingesteld met flex-grow.

Met hoeveel moet een element krimpen als er minder ruimte is dan de flex-basis aangeeft? Dit kan specifiek worden ingesteld met flex-shrink. 

Kindelementen kunnen niet alleen verkleinen als er minder ruimte is, maar ze kunnen ook worden omgebroken door de container. Hoe je dit met flex-wrap kunt controleren, laat ik zien in deze video.

flex-direction en flex-wrap kunnen gecombineerd worden gespecificeerd in de eigenschap flex-flow. Dit is zelfs zinvol als alleen flex-direction wordt ingesteld, aangezien flex-flow korter is. ;-)

Een taak over flex-wrap.

Afstand moet soms worden gehouden om het menselijk oog niet onnodig ongemakkelijk te maken. Gelukkig is er met gap een CSS-eigenschap die dit precies voor elkaar krijgt bij de kinderelementen van een flex-container.

Orde moet er zijn, vooral bij webinterfaces, omdat deze goed bruikbaar moeten zijn. De volgorde moet soms ook individueel worden vastgesteld, zonder elementen in het DOM te verplaatsen. Hiervoor is de CSS-eigenschap order zeer geschikt, waarmee men de zichtbare volgorde van de elementen eenvoudig kan wijzigen.

Laten we eens kijken of jullie de volgorde hebben begrepen. Hier is zelfs een tweede manier om hetzelfde resultaat te behalen, maar daar zullen jullie vast ook op komen.

Het gebeurt heel vaak dat men elementen en vooral tekst horizontaal en verticaal (!) wil centreren. Wat vroeger een gedoe was zonder Flexbox, is nu een fluitje van een cent met Flexbox.

Wie kent hem niet, de 3-koloms lay-out? Als deze zich nog aan de beschikbare ruimte aanpast, ontbreekt er niet veel meer voor een responsief ontwerp.

Zijn er websites zonder formulieren? Als dat zo is, dan zijn dat er niet veel. Daarom is het erg belangrijk om ze aantrekkelijk te ordenen, wat gelukkig geen probleem is met Flexbox.

Heel vaak krijg je te maken met geneste lay-outs, maar met Flexbox-layouts vormen zelfs die geen grote uitdaging meer.

Er zijn inmiddels webchatclients in overvloed en er zijn er nog meer bijgekomen met de AI-chatbots. Maar hoe kun je een chatbox maken met Flexbox? Dat laat ik zien in deze video.

Minimaal sinds Web 2.0 vind je op bijna elke website een galerij. In deze video beschrijf ik hoe zo'n layout bijvoorbeeld prachtig kan worden geïmplementeerd met Flexbox.

Nu zou alles duidelijk moeten zijn met betrekking tot het Flexbox-layout. Tot slot zal ik beschrijven wat jullie zouden moeten hebben geleerd, wat jullie nog kunnen doen en welke mooie CSS-layoutmogelijkheden er nog meer zijn.