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

Flexbox lover at redde os fra ondt med 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 se et animeret kig på, hvordan Flexbox fungerer, så vi kan bruge det til at opbygge bedre layout.

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

For at opnå dette giver det containere mulighed for selv at bestemme, hvordan de skal fordele deres børn jævnt - inklusive deres størrelse og mellemrummet mellem dem.

Dette lyder alt sammen principielt godt. Men lad os se, hvordan det ser ud i praksis.

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

Egenskab nr. 1: Display: Flex

Her er vores eksempel webside:

Du har fire farvede divaer i forskellige størrelser, der er indeholdt i en grå container div. Fra nu af har hver div som standard vist: blok. Hver firkant tager således den fulde bredde af sin linje.

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

#container {
  display: flex;
}

Ikke meget er ændret - dine divs vises online nu, men det handler om det. Men bag kulisserne har du gjort noget magtfuldt. 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 vanskelighed end traditionel CSS.

Egenskab nr. 2: Flex-retning

En Flexbox-container har to akser: en hovedakse og en tværakse, som som standard ser ud som sådan:

Som standard er elementer arrangeret langs hovedaksen, fra venstre mod højre. Dette er grunden til, at dine firkanter standardiserede en vandret linje, når du anvendte display: flex.

Flekseretning, lad os dog rotere hovedaksen.

#container {
  display: flex;
  flex-retning: kolonne;
}

Der er en vigtig sondring, der skal foretages her: flexretning: kolonne justerer ikke kvadraterne på tværs aksen i stedet for hovedaksen. Den får selve hovedaksen til at gå fra vandret til lodret.

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

Egenskab nr. 3: Begrund indhold

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

Her vil du dykke lidt dybere ind i forskellen mellem hoved- og tværaksen. Lad os først gå tilbage til flexretning: række.

#container {
  display: flex;
  flex-retning: række;
  begrunde-indhold: flex-start;
}

Du har fem kommandoer til din rådighed til at bruge justify-indhold:

  1. Flex-start
  2. Flex-ende
  3. Centrum
  4. Space-mellem
  5. Space-around

Mellemrum og mellemrum er det mindst intuitive. Mellemrum giver ens plads mellem hver firkant, men ikke mellem den og containeren.

Mellemrummet placeres en lige så lille pladspude på hver side af pladsen - 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 margin, således fordobling af pladsen).

En sidste note: husk, at retfærdiggørelse af indhold fungerer langs hovedaksen, og flexretning skifter hovedaksen. Dette vil være vigtigt, når du flytter til ...

Egenskab nr. 4: Juster elementer

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

Som retfærdiggørelse af indhold fungerer langs hovedaksen, gælder justeringselementer på tværs aksen.

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

Lad os dykke ned i kommandoerne til justering af elementer.

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

De første tre er nøjagtigt det samme som justify-indhold, så intet for lystigt her.

De næste to er dog lidt forskellige.

Du har strækning, hvor elementerne udgør hele krydsaksen og basislinjen, hvor bunden af ​​afsnitskoderne er på linje.

(Bemærk, at for alignelementer: strækning, var jeg nødt til at indstille firkantens højde til auto. Ellers ville højdeegenskaben tilsidesætte strækningen.)

For baseline skal du være opmærksom på, at hvis du fjerner afsnitskoderne, justeres den i bunden af ​​firkanterne i stedet, sådan:

For at demonstrere hoved- og tværakse bedre, lad os kombinere retfærdiggørelsesindhold og justere emner og se, hvordan centrering fungerer anderledes for de to flexretningskommandoer:

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

Selv hvis firkanterne er centreret både lodret og vandret i begge tilfælde, er de to ikke udskiftelige!

Egenskab nr. 5: Juster selv

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

Det er dybest set tvingende alignelementer for en firkant. Alle egenskaber er de samme, skønt de standarder automatisk, hvor de følger beholderens justering.

#container {
  align-items: flex-start;
}
.square # one {
  align-self: center;
}
// Kun denne firkant er centreret.

Lad os se, hvordan dette ser ud. Du anvender align-self på to firkanter, og for resten gælder align-items: center og flex-direction: række.

Konklusion

Selvom vi lige har ridset overfladen på Flexbox, skal disse kommandoer være nok til at du kan håndtere de fleste grundlæggende justeringer - og lodret tilpasse til dit hjerte indhold.

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

Tak for at have læst!