Vaizdinis CSS „Flexbox“ vadovas

Kas yra CSS „Flexbox“?

Pagal MDN žiniatinklio dokumentus:

„CSS Flexible Box Layout yra CSS modulis, apibrėžiantis CSS dėžutės modelį, optimizuotą vartotojo sąsajos dizainui, ir elementų išdėstymą vienoje dimensijoje. Lankstaus išdėstymo modelyje lankstaus konteinerio vaikai gali būti išdėstyti bet kuria kryptimi ir gali „sulankstyti“ savo dydį, arba augdami, kad užpildytų nepanaudotą erdvę, arba susitraukdami, kad išvengtumėte perpildymo. Vaikų horizontalią ir vertikalią padėtį galima lengvai valdyti “.

Taigi, apibendrinant, tai yra išdėstymo modulis, kuris palengvina dalykų lygiavimą ir paskirstymą tarp daikto elementų talpykloje.

Greitai apžvelkime keletą pavyzdžių, ką galima padaryti naudojant bent 1-2 kodų eilutes naudojant CSS „flexbox“:

Horizontalaus lygiavimo išdėstymas:

Vertikalaus lygiavimo išdėstymas:

Tai labai šaunu, atsižvelgiant į tai, kad norint valdyti kiekvieno konteinerio išdėstymą reikėjo tik vienos ar dviejų CSS eilučių.

Pagrindai

„Flexbox“ ypatybes galima suskirstyti į 2 pagrindinius tipus:

  1. Sudėtinio rodinio ypatybės (lanksti kryptis, lankstus apvyniojimas, turinio pagrindimas, elementų lygiavimas, turinio lygiavimas)
  2. Lankstaus elemento savybės (tvarka, lankstumas, lankstumas-augimas, lankstumas-susitraukimas, sulygiavimas)

Ekranas: lankstus

Pirmoji savybė nėra būdinga „flexbox“. Kad turtas yra displaykurių mes nustatyti vertę: flex. Tai nustatyta talpykloje, kurioje yra elementai, kuriais norime manipuliuoti.

Pridėkime keletą vaizdų, kad suprastume, kaip tai veikia:

Jei iš pradžių turime konteinerį, jo divviduje yra 3 dėžės ( ). Taip jie atrodys:

Dabar pridėkime flexprie konteinerio:

Vos viena CSS eilutė pakeitė išdėstymą iš vertikalios krypties į horizontalią.

Svarbios „Flexbox“ sąvokos

Šios terminijos bus naudojamos šiame vadove.

  1. „Flex Container“: tai reiškia konteinerį, kuris jam buvo display: flex;nustatytas.
  2. „Flex“ elementas: Tai atskiri vaikai, esantys „Flex Container“ viduje
  3. Pagrindinė ašis : Pagal numatytuosius nustatymus nustatyta iš kairės į dešinę.
  4. Skersinė ašis : Pagal numatytuosius nustatymus nustatyta iš viršaus į apačią.

Kai tik jos display: flexbus uždėtos ant konteinerio, šios įsivaizduojamos ašys kartu veiks nustatydamos, kaip lankstūs konteinerio viduje esantys daiktai turėtų judėti ir elgtis. Šios dvi ašys keičia kryptis, kai mes keičiame tam tikras „flexbox“ savybes, kurios yra aptartos toliau.

Lankstumo kryptis

Ši savybė lemia įsivaizduojamų ašių kryptį. Ašys savo ruožtu lemia, kaip turėtų būti dedami elementai lanksčiame inde. Tam reikalingos šios 4 vertės:

  1. rowyra numatytoji pagrindinės ašies, nukreiptos iš kairės į dešinę, vertė. Skersinė ašis išlieka iš viršaus į apačią.
  2. row-reversepakeičia eilės kryptį iš dešinės į kairę. Vėlgi, kryžiaus ašis lieka nepaveikta.

3. columnkeičia pagrindinę ašį iš horizontalios į vertikalią. Tai reiškia, kad pagrindinė ašis dabar teka iš viršaus į apačią, o skersinė ašis - iš kairės į dešinę.

4. column-reverseyra panašus į stulpelio vertę, vienintelis skirtumas yra tas, kad pagrindinė ašis dabar teka iš apačios į viršų.

