de Kyle Gallagher

Diferența dintre lățime și flex flexibil în Flexbox

Înțelegerea părților ciudate

Diferenta dintre latime si flex flexibil in
Diferenta dintre latime si flex flexibil in

Când am început să învăț Flexbox, lucrul care m-a impresionat cel mai mult a fost „De ce au adăugat această bază flexibilă?” Adică, am lățime … De ce există și o bază flexibilă?

„Constrângere dinamică”

Am citit mai multe articole pe această temă. Toate acestea au susținut o diferență între lățime și bază flexibilă. Niciunul dintre acestea nu a explicat pe deplin care ar fi trebuit să fie diferența.

După o mulțime de experimentări și unele bune jocuri la modă, am ajuns la concluzia că scopul principal al flex-base a fost de a oferi o constrângere „dinamică”. Totuși, ce anume vreau să spun prin asta? O constrângere „dinamică”.

1612005548 488 Diferenta dintre latime si flex flexibil in

Presupun că sunteți deja familiarizați sau cel puțin în general familiarizați cu CSS și Flexbox.

Nu voi intra în profunzime în niciun detaliu despre CSS sau Flexbox care vă va învăța conceptele de bază ale oricăreia dintre ele.

Trebuie să știu

De asemenea, voi folosi SCSS, nu CSS nativ, și metoda „Block-Element-Modifier (BEM)”. Motivul este că cred că este mai ușor să fii concis în acest fel. Deci, va trebui să înțelegeți noțiunile de bază ale SCSS și cuibăririi, BEM ar trebui să fie autodescriptiv în exemple.

1612005548 11 Diferenta dintre latime si flex flexibil in

Scopul acestui articol este de a simplifica enigma care pare să existe pe internet referitoare la flex-base. De multe ori am văzut răspunsul „folosiți flex-base în loc de lățime” ca răspuns la scopul său. Desigur, acest lucru este total acceptabil pentru majoritatea cazurilor, deși este posibil să-l utilizați în moduri mai avansate. Se pare că potențialul flex-base a evitat multe de ceva timp (bineînțeles că nu toate), dar îndrăznesc să spun mulți.

Vreau să încerc să te conving în acest articol, că flexbox-ul Flexbox nu înlocuiește lățimea (sau înălțimea). Este un instrument complet nou, cu propriul set de posibilități.

1612005548 978 Diferenta dintre latime si flex flexibil in

Carnea și cartofii

Așa că acum am spus aceste lucruri … Următoarea parte este să explic și să arăt exact despre ce vorbesc aici. După cum știți, atunci când lucrați cu flex-box, puteți utiliza flex-base în locul lățimii.

Exemple vizuale

În exemplul de mai sus, avem un element „interior” care va trăi în interiorul „elementului” exterior. Elementul exterior este Flexbox-ul nostru, iar interiorul are o bază flexibilă de 400 px.

Codul HTML pentru cele de mai sus ar putea arăta cam așa:

Rezultând o cutie gri care are exact 400 px lățime și 250 px înălțime în centrul ecranului nostru, așa:

1612005548 26 Diferenta dintre latime si flex flexibil in

În exemplul de mai sus, învelișul nostru .element, implicit automat la o direcție flexibilă, adică rând (de la stânga la dreapta) și nu coloană (de sus în jos). Sa nu uiti asta. În curând o vom schimba în coloană și veți vedea ce este tot acest articol. Această natură dinamică a bazei flex flexibile.

Să devenim „dinamici”

Deci, să schimbăm codul pentru a arăta acea „natură dinamică”. Pentru a face acest lucru, tot ce trebuie să facem este să schimbăm elementul exterior pentru a avea un (flex-direction: coloană) și schimbați înălţime la lăţime pe elementul interior (html nu se schimbă).

Schimbarea direcției de flexare schimbă direcția pe care o va efectua baza de flexie. Deci, în mod eficient baza flexibilă este atât lățimea, cât și înălțimea. În exemplul de mai sus, flex-base va avea ca rezultat acum blocul să aibă o înălțime de 400 px comparativ cu dreptunghiul de 400 px lățime pe care l-am văzut înainte.

1612005549 583 Diferenta dintre latime si flex flexibil in

Dacă vrei să te joci cu acest cod singur, iată un codepen cu codul de mai sus.

Observare

Observați cum în primul exemplu, flex-base preia rolul lățimii, iar în al doilea exemplu, rolul înălțimii. Flex-base este atât lățime, cât și înălțime într-un Flexbox, în funcție de direcția de flexie. Destul de la moda!

Înțelegere mai profundă / Cele mai bune practici

Iată câteva dintre cele mai importante lucruri pe care le-am învățat despre flex-base în timpul utilizării flexbox-ului Flexbox.

  • Flex-base controlează fie „lățimea”, fie „înălțimea” pe baza direcției flex
  • Flex-base va suprascrie orice altul lăţime: sau înălţime: proprietăți dacă sunt declarate în mod specific altceva decât flex-base: auto (automat în mod implicit)
  • Stenograma pentru baza flex este (flex: $ grow, $ shrink, $ size) și este setată la (flex: 0 1 auto) în mod implicit.
  • Când baza flex este setată la auto, verifică mai întâi o proprietate de lățime sau înălțime (în funcție de direcție) dacă niciuna, aceasta folosește dimensionarea conținutului elementelor
  • Flex-base va asculta în continuare orice min / lățimea maximă: sau setări de înălțime. Din nou, se bazează pe direcție flexibilă:
  • Flex-bază într-o coloană suprascrie înălţime:, acest lucru este important pentru că, deși lăţime: va asculta flex-shrink, înălţime: nu voi. (Acest lucru poate provoca rezultate confuze și neașteptate în proiectarea dvs.)

