Vizualni vodič za CSS Flexbox

Što je CSS Flexbox?

Prema MDN web dokumentima:

„CSS fleksibilni raspored okvira modul je CSS-a koji definira model CSS okvira optimiziran za dizajn korisničkog sučelja i raspored predmeta u jednoj dimenziji. U modelu fleksibilnog rasporeda, djeca kontejnera za fleks mogu se rasporediti u bilo kojem smjeru i mogu "saviti" svoje veličine, bilo da rastu kako bi popunili neiskorišteni prostor ili se smanjuju kako bi se izbjeglo prelijevanje roditelja. I vodoravnim i okomitim poravnanjem djece može se lako manipulirati. "

Da rezimiramo, to je modul izgleda koji olakšava poravnanje i raspodjelu prostora između predmeta u spremniku.

Kratko ćemo pogledati nekoliko primjera onoga što se može učiniti sa minimalno 1-2 retka kodova pomoću CSS flexboxa:

Izgled vodoravnog poravnanja:

Izgled okomitog poravnanja:

Prilično je cool s obzirom da je za manipulaciju rasporedom unutar svakog spremnika bio potreban samo jedan ili dva retka CSS-a.

Osnove

Svojstva Flexbox-a mogu se podijeliti u 2 glavne vrste:

  1. Svojstva spremnika (flex-direction, flex-wrap, justify-content, align-items, align-content)
  2. Svojstva Flex predmeta (poredak, savijanje, savijanje, rast, savijanje, poravnavanje)

Zaslon: fleks

Prvo svojstvo nije specifično za flexbox. To svojstvo je displaykoje smo postavili na vrijednost: flex. To se postavlja na spremnik koji sadrži stavke kojima želimo manipulirati.

Dodajmo nekoliko vizualnih slika da bismo razumjeli kako to radi:

Ako u početku imamo spremnik, divunutar njega su 3 kutije ( ). Ovako će izgledati:

Sad dodamo flexu spremnik:

Samo je jedan redak CSS-a promijenio izgled iz okomitog u vodoravni smjer.

Važne terminologije oko Flexboxa

Te će se terminologije koristiti u ovom vodiču.

  1. Flex spremnik: To se odnosi na spremnik koji je display: flex;na njega postavljen.
  2. Flex stavka: Ovo su pojedinačna djeca unutar Flex spremnika
  3. Glavna os : Prema zadanim postavkama postavljeno je slijeva nadesno.
  4. Prečna os : Prema zadanim postavkama postavljeno je od vrha prema dnu.

Čim display: flexse postavi na spremnik, ove zamišljene osi će zajedno raditi kako bi odredile kako se elementi savijanja unutar spremnika za savijanje trebaju kretati i ponašati. Ove dvije osi mijenjaju smjer kad god promijenimo određena svojstva flexboxa o kojima se govori u nastavku.

Flex-smjer

Ovo svojstvo određuje smjer zamišljenih osi. S druge strane, osi određuju način na koji se trebaju nalaziti predmeti u fleks spremniku. Potrebne su sljedeće 4 vrijednosti:

  1. rowje zadana vrijednost glavne osi koja pokazuje slijeva udesno. Poprečna os ostaje od vrha do dna.
  2. row-reverseokreće smjer reda s desna na lijevo. Opet, križna os ostaje nepromijenjena.

3. columnmijenja glavnu os s vodoravne na vertikalnu os. Što znači da glavna os sada teče odozgo prema dolje, dok poprečna os sada slijeva slijeva udesno.

4. column-reversesličan je vrijednosti stupca s jedinom razlikom što glavna os sada teče odozdo prema gore.

Flex-omot

Flex-spremnik prema zadanim postavkama ne dopušta da stavke zauzimaju nekoliko redaka u nizu. Umjesto toga, svi će se predmeti zgužvati da stanu u jedan red, odnosno ne dopušta umotavanje u nekoliko redaka.

  1. flex-wrap: no-wrap je zadani.

2 flex-wrap: wrap.. Promjenom tog svojstva u wrap, sada možemo osigurati da će svaki flex-item zadržati svoje veličine. Ako ne mogu stati na jednu liniju, premotat će se u sljedeći redak ili stupac ovisno o smjeru savijanja.

Ako je smjer savijanja postavljen na obrnuto, tada će stavke ići na sljedeći redak počevši s desne na lijevu stranu.

3. wrap-reverses druge strane će omotati sljedeći red savitljivih predmeta iznad početnog, još uvijek slijeva udesno.

Justify-content

Ovo se svojstvo koristi vrlo često. Njegova je svrha rasporediti prostor između flex-predmeta u flex-spremniku duž glavne osi . Njegova je zadana vrijednost postavljena na flex-start.

Zapamtite: Ako je flex-direction postavljen na stupac, tada bi glavna os sada tekla od vrha do dna. To znači da bi sadržaj koji opravdava sada bio distribucija predmeta vertikalno.

Poravnajte stavke

Ovo je svojstvo jednako popularno kao justify-contenti redovito se koristi s flexboxom. Radi istu stvar kao justify-contenti jedina razlika je u tome što radi duž poprečne osi . Zadana vrijednost za align-itemsje stretch.

Zapamtite: Ako je flex-direction postavljen na stupac, tada bi poprečna os sada tekla slijeva udesno. Što znači da bi poravnavanje stavki sada vršilo horizontalno distribuiranje predmeta.

Poravnaj-sadržaj

Ovo svojstvo je slično i s njim se lako može zamijeniti align-items. Svrha ovog svojstva je odrediti kako bi prostor između redaka u flex-spremniku trebao biti raspoređen duž poprečne osi .

