Još više o tome kako funkcionira Flexbox - objasnjeno u velikim, živopisnim, animiranim gifovima

Zadnji put smo započeli s osnovnim svojstvima Flexboxa: smjer fleksibilnosti, sadržaj opravdanja, poravnavanje stavki i poravnavanje.

Ove su naredbe snažne za stvaranje osnovnih izgleda. Ali jednom kad započnete s izradom web stranica s Flexboxom, morat ćete ići dublje kako biste iskoristili njezin potencijal.

Sada pogledajmo dublje dimenzije Flexboxa - i kako to iskoristiti za izradu prilagodljivih i lijepih izgleda.

Objekt br. 1: Flex-Basis

U posljednjem smo članku uglavnom pogledali svojstva koja se primjenjuju na elemente spremnika. Ovaj put isključivo ćemo ispitivati ​​određivanje veličine koja se primjenjuje na dječje elemente.

Naše prvo svojstvo je, po mom mišljenju, jedno od najmanje dobro objašnjenih svojstava u Flexbox udžbenicima.

Ali - ne brini. Zapravo je vrlo jednostavno.

Flex-osnova kontrolira zadanu veličinu elementa, prije nego što njime manipuliraju druga svojstva Flexbox-a (o tome više o tome kasnije).

U donjem GIF-u to znači da je zamjenjiv sa svojstvom širine:

Međutim, ono što čini fleksibilnu osnovu jedinstvenom u širini je da odgovara našim dobrim olovim fleksibilnim osovinama:

Flex-osnova utječe na veličinu elementa preko glavne osi.

Da vidimo što se događa kada zadržimo fleksibilnu osnovu jednaku, ali promijenimo smjer glavne osi:

Imajte na umu da smo se morali ručno postaviti s visine na podešavanje širine. Flex-base prema tome naizmjenično određuje širinu ili visinu, ovisno o smjeru savijanja.

Objekt br. 2: Flex Grow

Sada ćemo malo složenije.

Prvo postavimo sve naše kvadrate na istu širinu od 120 px:

Sada, kada se radi o svojstvu zvanom flex-raste, zadano je 0. To znači da se ne mogu povećati kvadrati kako bi zauzeli prostor u spremniku.

Što to znači? Pa, pokušajmo povećati fleksibilni rast na 1 za svaki kvadrat:

Kvadrati zajedno zauzimaju cijelu širinu spremnika, pri čemu je prostor ravnomjerno raspoređen među njima. Vrijednost fleksibilnog rasta nadjačava širinu.

Zbunjujući dio o fleksibilnom rastu, međutim, je ono što vrijednost zapravo znači. Što fleks raste: 1 zapravo podrazumijeva?

Pa, evo kako to izgleda ako postavimo fleksibilni rast svakog kvadrata na 999:

To je ... potpuno isto.

To je zato što fleksibilni rast nije apsolutna vrijednost - već relativna vrijednost.

Ono što je važno nije sama vrijednost kvadrata sa fleksibilnim rastom, već ono što je u odnosu na ostale kvadrate.

Ako svaki kvadrat postavimo na fleksibilni rast: 1, a zatim prilagodimo kvadrat # 3 sa fleksibilnim rastom, vidimo promjene:

Da bismo doista razumjeli što se ovdje događa, hajde da se malo skrenemo u neku (jednostavnu) matematiku.

Svaki kvadrat započinje fleksom rasta od 1. Ako zbrojimo fleks-rast svakog kvadrata, naš ukupni broj je šest. Kontejner je tako podijeljen u 6 zasebnih odjeljaka. Svaki kvadrat raste kako bi popunio 1/6 slobodnog prostora u spremniku.

Kad smo postavili fleksibilni rast Square # 3 na 2, spremnik je sada podijeljen u 7 različitih odjeljaka, budući da je ukupno svojstava flex-raste 1 + 1 + 2 + 1 + 1 + 1.

Kvadrat # 3 tada dobiva 2/7 tog prostora, a ostatak 1/7.

Kad krenemo na fleks-rast: 3 za kvadrat # 3, spremnik je podijeljen u 8 odjeljaka (1 + 1 + 3 + 1 + 1 + 1) i kvadrat # 3 dobiva 3/8, a ostatak dobiva 1/8 ,

I tako dalje.

Rast fleksibilnosti odnosi se na proporcije. Ako svaki kvadrat postavimo na fleks-rast: 4, a kvadrat # 3 na fleks-rast: 12, dobit ćemo isti rezultat kao da je 1 i 3, respektivno:

Ono što je važno je što je rast fleksibilnog rasta svakog kvadrata proporcionalan ostalima.

Kao završna napomena, zapamtite da se baš poput fleksibilne osnove, flex-raste primjenjuje na glavnoj osovini. Naši će se kvadrati povećavati samo u širini, osim ako ne postavimo fleksibilni smjer u stupac.

Objekt br. 3: Flex smanjiti

Flex-shrink je suprotno od flex-raste, što određuje koliko kvadrat se može smanjiti.

