Flexbox: Cât de mare este acea cutie flexibilă?

Aceasta este a treia parte a seriei mele despre Flexbox. În ultimele două articole, am analizat ce se întâmplă atunci când creați un container flexibil și am explorat alinierea așa cum funcționează în Flexbox. De data aceasta vom arunca o privire asupra dimensiunilor. Cum controlăm dimensiunea articolelor noastre flexibile și ce alegeri face browserul când controlează dimensiunea?

Afișarea inițială a articolelor Flex

Dacă am un set de articole, care au lungimi variabile de conținut în interior, și setez părintele lor pentru a display: flex , articolele se vor afișa ca un rând și se vor alinia la începutul acelei axe. În exemplul de mai jos, cele trei articole ale mele au o cantitate mică de conținut și pot afișa conținutul fiecărui articol ca o linie neîntreruptă. Există spațiu la capătul containerului flexibil în care articolele nu cresc, deoarece valoarea inițială a flex-grow este 0 , nu cresc .

Dacă adaug mai mult text la aceste articole, ele în cele din urmă umplu containerul și textul începe să se înfășoare. Casetelor li se atribuie o porțiune din spațiul din container care corespunde cât de mult text este în fiecare casetă - unui articol cu ​​un șir mai lung de text i se atribuie mai mult spațiu. Aceasta înseamnă că nu ajungem la o coloană înaltă și slabă, cu mult text, atunci când articolul de lângă ușa conține doar un singur cuvânt.

Acest comportament este probabil să vă fie familiar dacă ați folosit vreodată Flexbox, dar poate v-ați întrebat cum funcționează browserul la această dimensionare, de parcă vă uitați în mai multe browsere moderne, veți vedea că toate fac același lucru. Acest lucru se datorează faptului că astfel de detalii sunt elaborate în specificație, asigurându-vă că oricine implementează Flexbox într-un browser nou sau alt agent utilizator este conștient de modul în care ar trebui să funcționeze acest calcul. Putem folosi specificațiile pentru a găsi aceste informații singuri.

Specificația de dimensionare intrinsecă și extrinsecă CSS

Descoperiți destul de repede când vă uitați la orice despre dimensionare în specificația Flexbox, că multe dintre informațiile de care aveți nevoie sunt într-o altă specificație - CSS Intrisnic și Extrinsic Sizing. Acest lucru se datorează faptului că conceptele de dimensionare pe care le folosim nu sunt unice pentru Flexbox, în același mod în care proprietățile de aliniere nu sunt unice pentru Flexbox. Cu toate acestea, pentru modul în care sunt utilizate aceste construcții de dimensionare în Flexbox, trebuie să vă uitați în specificațiile Flexbox. Se poate simți un pic ca și cum sări înainte și înapoi, așa că voi aduna aici câteva definiții cheie, pe care le voi folosi în restul articolului.

Dimensiune preferată

Mărimea preferată a unei casete este dimensiunea definită de o width sau o height sau alias-urile logice pentru aceste proprietăți de inline-size block-size . Prin utilizarea:

 .box { width: 500px; }

Sau aliasul logic inline-size :

 .box { inline-size: 500px; }

Afirmați că doriți ca caseta dvs. să aibă o lățime de 500 de pixeli sau 500 de pixeli în direcția inline.

min-content Dimensiune

Dimensiunea minimă a conținutului este cea mai mică dimensiune pe care o poate avea o cutie fără a provoca debordare. Dacă caseta dvs. conține text, vor fi luate toate oportunitățile posibile de împachetare.

max-content Dimensiune

Dimensiunea maximă a conținutului este cea mai mare dimensiune pe care o poate avea cutia pentru a conține conținutul. Dacă caseta conține text fără formatare care să o despartă, atunci se va afișa ca un șir lung neîntrerupt.

Dimensiunea principală a articolului Flex

Mărimea principală a unui articol flexibil este dimensiunea pe care o are în dimensiunea principală. Dacă lucrați pe rând — în engleză — atunci dimensiunea principală este lățimea. Într-o coloană în limba engleză, dimensiunea principală este înălțimea.

Articolele au, de asemenea, o dimensiune principală minimă și maximă, așa cum este definită de min-width min-height pe dimensiunea principală.

Evaluarea dimensiunii unui articol Flex

Acum că avem câțiva termeni definiți, putem arunca o privire la modul în care sunt dimensionate articolele noastre flexibile. Valoarea inițială a proprietăților flex este următoarea:

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto

Baza flex-basis este lucrul din care se calculează dimensionarea. Dacă setăm flex-basis la 0 și flex-grow la 1, atunci toate cutiile noastre nu au lățime de pornire, astfel încât spațiul din containerul flexibil este împărțit uniform, alocand aceeași cantitate de spațiu fiecărui articol.

În timp ce dacă flex-basis este auto și flex-grow: 1 , doar spațiul de rezervă este distribuit, ținând cont de dimensiunea conținutului.

