Flexbox i CSS & HTML (Självstudiekurs) – utveckla responsiva layouter

Det här kan du förvänta dig i kursen om Flexbox i CSS och HTML.

Vad är Flexbox-layout och varför ska man överhuvudtaget använda det?

Här sätts projektet upp, där det sedan fortsätts att arbeta.

Jag introducerar här exempelstrukturen och debugginsmöjligheterna integrerade i VS Code med MS Edge-verktygen. Dessutom aktiveras flexbox-layouten för första gången i den här videon och riktningen justeras.

Hur kan utrymmet fördelas jämnt eller i särskilda proportioner i Flexbox-layouten?

En liten övning där man inte kommer undan lite (enkel) matematik.

Här presenterar jag en horisontell layout med två sidofält som responsivt anpassar sig till bredden.

Barnlement kan justeras av flexbehållaren längs tväraxeln. Här visar jag hur detta kan ställas in.

Inte bara med behållaren kan man justera alla barnkomponenters justering, med align-self kan man också justera enskilda element på olika sätt.

En liten övning för individuell justering med en tärning.

Det är inte bara längs tväraxeln som går att justera i en flexbehållare, det går också att justera en hel del längs huvudaxeln. ;-)

Ett litet exempel på hur man kan dra nytta av att justera längs huvudaxeln för en vanlig layout.

För att vara flexibel måste man kunna ange storleken på barnens element oberoende av den specifika bredden eller höjden. Lyckligtvis finns det flex-basis-egenskapen, med vilken man kan uppnå just detta. Genom att ändra flex-direction blir en bredd till en höjd och vice versa. 

Hur mycket ett element ska växa när det finns mer plats än vad flex-basis anger? Detta kan justeras målinriktat med flex-grow.

Med hur mycket ska en artikel krympa när det finns mindre plats än vad flex-basis anger? Detta kan justeras exakt med flex-shrink. 

Barnkomponenter kan krympa inte bara när det finns mindre utrymme, utan också brytas av behållaren. Hur man kontrollerar detta med flex-wrap, visar jag i den här videon.

flex-direction och flex-wrap kan kombineras i egenskapen flex-flow. Det är till och med meningsfullt att göra det även om man endast vill ange flex-direction, eftersom flex-flow är kortare. ;-)

En uppgift om flex-wrap.

Mellanrum behövs ibland för att inte göra det alltför obekvämt för det mänskliga ögat. Lyckligtvis finns det en CSS-egenskap, gap, som åstadkommer just detta för barnen i en flexbehållare.

Ordning måste vara, speciellt på webbgränssnitt, eftersom de bör vara lättanvända. Ordningen måste ibland också fastställas individuellt, utan att flytta element i DOM. För detta är CSS-egenskapen order mycket lämplig, med vilken man enkelt kan ändra den synliga ordningen av element.

Testa om ni har förstått ordningen. Här finns till och med en andra möjlighet att uppnå samma resultat, men ni kommer säkert också på det.

Det är mycket vanligt att man vill centrera element och framför allt text horisontellt och vertikalt (!). Vad som var en plåga före Flexbox är en barnlek med Flexbox.

Vem känner inte till den 3-spaltade layouten? Om den dessutom anpassar sig till tillgängligt utrymme, saknas inte mycket för responsiv design.

Finns det webbplatser utan formulär? Om ja, är det inte många. Därför är det väldigt viktigt att placera dem på ett tilltalande sätt, vilket tack vare flexbox inte är något problem.

Väldigt ofta möter man komplexa layouter, men med Flexbox-layout är inte ens sådana någon stor utmaning längre.

Nuförtiden finns det webbchattklienter som sand vid havet och med AI-chattbotar har ännu fler tillkommit. Men hur kan man implementera en chatt med Flexbox? Det visar jag i den här videon.

Senast sedan Web 2.0 hittar man nästan på varje webbplats en galleri. I den här videon beskriver jag hur en sådan layout till exempel kan implementeras med Flexbox på ett underbart sätt.

Nu bör allt vara klart när det gäller Flex-layout. Till sist beskriver jag vad ni bör ha lärt er, vad ni fortfarande kan göra och vilka andra fina CSS-layout-möjligheter det finns.