U igru ​​dolazi samo ako se elementi moraju smanjiti kako bi se uklopili u njihov spremnik - tj. Kada je spremnik jednostavno premalen.

Njegova glavna upotreba je određivanje stavki koje želite smanjiti, a koje ne. Prema zadanim postavkama, svaki kvadrat ima fleksibilnu veličinu od 1 - što znači da će se smanjiti kako se okvir steže.

Pogledajmo to u akciji. U donjim GIFS-ovima kvadrati imaju fleks-1, tako da oni pune spremnik i fleks-smanjuju 1, tako da se oni mogu smanjiti kao i prije.

Sada postavimo fleksibilnu površinu kvadrata br. 3 na 0. Zabranjeno je smanjivanje, pa dok naraste da stane na spremnik, odbije se ispod postavljene širine 120 px.

Zadana vrijednost za flex-shrink je 1 - to znači da će se vaši elementi smanjiti sve dok im ne kažete da ne!

Opet, fleks-smanjenje je oko proporcija. Ako jedna kutija ima flex-shrink 6, a ostala ima flex-shrink 2, jedna će se kutija smanjiti 3x jednako brzo kao i ostala, jer se prostor sažima.

Imajte na umu ovo glasilo: kvadrat s 3x fleksibilnim smanjivanjem smanjit će se 3x jednako brzo. To ne znači da će smanjiti 1/3 širine.

U trenu ćemo zaroniti dublje u to koliko se stvari smanji i raste. Ali prvo, dođimo do našeg posljednjeg imanja i sve spojimo.

Objekt br. 4: Fleks

Flex je skraćenica za rast, smanjenje i temelj - sve zajedno.

Zadane vrijednosti su 0 (narasti) 1 (smanjiti se) i automatski (osnova).

U našem posljednjem primjeru, pojednostavimo do dva okvira.

Evo njihovih svojstava:

.square # one {
  fleksibilnost: 2 1 300px;
}
. kvadrat # dva {
  fleksibilnost: 1 2 300px;
}

Oboje imaju istu fleksibilnu osnovu. To znači da ako ima dovoljno prostora za oba (spremnik je 600 px plus prostor za margine i podloge), oboje će biti širine 300 px.

Ali kako okvir raste, kvadrat 1 (s većim fleksibilnim rastom) rasti će dvostruko brže. Kako se kutija ugovara, kvadrat 2 (s većim fleksibilnim skupljanjem) smanjit će se dvostruko brže.

Sada svi zajedno:

Kako se stvari smanjuju i rastu

Evo što može biti zbunjujuće: kada kvadrat 1 raste, ne postaje dvostruko veći od kvadrata 2. Isto tako, kada se kvadrat 2 smanjuje, ne smanjuje se upola manje od kvadrata 1 - iako je omjer fleksibilnog stezanja je 2 do 1.

Nisu njihove veličine 2 do 1 ili 1 do 2. To je brzina smanjivanja i rasta.

Mala matematika

Početna veličina spremnika je 640px. Nakon što je obloga 20px obloga na svakoj strani spremnika, to ostavlja dovoljno prostora za oba kvadrata da se vrate u njihovu fleksibilnu osnovu od 300px.

Kad je spremnik postavljen na 430px, izgubili smo 210px prostora. Kvadrat 1, sa savijanjem 1, gubi 70 px. Kvadrat 2, sa savijanjem-2, gubi 140 px.

Kad se spremnik smanji na 340px, sada smo izgubili 300px prostora. Kvadrat 1 gubi 100 px, a Square 2 gubi 200px.

Izgubljeni prostor dijeli se prema omjeru njihovih fleksibilnih skupljanja (2 prema 1).

To je ista priča sa flex-raste. Kad spremnik naraste do 940px, a dobijemo 300px prostora, Square 1 dobije dodatnih 200px, a Square 2 dodatnih 100px.

Kada je riječ o fleksibilnim svojstvima, proporcije su naziv igre.

U gornjem GIF-u možete vidjeti kako se širina prilagođava omjerima, pri čemu delta (∆) prikazuje razliku od flex-osnove.

Zaključak

Kao završni preokret: fleksibilna osnova kontrolira koliko će jedan element biti duž glavne osi prije nego što dođe do rastućeg ili skupljanja. Rast fleksiranja određuje koliko će rasti srazmjerno elementima braće, a fleks-smanjivanje određuje koliko će se smanjiti.

Imamo još nekoliko svojstava Flexbox-a koje treba pokriti - pripazite na to u narednim tjednima.

Puno hvala na čitanju! Odgovor na ove članke bio je neodoljiv. Zaista cijenim sve koji odvoje vrijeme za čitanje, odgovor, preporuku i dijeljenje!

Ako postoji određeni koncept (Flexbox ili na neki drugi način) koji želite vidjeti objašnjen u sličnom članku, ostavite odgovor ili mi tvitovati. Možete me pratiti i na Twitteru i na Srednjem (pritiskom na gumb za praćenje u nastavku).