Flexbox - Ultimate CSS Flexi petulehel (animeeritud diagrammidega!)

See põhjalik CSS-i flexbox-petukiri hõlmab kõike, mida peate teadma, et oma veebiprojektides flexboxi kasutada.

CSS flexboxi paigutus võimaldab teil hõlpsalt HTML-i vormindada. Flexbox muudab üksuste vertikaalse ja horisontaalse joondamise ridade ja veergude abil lihtsaks. Elemendid painduvad ruumi täitmiseks erineva suurusega. See muudab tundliku kujunduse lihtsamaks.

CSS-i flexboxi on suurepärane kasutada oma veebisaidi või rakenduse üldiseks paigutuseks. Seda on lihtne õppida, seda toetavad kõik tänapäevased brauserid ja põhitõdede selgitamine ei võta nii kaua aega. Selle juhendi lõpuks olete valmis oma veebiprojektides flexboxi kasutama hakkama.

Artikkel sisaldab Scott Domes'i kasulikke animeeritud gife, mis muudavad flexboxi veelgi paremini mõistetavaks ja visualiseeritavaks.

Kõik CSS Flexboxi atribuudid

Siin on loetelu kõigist CSS-i flexbox-omadustest, mida saab CSS-is elementide positsioneerimiseks kasutada. Järgmisena näete, kuidas need toimivad.

CSS, mida saab konteinerile rakendada

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, mida saab rakendada konteineris olevatele üksustele / elementidele

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;

Terminoloogia

Enne kui saate teada, mida flexboxi omadused teevad, on oluline mõista seotud terminoloogiat. Siin on peamiste flexbox-mõistete määratlused, mis on võetud flexboxi ametlikust W3C spetsifikatsioonist.

  • peatelg : paindmahuti põhitelg on peamine telg, mida mööda painduvad elemendid asetatakse. Suund põhineb paindesuuna omadusel.
  • peastart | peakomplekt :Painduvad elemendid asetatakse konteinerisse, alustades peamise stardi küljest ja minnes peamise otsa poole.
  • peamine suurus : painduva konteineri või painduva elemendi laius või kõrgus, olenevalt sellest, kumb on põhimõõtmes, on selle kasti peamine suurus. Selle põhisuuruse omadus on seega kas laiuse või kõrguse omadus, olenevalt sellest, kumb on põhidimensioonis.
  • risttelg : peateljega risti olevat telge nimetatakse ristteljeks. Selle suund sõltub peatelje suunast.
  • riststart | ristlõige : painduvad jooned täidetakse esemetega ja pannakse anumasse, alustades paindmahuti riststardipoolsest küljest ja suundudes ristpidi poole.
  • ristisuurus : painduva elemendi laius või kõrgus, olenevalt sellest, kumb on ristmõõt, on üksuse ristisuurus. Risti suuruse omadus on see, kumb rist laiuses või kõrguses on ristmõõt.

CSS Display Flex

display: flex on ütleb teie brauserile: "Ma tahan selle konteineriga kasutada flexboxi, palun."

divElement vaikimisi display:block. Selle kuvaseadega element võtab joone täies laiuses. Siin on näide vaikeväärtusega kaks värvilist div-i vanemdivis:

Flexboxi kasutamiseks oma lehe jaotises teisendage esmalt vanemkonteiner paindlikuks konteineriks, lisades vanemkonteeri display: flex;CSS-i.

See lähtestab selle konteineri paindmahutina ja rakendab mõningaid vaikimisi painduvaid omadusi.

Painduv suund

flex-directionvõimaldab teil kontrollida, kuidas konteineris olevad üksused kuvatakse. Kas soovite neid vasakult paremale, paremalt vasakule, ülalt alla või alt üles? Kõiki neid saate hõlpsalt teha, seadistades flex-directionkonteineri.

Vaikimisi on pärast rakendamist display: flexüksused paigutatud piki põhitelge vasakult paremale. Allpool olev animatsioon näitab, mis juhtub, kui flex-direction: columnsee lisatakse konteineri elemendile.

Samuti saate määrata flex-direction, et row-reverseja column-reverse.

