Flexbox i CSS & HTML (Tutorial) – udvikling af responsive layouts

Dette kan du forvente i kurset om Flexbox i CSS og HTML.

Hvad er Flexbox-layout, og hvorfor skal man overhovedet bruge det?

Her opsættes projektet, hvor der derefter arbejdes videre.

Jeg præsenterer her eksempelstrukturen og de integrerede fejlfindelsesmuligheder i VS Code med MS Edge-værktøjerne. Desuden aktiveres flexbox-layoutet for første gang i denne video, og retningen indstilles.

Hvordan kan pladsen fordeles ligeligt eller i bestemte forhold i Flexbox-layoutet?

En lille øvelse, hvor man ikke kommer uden om lidt simpel matematik.

Her præsenterer jeg et horisontalt layout med to sidepaneler, der responsivt tilpasser sig bredden.

Børneelementer kan justeres af flex-containeren langs tværaksen. Her viser jeg, hvordan det kan konfigureres.

Ikke kun i containeren kan man justere alle børneelementers placering, med align-self kan det også justeres forskelligt for individuelle elementer.

En lille øvelse i individuel justering med en terning.

Ikke kun langs tværakslen kan justeres i en fleksecontainer, der kan også foretages en del justeringer i justeringen langs hovedakslen. ;-)

Et lille eksempel på, hvordan man kan bruge justering langs hovedaksen til en almindelig layout meget effektivt.

Hvis du vil være fleksibel, skal du også kunne angive størrelsen på børneelementerne uafhængigt af den konkrete bredde eller højde. Heldigvis er der flex-basis-Property, som gør det muligt at opnå præcis dette. Når du ændrer flex-direction, bliver en bredde til en højde og omvendt. 

Hvor meget skal et element vokse, hvis der er mere plads til rådighed end angivet af flex-basis? Dette kan justeres præcist ved hjælp af flex-grow.

Hvor meget bør et element krympe, hvis der er mindre plads til rådighed end angivet flex-basis? Dette kan kontrolleres ved hjælp af flex-shrink.

Barn-elementer kan ikke kun krympe, når der er mindre plads, men kan også bryde ud af beholderen. Hvordan man styrer dette med flex-wrap, viser jeg i denne video.

flex-direction og flex-wrap kan kombineres i egenskaben flex-flow. Det giver endda mening, selv hvis man kun vil indstille flex-direction, fordi flex-flow er kortere. ;-)

En opgave om flex-wrap.

Afstand er nødvendigt nogle gange for ikke at gøre det unødvendigt ubehageligt for det menneskelige øje. Heldigvis er der med gap en CSS-egenskab, der netop opnår dette med børneelementerne i en Flex-container.

Rækkefølge skal være, især på webgrænseflader, for de skal jo være lette at betjene. Nogle gange skal rækkefølgen også defineres individuelt uden at flytte elementer i DOM'en. Til dette formål er CSS-egenskaben order meget velegnet, hvormed man let kan ændre synlig rækkefølge af elementer.

Lad os se, om I har forstået rækkefølgen. Her er endda en anden mulighed for at opnå det samme resultat, men det er I sikkert også klar over.

Det sker meget ofte, at man gerne vil centrere elementer og især tekst horisontalt og vertikalt (!). Hvad der før var en kamp uden Flexbox, er nu en leg med Flexbox.

Hvem kender ikke den 3-spalter? Hvis den stadig tilpasser sig tilgængelig plads, mangler der ikke meget for at opnå responsivt design.

Findes der hjemmesider uden formularer? Hvis ja, så er de ikke mange. Derfor er det meget vigtigt at placere dem på en tiltalende måde, hvilket heldigvis ikke er noget problem med Flexbox.

Meget ofte står man over for indlejrede layouts, men med Flex Layout er selv sådanne ikke længere en stor udfordring.

I mellemtiden findes der webchatklienter som sand ved havet, og med KI-chatbots er der kommet endnu flere til. Men hvordan kan man implementere en chat med Flexbox? Det viser jeg i denne video.

Senest siden Web 2.0 kan man finde et galleri på næsten hver hjemmeside. I denne video beskriver jeg, hvordan en sådan layout for eksempel kan implementeres på en vidunderlig måde med Flexbox.

Nu bør alt være klart med hensyn til Flex-layout. Til sidst beskriver jeg, hvad I burde have lært, hvad I stadig kan gøre, og hvilke skønne CSS-layoutmuligheder der stadig er.