Flexbox - Den animerede tutorial

I min tidligere tutorial dumpede jeg alle flexdiagrammerne ét sted for at vise dig flex box fugleperspektiv - men det er ikke nok.

For at få en god idé om, hvordan flex fungerer, kan du prøve flex layouteditor på denne side.

Hvis et billede er værd tusind ord - hvor mange flere animationer? Flex kan ikke forklares effektivt og fuldt ud med tekst eller statiske billeder. For at cementere din viden om flex skabte jeg disse animerede prøver.
Bemærk overløb: skjult type opførsel er standard her, fordi flex-wrap er ikke indstillet.

Som standard vil flex ikke indpakke dine varer. Det fungerer meget som overløb: skjult;

Den første ting, du sandsynligvis vil lære om flex, er flex-wrap.

Flex Wrap

Lad os tilføje flex-wrap: wrap for at se, hvordan det ændrer flex-elementets adfærd.

Grundlæggende - det vil simpelthen udvide beholderens højde og pakke genstande ned ad en linje.

Bemærk: containerhøjde er ikke specificeret (auto / unset), men udvides stadig.

wrap

Dette er et almindeligt mønster, når du har et ukendt antal emner med ukendt indholdsstørrelse, og du vil vise dem alle på skærmen.

Omvendt faktisk rækkefølge af emner med flexretning: række-omvendt.

række-revers

Måske kan dette bruges til indhold med læseordre fra højre til venstre.

Du kan “flyde: til højre” alle dine ting, der passer på samme linje med flex-end.

Dette adskiller sig fra række-omvendt, fordi rækkefølgen af ​​emner er bevaret.

Bestillingen nulstilles pr. Linje, hver gang der opstår pauser.

Begrund indhold

Egenskaben med retfærdig indhold bestemmer den horisontale justering af flexelementer.

Det ligner meget det foregående eksempel ... bortset fra at ordren bevares.

flex-ende

I det følgende eksempel (justify-content: center) strømmer alle elementer naturligvis til midten af ​​overordnet beholder - uanset deres bredde. Det ligner position: relativ; margin: auto på regelmæssige elementer.

centrum

Mellemrum betyder, at der er plads mellem alle indre emner:

rum-mellem

Denne næste synes næsten identisk med den ovenfor. Det er fordi det er et helt alfabet, vi ser på her. Med mindre fleksible emner vil effekten synes mere tydelig. Forskellen er margin på ydersiden af ​​hjørneelementer.

Egenskabsrum mellem (ovenfor) har ingen ydre margener på hjørneposter.

Område med ejendom (nedenfor) skaber lige marginer omkring alle poster.

space-around

Det næste er det samme eksempel, men med et bredere mellemelement.

space-around

Som du kan se her. du er stadig nødt til at eksperimentere med flex i sammenhæng med dit eget indhold for at opnå resultater, der giver mening for dit layout. Derfor besluttede jeg at lave denne tutorial. Selv animerede eksempler er begrænset til varestørrelse. Dine resultater kan variere baseret på dine indholdsdimensioner.

Juster indhold

Alle eksemplerne ovenfor beskæftigede sig med ejendom med retfærdig indhold. Men du kan også justere ting lodret i flex, selv når det kommer til automatiske rækker.

Egenskaber retfærdiggør indhold (alle eksempler ovenfor) og justering af indhold (nedenfor) tager nøjagtigt de samme værdier. De justeres bare i to forskellige retninger: lodret og vandret med hensyn til antallet af genstande, der er gemt i flexbeholder.

Lad os undersøge, hvordan flex håndterer lodret justering ...

align-content: mellemrum jævnt

Et par observationer om rum-jævnt:

  • Flex tildeler automatisk tilstrækkelig lodret plads.
  • Rækker med poster er på linje med lige lodret margenplads.

Selvfølgelig kan du stadig ændre højden på forælderen eksplicit, og alt vil stadig være korrekt justeret.

Scenario i rigtig sag

I et faktisk layout vil du ikke have en flok alfabetets bogstaver i en lige linje. Du arbejder med unikke indholdselementer. Jeg ville bare hurtigt demonstrere, hvordan flex fungerer ved animerede eksempler indtil dette punkt.

Men når det kommer til faktiske layouts, vil du sandsynligvis begynde at bruge flex med mindre genstande, der er større i størrelse. Noget, der ligner det faktiske webstedsindhold.

Lad os se på et par ideer ...

Kombination af lodret justering og retfærdiggør indhold

På et eller andet tidspunkt har du sandsynligvis brug for, at dit indhold skal være berettiget til centrum.

Rum jævnt

Brug af plads jævnt til både align-indhold og justify-indhold vil give den følgende effekt på et sæt af 5 firkantede emner.

Når det kommer ud af kassen, der er lydhør over for områder ... skal du først sørge for at holde bredden på dine genstande den samme, hvor det er muligt.

Bemærk, at fordi antallet af varer i dette eksempel er underligt (5), vil denne sag ikke give en ideel reaktion, du sandsynligvis leder efter. Brug af lige tal kan løse dette subtile problem. Overvej samme flex egenskaber, der arbejder sammen med et jævnt antal emner:

Modtag på en meget mere naturlig måde med et jævnt antal genstande.

Ved hjælp af et jævnt antal emner kan du opnå en renere responsformet skalering uden at skulle bruge CSS Grid eller JavaScript-magi.

Centrering af genstande inde i et element har været et enormt problem i layoutdesign i over et årti.

Endelig løst med flex. (Uhh .. du kan også gøre det i css-gitter.)

Men i flex ved at bruge plads-jævn værdi i begge dimensioner, vil dit indhold automatisk rumme selv med variabel varehøjde:

Perfekt lodret justering med flere genstande og varierende varehøjde.

Ovenfor er skildringen af ​​den mest almindelige brug af responsiv flex og i de næste 10 år (joke.) Hvis du lærer flex, vil du opdage, at dette måske er det mest nyttige sæt flexegenskaber generelt.

Og endelig her er alle mulige værdier i en animation:

flex-retning: række; justify-content: [value];

flex-retning: kolonne; justify-content: [value];

Det anbefales at bruge disse typer flex-genstande inde i CSS-net.

(Det vil du naturligvis finde ud af, jo mere du bruger rutenet + flex)

Men der er heller ikke noget galt med flex-layouts.

Sørg for at specificere elementstørrelse eksplicit

Hvis du ikke gør det, fungerer en vis flexskalering ganske enkelt ikke.

Brug min-bredde, max-bredde og bredde i overensstemmelse hermed.

Disse egenskaber kan gøre en forskel for hele flex skalerbarheden.

Tidsbegrænset tilbud

Diagrammerne i denne tutorial blev påvirket direkte af manuskriptet!

CSS Visual Dictionary 28% FRA for mellemstore læsere.

28% FRA

Kun mellemlæsere:

CSS Visual Dictionary

== tag en kopi ==

Indeholder alle CSS-egenskaber.