Iako align-itemscilja razmak između flex-predmeta, align-contentcilja redove između stavki. Zadana vrijednost za align-contentje stretch.

Svojstva Flex predmeta

Vrijeme je da prijeđemo na drugu vrstu svojstava flexbox-a koja nam omogućuje ciljanje pojedinačnih predmeta unutar flex spremnika.

Poravnajte se

Ovo svojstvo omogućuje vam poravnanje pojedinog fleksibilnog predmeta duž poprečne osi. Nadjačava poravnanje postavljeno na spremnik align-items.

Također uzima ista svojstva kao align-items(vidi gore).

Narudžba

Ovo nam svojstvo omogućuje ponovno uređivanje položaja pojedinih flex-predmeta unutar njihovih flex-spremnika. Prema zadanim postavkama, svim stavkama dodijeljena je vrijednost 0.

Dodjeljivanjem vrijednosti niže (-ve) ili veće (+ ve) orderpojedinačnim stavkama, ta će se stavka pomaknuti prema položaju prema njihovim vrijednostima.

Redoslijed će slijediti najlogičniju konvenciju, tj. -Ve, 0, + ve. Najmanji broj ići će krajnje lijevo, a najveći krajnje desno, pod pretpostavkom da je sve ostalo zadano. Ako postoje stavke kojima nije dodijeljena nova vrijednost, one ostaju kao 0.

Napomena: Okviri 1, 2, 5 i 6 u gornjem primjeru još uvijek imaju zadanu vrijednost 0. Da pojasnimo, šest gornjih okvira imaju sljedeće vrijednosti: -1, 0, 0, 0, 0, 1 .

Ako želite postaviti okvir ispred okvira broj 4, tada svoj ciljani okvir morate postaviti na redoslijed od -2 ili niži.

Flex-osnova, Flex-raste i Flex-Shrink

Do sada su svi flex-predmeti bili jednake veličine. Pogledajmo sada kako možemo učiniti da određena flex-stavka zauzima više prostora unutar flex-spremnika u usporedbi s ostalim stavkama unutar istog spremnika.

Fleks-osnova

Ovo svojstvo određuje idealnu veličinu flex predmeta prije nego što se stavi u flex spremnik. Djeluje slično širini kada se radi s redovima. Djeluje poput visine pri radu sa stupovima. Dakle, ako radimo sa stupcima, a stavka je dobila i visinu i flex-osnovu, flex-osnova će imati prioritet jer je idealna visina koju će flex-item zauzeti ako ima dovoljno slobodnog prostora.

To se kaže, ako nema dovoljno prostora i ako nije dodijeljena visina ili širina stavkama. Predmeti će uzeti maksimalnu visinu ili maksimalnu širinu dostupnu u spremniku.

Flex-raste

Ovo svojstvo određuje kako flex-items mogu rasti kako bi popunili neiskorišteni prostor u flex-spremniku.

Ako dodijelimo flex-grow: 1svim okvirima, svi će ravnomjerno zauzeti preostali prostor, što je ujedno i zadana vrijednost. Broj može biti bilo koji, sve dok su svi isti broj.

Ako damo flex-grow: 1jednoj stavci, a drugoj damo a flex-grow: 2, tada će drugoj stavci zauzeti dva puta više neiskorištenog prostora u odnosu na prvu.

To se odnosi i na retke i na stupce.

Fleksibilno skupljanje

Ovo svojstvo određuje kako se flex-elementi mogu smanjiti kad u flex-spremniku nema dovoljno prostora.

flex-shrink: 1Je zadana vrijednost, što znači da će se sve stavke smanjiti na istoj stopi po defaultu.

Napomena:flex-shrink: 0; znači da se ovaj određeni predmet nikada ne bi trebao smanjiti.

flex-shrink: 2; znači da bi se ovaj određeni predmet trebao smanjiti brže od ostalih u flex-shrink: 1;

Savijati

Ovo je skraćena verzija za flex-grow, flex-shrink i flex-osnovu u tom određenom redoslijedu.

Ako trebate koristiti sve gore navedena tri, jednostavno možete upotrijebiti nešto poput ovoga:

flex: 0 2 200px; gdje se 0 odnosi na flex-grow, 2 se odnosi na flex-shrink, a 200px odnosi se na flex osnovu.

Čestitamo!

To je to! To su ključni sastojci za postajanje flex majstorom. I kao i za svaku drugu stvar u životu i kodu, i praksa je savršena. Toplo preporučujem primjenu ovog vodiča u praksi kako biste stekli praktično razumijevanje. Jedan od primjera mogao bi biti početak nečega malog, poput jednostavne navigacijske trake.

Također možete provjeriti vezu do moje kolekcije Codepen na flex-boxu koji sam koristio za stvaranje tih flexboxova na gornjim slikama i dotjerivati ​​ih da vidim kako se mijenjaju.

Hvala vam što ste pročitali ovaj vodič na flexboxu. Nadam se da je bilo korisno i informativno. Ako imate pitanja ili želite podijeliti svoja razmišljanja o ovoj temi, slobodno se obratite putem odjeljka za komentare ili e-poštom na [email protected]

Ako vam je ovo čitanje dragocjeno, pokažite ovom članku malo ljubavi, ostavljajući neke pljeskove kako bi ga mogli pronaći i drugi programeri.

ZeeshaanMaudar - Pregled

Kôd za zabavu Kôd za promjenu Kôd za društveno dobro - ZeeshaanMaudar github.com