Põhjendage sisu

justify-contenton omadus joondada konteineris olevad üksused piki põhitelge (vt ülaltoodud terminiskeemi). See muutub sõltuvalt sellest, kuidas sisu kuvatakse. See võimaldab meil täita ridade tühja ruumi ja määratleda, kuidas me seda õigustada tahame.

Siin on meie kõige tavalisem võimalusi kasutada, et õigustada sisu: flex-start | flex-end | center | space-between | space-around.

Erinevad valikud näevad välja järgmised:

space-betweenjaotab esemed nii, et esimene üksus on algusega samal tasapinnal ja viimane lõpuga. space-aroundon sarnane, kuid esemete mõlemas otsas on poole väiksem ruum.

Joondage esemed paindlikult

align-itemsvõimaldab meil joondada üksusi piki telge (vt ülaltoodud terminiskeemi). See võimaldab sisu paigutada mitmel erineval viisil, kasutades sisu õigustamist ja üksuste joondamist.

Siin on üksused, mida üksuste joondamiseks kasutatakse kõige sagedamini: flex-start | flex-end | center | baseline | stretch

Et stretchtöötada nii, nagu ootate, tuleb elementide kõrguseks määrata autokonkreetse kõrguse asemel.

See animatsioon näitab, kuidas valikud välja näevad:

Nüüd kasutame mõlemat justify-contentja align-items. See näitab erinevust põhitelgede ja risttelgede vahel.

Joondage ise

align-self võimaldab reguleerida ühe elemendi joondamist.

Sellel on kõik samad omadused align-items.

Järgmises animatsioonis on vanemdivis CSS align-items: centerja flex-direction: row. Esimesed kaks ruutu liiguvad läbi erinevate align-selfväärtuste.

Flex Wrap

Vaikimisi proovib Flexbox kõik elemendid ühte ritta mahutada. Kuid saate seda flex-wrapvara abil muuta . Elementide teisele reale mineku määramiseks võite kasutada kolme väärtust.

Vaikeväärtus on flex-wrap: nowrap. Nii jääb kõik ühte rida vasakult paremale.

flex-wrap: wrap  lubab üksustel hüpata järgmisele reale, kui esimesel real pole piisavalt ruumi. Üksusi kuvatakse vasakult paremale.

flex-wrap: wrap-reverse võimaldab ka üksustel hüpata järgmisele reale, kuid seekord kuvatakse üksused paremalt vasakule.

Flex Flow

flex-flowühendab ühe vara kasutamise flex-wrapja flex-directionühendamise. Seda kasutatakse kõigepealt suuna määramisel ja seejärel mähkimisel. Siin on näide:flex-flow: column wrap;

Joondage sisu

align-contentkasutatakse mitme reaga üksuste joondamiseks. See on mõeldud ristteljel joondamiseks ja see ei mõjuta ühe reaga sisu.

Siin on valikud: align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Vertikaalselt tsentreerimine Flexboxiga

Kui soovite kogu sisu vanemelemendi sees vertikaalselt tsentreerida, kasutage align-items. Siin on kasutatav kood:

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

Mängud ja rakendused

Kui soovite harjutada flexboxi kasutamist, proovige neid mänge ja rakendusi, mis aitavad teil flexboxi valdada.

  • Flexbox Defense on veebimäng, kus saate õppida flexboxi, püüdes samal ajal takistada saabuvatel vaenlastel teie kaitsemehhanismidest möödumist.
  • Flexbox Froggy on mäng, kus aitate Froggyt ja sõpru, kirjutades CSS-koodi.
  • Flexyboxes on rakendus, mis võimaldab teil näha koodinäiteid ja muuta parameetreid, et näha, kuidas Flexbox visuaalselt töötab.
  • Flexbox Patters on veebisait, mis näitab hulga Flexboxi näiteid.

Järeldus

Oleme käsitlenud kõiki levinumaid CSS-i flexboxi atribuute. Järgmine samm on harjutamine! Proovige flexboxi abil paar projekti teha, et saaksite selle toimimisega harjuda.