Lankstus apvyniojimas

Pagal numatytuosius nustatymus „flex-container“ neleidžia elementams užimti kelių eilučių iš eilės. Vietoj to, visi elementai bus sutraukti į vieną eilę, tai yra, neleidžia suvynioti į kelias eilutes.

  1. flex-wrap: no-wrap yra numatytasis.

2 flex-wrap: wrap.. Pakeitę šią savybę į wrap, dabar galime užtikrinti, kad kiekvienas lankstus elementas išlaikys savo dydį. Jei jie negali tilpti vienoje eilutėje, jie susisuks į kitą eilutę ar stulpelį, priklausomai nuo lankstumo krypties.

Jei lankstumo kryptis nustatyta į eilę atgal, elementai pateks į kitą eilutę pradedant iš dešinės į kairę.

3. wrap-reversekita vertus, apvynios kitą lanksčių elementų eilę virš pradinės, vis tiek iš kairės į dešinę.

Pateisinti turinį

Ši savybė naudojama labai dažnai. Jo paskirtis yra paskirstyti erdvę tarp lanksčių elementų lanksčiame inde išilgai pagrindinės ašies . Numatytoji jo vertė nustatyta į flex-start.

Atminkite: jei lankstumo kryptis nustatyta kaip stulpelis, pagrindinė ašis dabar tekės iš viršaus į apačią. Tai reiškia, kad dabar pateisinamas turinys elementus paskirstys vertikaliai.

Lygiuoti elementus

Ši savybė yra tokia pat populiari, kaip justify-contentir reguliariai naudojama su „flexbox“. Jis daro tą patį, kaip justify-contentir tik tuo, kad jis veikia išilgai skersinės ašies . Numatytoji reikšmė align-itemsyra stretch.

Atminkite: jei lankstumo kryptis nustatyta kaip stulpelis, kryžminė ašis dabar tekės iš kairės į dešinę. Reiškia, kad „align-items“ dabar elementai bus paskirstomi horizontaliai.

Suderinti turinį

Ši savybė yra panaši į ją ir ją galima lengvai supainioti align-items. Šios savybės tikslas yra nustatyti, kaip tarpas tarp lanksčiojo konteinerio eilučių turėtų būti paskirstytas skersai ašies .

Nors align-itemstikslus atstumas tarp FLEX daiktų, align-contentskirta eilutes tarp daiktų. Numatytoji reikšmė align-contentyra stretch.

„Flex Item Properties“

Laikas pereiti prie antrojo tipo „flexbox“ savybių, kuri leidžia mums nukreipti atskirus elementus, esančius „flex“ talpykloje.

Lygiuotis į save

Ši savybė leidžia sulyginti atskirą lankstų elementą išilgai ašies. Jis perrašo nustatymą, nustatytą prie konteinerio align-items.

Tai taip pat pasižymi tomis pačiomis savybėmis kaip align-items(žr. Aukščiau).

Įsakymas

Ši savybė leidžia mums pertvarkyti atskirų lankstaus elemento pozicijas jų lankstaus konteinerio viduje. Pagal numatytuosius nustatymus visiems elementams yra priskirta 0 vertė.

Priskiriant mažesnę (-ve) arba didesnę (+ ve) vertę orderatskiriems elementams, tas konkretus elementas bus perkeltas, kad būtų išdėstytas pagal jų vertes.

Tvarka bus vykdoma pagal logiškiausią susitarimą, tai yra -ve, 0, + ve. Mažiausias skaičius bus kairėje, o didžiausias - dešinėje, darant prielaidą, kad visa kita nustatyta kaip numatytoji. Jei yra elementų, kuriems nebuvo suteikta nauja vertė, jie lieka kaip 0.

Pastaba: Aukščiau pateiktame pavyzdyje 1, 2, 5 ir 6 langelių vis dar yra numatytoji vertė 0. Norėdami patikslinti, šešiuose aukščiau esančiuose langeliuose yra šios vertės: -1, 0, 0, 0, 0, 1 .

Jei norite įdėti langelį prieš 4 langelio numerį, turite nustatyti tikslinę dėžę -2 arba mažesne tvarka.