În situațiile în care nu există spațiu liber, de exemplu când avem mai mult conținut decât poate încăpea într-o singură linie, atunci nu există spațiu de distribuit.

Acest lucru ne arată că a afla ce înseamnă auto este destul de important dacă vrem să știm cum calculează Flexbox dimensiunea cutiilor noastre. Valoarea auto va fi punctul nostru de plecare.

Definirea Auto

Când auto este definită ca o valoare pentru ceva în CSS, va avea o semnificație foarte specifică în acel context, una la care merită să aruncăm o privire. Grupul de lucru CSS petrece mult timp să descopere ce înseamnă auto în orice context, așa cum explică această discuție pentru editorul de specificații Fantasai.

Putem găsi informații despre ce înseamnă auto atunci când este folosit ca bază flex-basis în specificație. Termenii definiți mai sus ar trebui să ne ajute să analizăm această afirmație.

„Atunci când este specificat pe un articol flexibil, cuvântul cheie auto preia valoarea proprietății principale de dimensiune ca „bază flexibilă” utilizată. Dacă această valoare este în sine automată, atunci valoarea utilizată este „conținut”.

Deci, dacă flex-basis este auto , Flexbox are o privire asupra proprietății principale definite de dimensiune. Am avea o dimensiune principală dacă am fi dat oricăruia dintre articolele noastre flexibile o width . În exemplul de mai jos, toate articolele au o lățime de 110px, așa că aceasta este utilizată ca dimensiune principală, deoarece valoarea inițială pentru flex-basis este automată.

Cu toate acestea, exemplul nostru inițial are articole care nu au lățime, ceea ce înseamnă că dimensiunea lor principală este auto și, prin urmare, trebuie să trecem la următoarea propoziție, „Dacă acea valoare este în sine automată, atunci valoarea utilizată este content ”.

Acum trebuie să ne uităm la ce spune specificațiile despre cuvântul cheie de content . Aceasta este o altă valoare pe care o puteți utiliza (în browserele compatibile) pentru flex-basis , de exemplu:

 .item { flex: 1 1 content; }

Specificația definește content după cum urmează:

