Sådan fungerer Flexbox - forklaret med store, farverige, animerede gifs

Flexbox lover at redde os fra det dårlige ved almindelig CSS (som lodret justering).

Nå, Flexbox leverer det mål. Men at mestre sin nye mentale model kan være udfordrende.

Så lad os tage et animeret kig på, hvordan Flexbox fungerer, så vi kan bruge det til at oprette bedre layout.

Flexbox's underliggende princip er at gøre layouts fleksible og intuitive.

For at opnå dette lader det containere selv bestemme, hvordan de fordeler deres børn jævnt - inklusive deres størrelse og afstanden mellem dem.

Alt dette lyder i princippet godt. Men lad os se, hvordan det ser ud i praksis.

I denne artikel dykker vi ind i de 5 mest almindelige Flexbox-egenskaber. Vi undersøger, hvad de gør, hvordan du kan bruge dem, og hvordan deres resultater faktisk vil se ud.

Ejendom nr. 1: Skærm: Flex

Her er vores eksempel webside:

Du har fire farvede div i forskellige størrelser, der holdes i en grå beholder div. Fra nu af er hver div standard display: block. Hver firkant optager således hele linjens bredde.

For at komme i gang med Flexbox skal du gøre din container til en flexcontainer . Dette er lige så let som:

#container { display: flex;}

Ikke meget har ændret sig - dine div vises nu inline, men det handler om det. Men bag kulisserne har du gjort noget kraftfuldt. Du gav dine firkanter noget, der kaldes en flex-kontekst .

Du kan nu begynde at placere dem inden for denne sammenhæng med langt mindre vanskeligheder end traditionel CSS.

Ejendom nr. 2: Flex-retning

En Flexbox-container har to akser: en hovedakse og en tværakse , der som standard ser ud som denne:

Som standard er emner arrangeret langs hovedaksen fra venstre mod højre . Dette er grunden til, at dine firkanter er standard som en vandret linje, når du først har anvendt display: flex.

Flex-directionLad os dog rotere hovedaksen.

#container { display: flex; flex-direction: column;}

Der er en vigtig skelnen at gøre her: flex-direction: columnJuster ikke firkanterne på tværaksen i stedet for hovedaksen. Det får selve hovedaksen til at gå fra vandret til lodret.

Der er også et par andre muligheder for flex-retning: række-omvendt og kolonne-omvendt.

Ejendom nr. 3: Retfærdiggør indhold

Justify-content styrer, hvordan du justerer elementer på hovedaksen.

Her dykker du lidt dybere ned i forskellen mellem hoved / tværakse. Lad os først gå tilbage til flex-retning: række.

#container { display: flex; flex-direction: row; justify-content: flex-start;}

Du har fem kommandoer til rådighed for at bruge justify-content :

  1. Flex-start
  2. Flex-ende
  3. Centrum
  4. Mellemrum
  5. Rum-rundt

Mellemrum og mellemrum er mindst intuitive. Mellemrum giver lige mellemrum mellem hver firkant, men ikke mellem den og beholderen.

Space-around sætter en lige pude af plads på hver side af firkanten - hvilket betyder, at mellemrummet mellem de yderste firkanter og beholderen er halvt så meget som mellemrummet mellem to firkanter (hver firkant bidrager med en ikke-overlappende lige stor mængde margen, fordobler dermed rummet).

En sidste note: Husk, at justify-content fungerer langs hovedaksen , og flex-retning skifter hovedaksen . Dette vil være vigtigt, når du flytter til ...

Ejendom 4: Juster emner

Hvis du 'får' retfærdiggør indhold, vil justeringselementer være en leg.

Da retfærdiggør indhold fungerer langs hovedaksen, gælder justeringselementer for tværaksen.

Lad os nulstille vores flexretning til række, så vores akser ser ud som det ovenstående billede.

Lad os derefter dykke ned i kommandoerne for align-items.

  1. flex-start
  2. flex-ende
  3. centrum
  4. strække
  5. basislinje

De første tre er nøjagtigt de samme som retfærdiggøre-indhold , så intet for fancy her.

De næste to er dog lidt forskellige.

Du har strækning, hvor elementerne optager hele tværaksen og basislinje, hvor bunden af ​​afsnittets tags er justeret.

(Bemærk at for align-items: stretchmåtte jeg indstille kvadraternes højde til auto. Ellers ville egenskaben højde tilsidesætte strækningen.)

Ved baseline skal du være opmærksom på, at hvis du fjerner afsnittets tags, justerer den i stedet bunden af ​​firkanterne som sådan:

For at demonstrere hoved- og tværakse bedre, lad os kombinere justify-content og align-items og se, hvordan centrering fungerer anderledes for de to flex-retningskommandoer:

Med række placeres firkanterne langs en vandret hovedakse. Med søjle falder de langs en lodret hovedakse.

Selvom firkanterne er centreret både lodret og vandret i begge tilfælde, kan de to ikke udskiftes!

Ejendom nr. 5: Juster selv

Align-self giver dig mulighed for manuelt at manipulere justeringen af ​​et bestemt element.

Det er dybest set overordnede justeringselementer for en firkant. Alle egenskaber er de samme, selvom den er standard som auto , hvor den følger containerens justeringselementer .

#container { align-items: flex-start;}
.square#one { align-self: center;}// Only this square will be centered.

Lad os se, hvordan det ser ud. Du anvender align-self til to firkanter, og for resten gælder align-items: centerog flex-direction: row.

Konklusion

Selvom vi lige har ridset overfladen af ​​Flexbox, skal disse kommandoer være nok til at du kan håndtere de fleste basale justeringer - og til at justere lodret efter dit hjertes indhold.

Hvis du vil se flere GIF Flexbox-tutorials, eller hvis denne tutorial var nyttigt for dig, skal du trykke på det grønne hjerte nedenfor eller efterlade en kommentar.

Tak for læsningen!