Flexbox - The Ultimate CSS Flex Cheatsheet (med animerede diagrammer!)

Dette omfattende CSS flexbox-cheatsheet dækker alt hvad du behøver at vide for at begynde at bruge flexbox i dine webprojekter.

CSS flexbox-layout giver dig mulighed for nemt at formatere HTML. Flexbox gør det nemt at justere emner lodret og vandret ved hjælp af rækker og kolonner. Elementer "bøjes" til forskellige størrelser for at fylde rummet. Det gør responsivt design lettere.

CSS flexbox er fantastisk at bruge til det generelle layout af dit websted eller din app. Det er let at lære, understøttes i alle moderne browsere, og det tager ikke så lang tid at finde ud af det grundlæggende. I slutningen af ​​denne vejledning er du klar til at begynde at bruge flexbox i dine webprojekter.

Artiklen indeholder nyttige animerede gifs fra Scott Domes, som gør flexbox endnu lettere at forstå og visualisere.

Alle CSS Flexbox egenskaber

Her er en liste over alle CSS-flexbox-egenskaber, der kan bruges til at placere elementer i CSS. Dernæst vil du se, hvordan de fungerer.

CSS, der kan anvendes på containeren

display: flexbox | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow:  ||  justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS, der kan anvendes på emner / elementer i containeren

order: ; flex-grow: ; /* default 0 */ flex-shrink: ; /* default 1 */ flex-basis:  | auto; /* default auto */ flex: none | [  ? ||  ] align-self: auto | flex-start | flex-end | center | baseline | stretch;

Terminologi

Før du lærer, hvad flexbox-egenskaberne gør, er det vigtigt at forstå den tilknyttede terminologi. Her er definitioner af de centrale flexbox-udtryk, taget fra den officielle W3C-specifikation for flexbox.

  • hovedakse : Hovedaksen for en flexcontainer er den primære akse, langs hvilken flex-emner er lagt. Retningen er baseret på egenskaben flexretning.
  • hovedstart | main-end :Flex-emnerne placeres i beholderen, der starter på hovedstartsiden og går mod hovedenden.
  • hovedstørrelse : Bredden eller højden af ​​en flexcontainer eller flexartikel, afhængigt af hvad der er i hoveddimensionen, er boksens hovedstørrelse. Dets hovedstørrelsesegenskab er således enten dets bredde- eller højdeegenskab, alt efter hvad der er i hoveddimensionen.
  • tværakse : Aksen vinkelret på hovedaksen kaldes tværaksen. Dens retning afhænger af hovedaksen retning.
  • krydsstart | tværgående : Flex-linjer fyldes med genstande og placeres i containeren, der starter på tværsiden af ​​flexcontaineren og går mod tværsiden.
  • krydsstørrelse : Bredden eller højden af ​​et fleksibelt emne, alt efter hvad der er i tværdimensionen, er varens tværstørrelse. Tværstørrelsesegenskaben er den, der er af 'bredde' eller 'højde', der er i tværdimensionen.

CSS Display Flex

display: flex er fortæller din browser, "Jeg vil gerne bruge flexbox med denne container."

Et divelement er som standard display:block. Et element med denne skærmindstilling optager den fulde bredde af den linje, den er på. Her er et eksempel på fire farvede div i en overordnet div med standardindstillingen for skærmvisning:

For at bruge flexbox på et afsnit på din side skal du først konvertere den overordnede container til en flex container ved at føje display: flex;til CSS for den overordnede container.

Dette initialiserer denne container som en flexcontainer og anvender nogle standard flex-egenskaber.

Flex retning

flex-directiongiver dig mulighed for at kontrollere, hvordan emnerne i containeren vises. Vil du have dem fra venstre mod højre, fra højre til venstre, fra top til bund eller fra bund til top? Du kan gøre alle disse let ved at indstille flex-directionbeholderen.