„Indică o dimensiune automată bazată pe conținutul articolului flexibil. (De obicei este echivalent cu dimensiunea maximă a conținutului, dar cu ajustări pentru a gestiona raporturile de aspect, constrângerile intrinseci de dimensionare și fluxurile ortogonale"

În exemplul nostru, cu elemente flexibile care conțin text, atunci putem ignora unele dintre ajustările mai complicate și putem trata content ca fiind dimensiunea maximă a conținutului.

Deci, aceasta explică de ce, atunci când avem o cantitate mică de text în fiecare articol, textul nu se încadrează. Articolele flexibile sunt dimensionate automat, așa că Flexbox se uită la dimensiunea lor maximă de conținut, articolele se potrivesc în containerul lor la acea dimensiune și treaba este gata!

Povestea nu se termină aici, deoarece atunci când adăugăm mai mult conținut, casetele nu rămân la dimensiunea maximă a conținutului. Dacă ar face-o, ar ieși din containerul flexibil și ar provoca preaplin. Odată ce umplu recipientul, conținutul începe să se împacheteze, iar articolele devin diferite dimensiuni în funcție de conținutul din interiorul lor.

Rezolvarea lungimilor flexibile

Este în acest moment în care specificația devine destul de complexă, cu toate acestea, pașii care trebuie să se întâmple sunt următorii:

Mai întâi, adună dimensiunea principală a tuturor articolelor și vezi dacă este mai mare sau mai mică decât spațiul disponibil în container.

Dacă dimensiunea containerului este mai mare decât totalul, ne va păsa de factorul flex-grow , deoarece avem spațiu pentru a crește.

Dacă dimensiunea containerului este mai mică decât totalul, atunci ne va pasă de factorul flex-shrink deoarece trebuie să ne micșorăm.

Înghețați orice articole inflexibile, ceea ce înseamnă că putem decide deja o dimensiune pentru anumite articole. Dacă folosim flex-grow aceasta ar include orice articole care au flex-grow: 0 . Acesta este scenariul pe care îl avem când articolele noastre flexibile au spațiu rămas în container. Valoarea inițială a flex-grow este 0, așa că devin la fel de mari ca lățimea lor maximă și apoi nu mai cresc de la dimensiunea lor principală.

Dacă folosim flex-shrink atunci aceasta ar include orice articole cu flex-shrink: 0 . Putem vedea ce se întâmplă în acest pas dacă dăm setului nostru de articole flex-shrink de 0. Articolele devin înghețate în starea lor max-content și, prin urmare, nu se îndoaie și nu se aranjează pentru a se potrivi în container.

În cazul nostru, cu valorile inițiale ale articolelor flexibile, articolele noastre se pot micșora. Deci pașii continuă și algoritmul intră într-o buclă în care stabilește cât spațiu să aloce sau să ia. În cazul nostru, folosim flex-shrink , deoarece dimensiunea totală a articolelor noastre este mai mare decât containerul, așa că trebuie să luăm spațiu.

Factorul flex-shrink este înmulțit cu dimensiunea de bază interioară a articolelor, în cazul nostru aceasta este dimensiunea max-content . Aceasta oferă o valoare cu care să reduceți spațiul. Dacă articolele au eliminat spațiu numai în funcție de factorul flex-shrink atunci articolele mici ar putea dispărea, după ce li s-a îndepărtat tot spațiul, în timp ce elementul mai mare mai are spațiu de micșorare.

Există un pas suplimentar în această buclă pentru a verifica elementele care ar deveni mai mici sau mai mari decât dimensiunea lor principală țintă, caz în care articolul încetează să crească sau să se mai micșoreze. Din nou, acest lucru este pentru a evita ca anumite articole să devină mici sau masive în comparație cu restul articolelor.

Totul a fost simplificat din punct de vedere al specificațiilor, deoarece nu m-am uitat la unele dintre scenariile mai extrem de ușoare și, în general, puteți pur și simplu să vă gândiți mai departe, presupunând că sunteți bucuros să lăsați Flexbox să-și facă treaba și nu sunteți după pixeli. perfecţiune. Amintirea următoarelor două fapte va funcționa în majoritatea cazurilor.

Dacă creșteți din auto , atunci baza flex-basis va fi tratată fie ca orice lățime sau înălțime a articolului sau ca dimensiune max-content . Spațiul va fi apoi alocat în funcție de factorul flex-grow folosind acea dimensiune ca punct de plecare.

Dacă vă micșorați de la auto , atunci baza flex-basis va fi tratată fie ca orice lățime sau înălțime a articolului sau ca dimensiune max-content . Spațiul va fi apoi eliminat în funcție flex-basis înmulțită cu factorul flex-shrink și, prin urmare, eliminat proporțional cu dimensiunea conținutului maxim al articolelor.

Controlul creșterii și micșorării

Am petrecut cea mai mare parte a acestui articol descriind ce face Flexbox atunci când este lăsat pe propriile sale dispozitive. Puteți, desigur, să exercitați un control mai mare asupra elementelor dvs. flexibile utilizând proprietățile flex . Sperăm că vor părea mai previzibili cu o înțelegere a ceea ce se întâmplă în culise.

flex-basis sau oferind articolului în sine o dimensiune care este apoi folosită ca flex-basis preluați controlul de la algoritm, spunându-i lui Flexbox că ​​doriți să creșteți sau să vă micșorați față de această dimensiune specială. Puteți dezactiva creșterea sau micșorarea completă setând flex-grow sau flex-shrink la 0. În acest punct, totuși, merită să folosiți dorința de a controla elementele flexibile ca moment pentru a verifica dacă utilizați metoda corectă de aspect. Dacă încercați să aliniați elementele flexibile în două dimensiuni, atunci ar fi mai bine să alegeți Grid Layout.

Probleme legate de dimensiunea depanării

Dacă articolele dvs. flexibile ajung la o dimensiune neașteptată, atunci acest lucru se datorează de obicei pentru că baza dvs. flexibilă este automată și există ceva care îi dă articolului o lățime, care este apoi folosită ca bază flexibilă. Inspectarea articolului în DevTools poate ajuta la identificarea de unde provine dimensiunea. De asemenea, puteți încerca să setați o flex-basis de 0 , care va forța Flexbox să trateze articolul ca având lățime zero. Chiar dacă acesta nu este rezultatul pe care îl doriți, vă va ajuta să identificați valoarea flex-basis în utilizare ca fiind vinovată pentru problemele dvs. de dimensionare.

Lacune flexibile

O caracteristică foarte solicitată a Flexbox este capacitatea de a specifica goluri sau jgheaburi între elementele flexibile, în același mod în care putem specifica goluri în aspectul grilei și aspectul cu mai multe coloane. Această caracteristică este specificată pentru Flexbox ca parte a Box Alignment, iar prima implementare a browserului este pe cale. Firefox se așteaptă să livreze proprietățile gap pentru Flexbox în Firefox 63. Următorul exemplu poate fi vizualizat în Firefox Nightly.

Ca și în cazul aspectului grilei, lungimea spațiului este luată în considerare înainte ca spațiul să fie distribuit elementelor flexibile.

Încheierea

În acest articol, am încercat să explic câteva dintre punctele mai fine ale modului în care Flexbox funcționează cât de mari sunt elementele flexibile. Poate părea puțin academic, totuși, luând ceva timp pentru a înțelege modul în care funcționează, vă poate economisi o cantitate imensă de timp atunci când utilizați Flexbox în machetele dvs. Mi se pare foarte util să revin la faptul că, în mod prestabilit, Flexbox încearcă să vă ofere cel mai bun aspect al unui grup de articole cu dimensiuni diferite. Dacă un articol are mai mult conținut, i se acordă mai mult spațiu. Dacă dvs. și designul dvs. nu sunteți de acord cu ceea ce Flexbox crede că este cel mai bun, atunci puteți prelua controlul înapoi, setându-vă propria flex-basis .