Flexboks i CSS & HTML (Veiledning) - utvikle responsivt oppsett

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

Hva er Flexbox-layout og hvorfor bør man i det hele tatt bruke det?

Her blir prosjektet satt opp, deretter vil det bli jobbet videre.

Jeg presenterer her eksempelstrukturen og de integrerte feilsøkingsmulighetene i VS Code med MS Edge-verktøyene. I tillegg blir flexbox-layoutet aktivert for første gang i denne videoen og retningen er satt.

Hvordan kan plassen deles jevnt eller i bestemte proporsjoner i Flexbox-layoutet?

En liten øvelse der man ikke kommer utenom litt (enkel) matematikk.

Her presenterer jeg et horisontalt oppsett med to sidekolonner som tilpasser seg responsivt til bredden.

Barn-elementer kan justeres av flexbehålleren langs tverraksen. Her viser jeg hvordan dette kan settes opp.

Ikke bare med Container kan du justere justeringen av alle barneelementene, med align-self kan du også justere individuelt for hvert enkelt element.

En liten øvelse for å justere individuelt med en kube.

Ikke bare langs cross-aksen kan man justere i en flexbeholder, det er også mye justering som kan gjøres langs hovedaksen. ;-)

Et lite eksempel på hvordan man kan bruke justering langs hovedaksen for en vanlig oppsett veldig bra.

Hvis man ønsker å være fleksibel, må man også kunne angi størrelsen på barnelementene uavhengig av den konkrete bredden eller høyden. Heldigvis finnes det flex-basis--egenskapen, som gjør det mulig å oppnå nettopp dette. Når man endrer flex-retning, blir en bredde til en høyde og vice versa. 

Hvor mye et element skal vokse når det er mer plass tilgjengelig enn det flex-basis angir? Dette kan justeres nøyaktig med flex-grow.

Hvor mye skal et element krympe når det er mindre plass tilgjengelig enn det flex-basis angir? Dette kan justeres nøyaktig med flex-shrink.

Barneelementer kan ikke bare krympe når det er mindre plass tilgjengelig, men de kan også bryte ut av beholderen. Hvordan du kontrollerer dette med flex-wrap, vises i denne videoen.

flex-direction og flex-wrap kan kombineres i flex-flow egenskapen. Det gir til og med mening hvis man bare vil sette flex-direction, fordi flex-flow er kortere. ;-)

En oppgave om flex-wrap.

Avstand må av og til være til stede for å ikke gjøre det unødvendig ubehagelig for det menneskelige øyet. Heldigvis finnes det en CSS-egenskap, gap, som akkurat oppnår dette for barna til et Flex-beholder.

Orden må opprettholdes, spesielt på nettgrensesnitt, siden disse skal være enkle å bruke. Rekkefølgen må noen ganger også fastsettes individuelt, uten å flytte elementene i DOM. For dette egner CSS-egenskapen order seg veldig bra, slik at man enkelt kan endre den synlige rekkefølgen på elementene.

La oss teste om dere har forstått rekkefølgen. Her er det til og med en annen måte å oppnå det samme resultatet på, men det kommer dere sikkert også på.

Det skjer veldig ofte at man ønsker å sentrere elementer og spesielt tekst horisontalt og vertikalt (!). Det som var en utfordring før Flexbox, er en lek med Flexbox.

Hvem kjenner ikke til 3-kolonneren? Når den også tilpasser seg tilgjengelig plass, mangler det ikke mye for å oppnå responsivt design.

Er det nettsider uten skjemaer? Hvis ja, er det ikke mange. Derfor er det veldig viktig å plassere dem tiltalende, noe som heldigvis ikke er et problem med Flexbox.

Ofte må man håndtere innvevde oppsett, men med Flex Layout er heller ikke slike en stor utfordring lenger.

I mellomtiden er det et overflod av webchat-klienter, og flere har kommet til med AI-chatboter. Men hvordan kan du implementere en chat med Flexbox? Det viser jeg i denne videoen.

Senest siden Web 2.0 finner man nesten på hver nettside et galleri. I denne videoen beskriver jeg, hvordan en slik layout for eksempel kan realiseres på en fantastisk måte med Flexbox.

Nå bør alt være klart når det gjelder Flex Layout. Til slutt vil jeg beskrive hva dere burde ha lært, hva dere fortsatt kan gjøre, og hvilke fine muligheter det finnes for CSS Layout.