Standardarrangementet efter anvendelse display: flexer, at emnerne arrangeres langs hovedaksen fra venstre mod højre. Animationen nedenfor viser, hvad der sker, når flex-direction: columnder føjes til containerelementet.

Du kan også indstille flex-directiontil row-reverseog column-reverse.

Retfærdiggør indhold

justify-contenter en egenskab til at justere emner i beholderen langs hovedaksen (se terminologidiagram ovenfor). Dette ændres afhængigt af, hvordan indholdet vises. Det giver os mulighed for at udfylde ethvert tomt rum på rækker og definere, hvordan vi vil 'retfærdiggøre' det.

Her er vores de mest almindelige muligheder bruges til at retfærdiggøre indhold: flex-start | flex-end | center | space-between | space-around.

Sådan ser de forskellige muligheder ud:

space-betweendistribuerer elementer, så det første element flugter med starten, og det sidste flugter med slutningen. space-arounder ens, men genstande har en halv størrelse plads i begge ender.

Flex Align Items

align-itemsgiver os mulighed for at justere emner langs tværaksen (se terminologidiagrammet ovenfor). Dette gør det muligt at placere indhold på mange forskellige måder ved hjælp af retfærdiggøre indhold og justere elementer sammen.

Her er de mest almindelige muligheder, der bruges til at justere emner: flex-start | flex-end | center | baseline | stretch

For stretchat arbejde, som du forventer, skal elementernes højde indstilles til i autostedet for en bestemt højde.

Denne animation viser, hvordan mulighederne ser ud:

Nu bruger vi begge justify-contentog align-items. Dette viser forskellen mellem hovedakse og tværakse.

Juster selv

align-self giver dig mulighed for at justere justeringen af ​​et enkelt element.

Det har alle de samme egenskaber af align-items.

I den følgende animation har den overordnede div CSS align-items: centerog flex-direction: row. De to første firkanter cykler gennem forskellige align-selfværdier.

Flex indpakning

Flexbox forsøger som standard at passe alle elementer i en række. Du kan dog ændre dette med flex-wrapejendommen. Der er tre værdier, du kan bruge til at bestemme, hvornår elementerne går til en anden række.

Standardværdien er flex-wrap: nowrap. Dette får alt til at forblive i en række fra venstre mod højre.

flex-wrap: wrap  tillader elementer at springe til næste række, hvis der ikke er plads nok på første række. Emnerne vises fra venstre mod højre.

flex-wrap: wrap-reverse tillader også elementer at springe til næste række, men denne gang vises elementerne fra højre til venstre.

Flex Flow

flex-flowkombinerer brugen af flex-wrapog flex-directioni en egenskab. Det bruges ved først at indstille retningen og derefter wrap. Her er et eksempel:flex-flow: column wrap;

Juster indhold

align-contentbruges til at justere varer med flere linjer. Det er til tilpasning på tværs af aksen og har ingen effekt på indholdet, der er en linje.

Her er mulighederne: align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Lodret centrering med Flexbox

Hvis du vil centrere alt indholdet i et overordnet element lodret, skal du bruge align-items. Her er koden, der skal bruges:

.parent { display: flex; align-items: center; }

Spil og apps

Hvis du vil øve dig på at bruge flexbox, skal du prøve disse spil og apps, der hjælper dig med at mestre flexbox.

  • Flexbox Defense er et webspil, hvor du lærer flexbox, mens du prøver at stoppe de indkommende fjender i at komme forbi dit forsvar.
  • Flexbox Froggy er et spil, hvor du hjælper Froggy og venner ved at skrive CSS-kode.
  • Flexyboxes er en app, der giver dig mulighed for at se kodeeksempler og ændre parametre for at se, hvordan Flexbox fungerer visuelt.
  • Flexbox Patters er et websted, der viser en række Flexbox-eksempler.

Konklusion

Vi har dækket alle de mest almindelige CSS flexbox-egenskaber. Det næste trin er praksis! Prøv at lave et par projekter ved hjælp af flexbox, så du kan vænne dig til, hvordan det fungerer.