„Flex-basis“, „Flex-grow“ ir „Flex-Shrink“

Iki šiol visi lankstūs elementai buvo vienodo dydžio. Dabar pažiūrėkime, kaip galime priversti konkretų lankstų elementą užimti daugiau vietos „flex-container“ viduje, palyginti su kitais to paties konteinerio elementais.

Lankstus pagrindas

Ši savybė nurodo idealų lankstaus elemento dydį prieš jį dedant į lankstų indą. Dirbant su eilėmis, jis veikia panašiai kaip plotis. Dirbant su kolonomis, jis veikia kaip aukštis. Taigi, jei dirbame su stulpeliais, o elementui buvo suteiktas ir aukštis, ir lankstumas, pirmenybė bus teikiama lankstumo pagrindui, nes tai yra idealus aukštis, kurį užims lankstus elementas, jei bus pakankamai vietos.

Tai sakant, jei elementams nėra pakankamai vietos ir nėra priskirtas aukštis ar plotis. Elementai atitiks didžiausią konteinerio aukštį arba maksimalų plotį.

Lanksčiai augti

Ši savybė lemia, kaip „flex-items“ gali augti, kad užpildytumėte nepanaudotą vietą „flex-container“.

Jei flex-grow: 1visiems langeliams priskirsime „a“ , jie visi tolygiai užims likusią vietą, kuri taip pat yra numatytoji jos vertė. Skaičius gali būti bet koks, jei jie visi yra vienodi.

Jei duosime flex-grow: 1vienai prekei, o antrai - a flex-grow: 2, tada antroji prekė užims dvigubai daugiau nepanaudotos vietos, palyginti su pirmąja.

Tai taikoma ir eilutėms, ir stulpeliams.

Lankstus susitraukimas

Šis viešbutis nustato, kaip Flex-elementai gali trauktis, kai yra ne pakankamai vietos į flex-konteinerį.

Tai flex-shrink: 1yra numatytoji vertė, tai reiškia, kad visi elementai pagal numatytuosius nustatymus mažės tuo pačiu greičiu.

Pastaba:flex-shrink: 0; reiškia, kad šis konkretus elementas niekada neturėtų trauktis.

flex-shrink: 2; reiškia, kad šis konkretus daiktas turėtų susitraukti greičiau nei kiti flex-shrink: 1;

Lankstumas

Tai yra sutrumpinta versija, skirta lanksčiai augti, lankstytis, trauktis ir lankstytis pagal tą pačią tvarką.

Jei jums reikia naudoti visus tris aukščiau nurodytus dalykus, galite tiesiog naudoti kažką panašaus į šį:

flex: 0 2 200px; kur 0 reiškia lankstų augimą, 2 reiškia lankstų susitraukimą ir 200 taškų reiškia lankstumo pagrindą.

Sveikiname!

Viskas! Tai yra pagrindiniai ingredientai norint tapti „flex“ meistru. Kaip ir kiekvienu kitu dalyku gyvenime ir kode, praktika yra tobula. Labai rekomenduoju šį vadovą pritaikyti praktiškai, kad gautumėte praktinį supratimą. Vienas pavyzdys galėtų būti pradėti nuo kažko mažo, pavyzdžiui, paprastos naršymo juostos.

Taip pat galite patikrinti nuorodą į mano „Codepen“ kolekciją ant „flex-box“, kurią naudodamas sukūriau šias „flexboxes“ aukščiau esančiuose paveikslėliuose, ir pakoreguokite jas, kad pamatytumėte, kaip jos keičiasi.

Dėkojame, kad perskaitėte šį vadovą „flexbox“. Tikiuosi, kad tai buvo naudinga ir informatyvu. Jei turite klausimų ar norite pasidalinti mintimis šia tema, nedvejodami susisiekite su komentarų skiltimi arba el. Paštu [email protected]

Jei jums pasirodė, kad šis skaitinys buvo vertingas, parodykite šiam straipsniui meilės, palikdami keletą plojimų, kad ir kiti kūrėjai galėtų jį rasti.

„ZeeshaanMaudar“ - apžvalga

Pramogų kodas Pokyčių kodas Socialinės gėrybės kodas - ZeeshaanMaudar github.com