Den komplette illustrerede Flexbox-tutorial

Da jeg begyndte at lære flex, ville jeg se alt, hvad det var i stand til. Men når det kom til eksempler på alle egenskaber, kunne jeg visuelt ikke finde en grundig tutorial. Så jeg oprettede disse diagrammer, der giver et fugleperspektiv.

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

Det er alt, hvad Flex er i stand til. Men ... lad os gennemgå hvert diagram individuelt med kommentarer. Ved afslutningen af ​​denne Flex-tutorial skal du være oppe med hastigheden med stort set det komplette billede af hvad det kan gøre.

Flex

Flex er et sæt regler for automatisk strækning af flere kolonner og rækker
af indhold på tværs af dets overordnede beholder.

display: flex

I modsætning til mange andre CSS-egenskaber har du i Flex en hovedcontainer og
genstande, der er indlejret deri. Nogle CSS flex egenskaber bruges kun på overordnede. Andre kun på varerne.

Du kan tænke på et flexelement som en overordnet beholder med display: flex. Elementer placeret inde i denne container kaldes genstande. Hver beholder har et flex-start- og flex-endepunkt som vist i diagrammet ovenfor.

Hovedakse og tværakse

Mens listen over varer findes på en lineær måde, kræver Flex, at du er det
opmærksom på rækker og kolonner. Af denne grund har den to koordinatakser. Det
vandret akse kaldes hovedakse, og lodret er krydsaksen.

For at kontrollere opførslen af ​​indholdets bredde og mellemrum mellem det og for at gøre det muligt for det at strække sig horisontalt over hovedaksen, skal du bruge berettigede egenskaber. For at kontrollere den vertikale opførsel af genstande bruger du justeringsegenskaber.

Hvis du har 3 kolonner og 6 elementer, oprettes en anden række automatisk
af Flex for at rumme de resterende genstande.

Hvis du har mere end 6 poster på listen, oprettes endnu flere rækker.

Flex-emner fordeles lige på hovedaksen. Vi ser på egenskaberne og værdierne for at opnå dette på bare et øjeblik.

Du kan bestemme antallet af kolonner.

Hvordan rækkerne og kolonnerne fordeles inden i det overordnede element bestemmes af CSS Flex-egenskaber flexretning, flex-wrap og et par andre, der vil blive demonstreret i resten af ​​denne flex-tutorial.

Her har vi et vilkårligt n-antal emner placeret i en container. Som standard strækker elementerne sig fra venstre mod højre. Oprindelsespunktet kan dog vendes.

Retning

Det er muligt at indstille retning for varens flow ved at vende det.

flex-retning: række-bagved ændrer retningen for varelisten flow. Standard er række, hvilket betyder at flyde fra venstre til højre, som du ville forvente!

Wrap

flex-wrap: wrap bestemmer, hvordan emner indpakkes, når overordnet beholder løber tør for plads.

Flyde

flex-flow er en kort hånd til flex-retning og flex-wrap, så du kan specificere begge ved hjælp af kun et egenskabsnavn.

flex-flow: rækkeindpakning bestemmer flex-retning, der skal række, og flex-wrap, der skal vikles.flex-flow: række wrap-reverse;flex-flow: rækkeindpakning; justify-content: mellemrum;flex-flow: række-omvendt indpakning;flex-flow: række-omvendt wrap-reverse;flex-flow: rækkeindpakning; justify-content: mellemrum;Retningen kan ændres for at gøre Cross-Axis primær.

Når vi ændrer flexretning til søjle, opfører sig flex-flow-egenskaben sig i
nøjagtigt på samme måde som i de foregående eksempler. Bortset fra denne gang følger de en søjles lodrette retning.

retfærdiggøre-indhold

flex-retningen: rækken; retfærdiggør-indhold: flex-start | flex-end | center | mellemrum | mellem-rum | omkring | stræk | plads-jævnt

Jeg modtog en masse anmodninger om at afklare eksemplet ovenfor. Så jeg oprettede denne animation. Det originale stykke, hvorfra diagrammet var lavet:

Animeret indhold med retfærdiggørelse.

Håber, at dette rydder tågen lidt.

I dette eksempel bruger vi kun 3 elementer pr. Række. Der er ingen grænse for antallet af varer, du ønsker at bruge i flex. Disse diagrammer viser kun opførsel af elementer, når en af ​​de anførte værdier anvendes til egenskaben med retfærdig indhold.

Den samme egenskab med justify-indhold bruges til at justere elementer, når flexretning er kolonne. Her er den animerede version:

Pakning af flexlinjer (i henhold til Flex-specifikationen)

Flex-specifikationen refererer til dette som "pakning af flexlinjer." Grundlæggende fungerer det ligesom de eksempler, vi har set i de forrige få billeder. Bemærk undtagen denne gang, at afstanden er mellem hele sæt sæt. Dette er nyttigt, når du vil kassere mellemrum omkring en batch med flere genstande.

Packing Flex Lines (fortsat.) Men nu med flex-retning indstillet til kolonne.

tilpasse poster

align-items styrer justeringen af ​​emner vandret i forhold til overordnet beholder.

flex-basis

flex-basis fungerer på samme måde som en anden CSS-egenskab: min. bredde uden for flex. Det udvider en vares størrelse baseret på det indre indhold. Hvis ikke, bruges standardbasisværdien.

flex-vokse

flex-grow, når den anvendes på en vare, skalerer den i forhold til summen af ​​størrelsen på alle andre elementer på samme række, som automatisk justeres i henhold til den angivne værdi. I hvert eksempel her blev elementets flex-Grow-værdi indstillet til 1, 7 og (3 og 5) i det sidste eksempel.

flex-krympe

flex-shrink er det modsatte af flex-grow. I dette eksempel blev en værdi på 7 brugt til at "krympe" det valgte element i en mængde, der svarer til 1/7 af størrelsen på det omkringliggende emner - som også justeres automatisk.

Når du håndterer individuelle genstande, kan du bruge ejendommen
flex som en genvej til flex-grow, flex-shrink og flex-basis ved kun at bruge
et ejendomsnavn.

bestille

Ved hjælp af ordreegenskaber er det muligt at arrangere den naturlige rækkefølge af genstande.

retfærdiggøre-elementer

En sidste ting for dem, der søger at bruge CSS Grid sammen med Flex Box: CSS-rids retfærdiggørelseselementer svarer til Flex's justify-indhold. (Egenskaberne beskrevet i ovenstående diagram fungerer ikke i Flex, men det er stort set netets ækvivalent til at justere celleindhold.)

Hvis du ønsker at støtte mit arbejde, er CSS Visual Dictionary min bog.

Følg mig for ugentlig freemium på sociale netværk

Du kan på Twitter til PDF-gave til weekenden.

Følg mig på Instagram for et hurtigt hit af JavaScript.

Du kan følge mig på Facebook for gratis kodning.

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.