Important de reținut

Observați cum auto este îndrăzneț. În mod implicit, dacă aveți un set de lățime și nu ați declarat o valoare de bază flexibilă, lățimea va funcționa normal pe acel element. Nu există nicio diferență între cum bază flexibilă: va funcționa pe elementul dvs. și cum lăţime: va funcționa pe elementul dvs. Lățimea va respecta chiar și micșorarea flexibilă atunci când utilizați Flexbox.

Factorul divergent între lățime și bază flexibilă este capacitatea dinamică a bazei flexibile de a-și schimba direcția efectivă pe baza direcției flexibile.

Avertismentul

înălţime: pe de altă parte, acționează puțin diferit. Proprietatea înălțime nu respectă flexibilitatea în același mod în care lățimea. Când utilizați direcția flex coloană ar trebui să utilizați întotdeauna flex-base pentru a controla dinamic dimensiunea Flexbox, astfel încât să aveți rezultate consistente și așteptate.

De asemenea, luați o notă specială asupra punctului glonț numărul 4:

  • Când baza flex este setată la auto, verifică mai întâi o proprietate de lățime sau înălțime (în funcție de direcție) dacă niciuna, aceasta folosește dimensionarea conținutului elementelor

Aceasta înseamnă că baza flexibilă va dimensiona automat elementul în funcție de dimensiunea conținutului (dimensiunea elementului interior) atunci când este setat la flex-base: auto. Numai dacă nu există un lăţime: sau a înălţime: pus pe element.

Cele mai bune practici

Vă recomandăm ca atunci când puteți, ca cea mai bună practică să utilizați flex flexibil pe lățime sau înălțime, astfel rezultatele dvs. sunt întotdeauna consistente. Având în vedere că lăţime: va asculta flex-shrink și că înălţime: nu va înțelege că pot exista diferențe dramatice între modul în care lățimea și înălțimea vor funcționa într-un Flexbox atunci când utilizați alte proprietăți Flexbox împreună, cum ar fi flex-wrap de exemplu. Folosiți, de asemenea, stenograma de flex pentru comoditate, consistență și lizibilitate.

Stenograma pentru flex-base este (flex: $ grow, $ shrink, $ size) și este setată la (flex: 0 1 auto) în mod implicit.

flex: 0 1 200px;

Există unele cazuri în care este posibil să fie nevoie să folosiți lățimea sau înălțimea peste flex. Unele cazuri pot include soluții de eroare Flexbox. O resursă bună pe acest subiect este Flexbugs. Flexbugs este, de asemenea, un loc bun pentru a determina alte bune practici pe baza browserelor pe care intenționați să le susțineți.

Resurse aditionale

În cele ce urmează codepen de exemplu, arăt flex-wrap pentru a demonstra un exemplu vizual al informațiilor de mai sus din acest articol.

Foloseste asta codepen și revizuiți temeinic codul. Veți vedea cum folosesc flex-base o singură dată în întreaga bază de cod pentru a controla mai multe scenarii. Acesta este doar un mic exemplu de posibile cazuri de utilizare.

Concluzie

Știind că baza flexibilă este atât o restricție de lățime, cât și o înălțime este un instrument bun de avut. Se poate schimba dinamic. Folosind flex-base puteți crea câteva elemente de design foarte intuitive. Unii se pot schimba chiar și în timpul schimbării direcției de flexare a Flexbox la un punct de întrerupere crucial în design, oferindu-vă, sperăm, o soluție mai curată. Aceste cunoștințe ar trebui, de asemenea, să vă ajute să proiectați mai bine și cu mai multă încredere cu Flexbox, deoarece această funcționalitate este esențială pentru utilizarea Flexbox la maximul său potențial.

Dacă credeți că mi-a fost dor de ceva, am găsit o greșeală de scris, etc … vă rog să-mi spuneți!

Sper că acest articol scurt și dulce a fost găsit util cuiva. Dacă ați apreciat efortul investit, vă rugăm să dați o palmă articolului! ?

Intrați în legătură ?

Dacă doriți să vorbiți în magazin, atunci este cel mai bun loc pentru a vă conecta cu mine linkedin sau contactându-mă prin intermediul meu site-ul web.

Voi încerca tot posibilul pentru a răspunde la orice comentarii sau întrebări aici pe Medium.

Dacă faci chestia socială: Instagram sau Facebook.

Credite fotografice: (Waterfall | Jared Erondu) (Chatter | Dan Wayman) (Disclaimer | Pop & Zebra) (Obiectiv | Olav Ahrens Røtne) și (Let’s go | Goh Rhy Yan). Toate fotografiile de la Unsplash.com