Flexbox izmēru noteikšanas algoritma atšifrēšana: padziļināts ieskats satura vadītā izkārtojumā

Vai esat kādreiz izmantojis flex: 1 elementu kopai, sagaidot perfekti vienādas kolonnas, bet atklājot, ka to izmēri tomēr atšķiras? Vai esat cīnījies ar flex elementu, kurš spītīgi atsakās samazināties, izraisot neglītu pārplūdi, kas salauž jūsu dizainu? Šīs bieži sastopamās problēmas liek izstrādātājiem nonākt minējumu un nejaušu īpašību maiņas ciklā. Risinājums tomēr nav maģija; tā ir loģika.

Atbilde uz šīm mīklām slēpjas dziļi CSS specifikācijā, procesā, kas pazīstams kā Flexbox iekšējais izmēru noteikšanas algoritms. Tas ir spēcīgs, uz saturu orientēts dzinējs, kas darbina Flexbox, taču tā iekšējā loģika bieži vien var šķist kā necaurredzama melnā kaste. Šī algoritma izpratne ir atslēga, lai apgūtu Flexbox un veidotu patiesi paredzamas, noturīgas lietotāja saskarnes.

Šī rokasgrāmata ir paredzēta izstrādātājiem visā pasaulē, kuri vēlas pāriet no "izmēģinājumu un kļūdu" metodes uz "apzinātu dizainu", izmantojot Flexbox. Mēs soli pa solim atklāsim šo spēcīgo algoritmu, pārvēršot neskaidrības skaidrībā un dodot jums iespēju veidot robustākus un globāli apzinātus izkārtojumus, kas der jebkuram saturam, jebkurā valodā.

Ārpus fiksētiem pikseļiem: Izpratne par iekšējo un ārējo izmērošanu

Pirms iedziļināmies pašā algoritmā, ir svarīgi saprast fundamentālu CSS izkārtojuma koncepciju: atšķirību starp iekšējo un ārējo izmērošanu.

• Ārējā izmērošana (Extrinsic Sizing): Tas ir tad, kad jūs, izstrādātājs, skaidri definējat elementa izmēru. Īpašības, piemēram, width: 500px, height: 50% vai width: 30rem, ir ārējās izmērošanas piemēri. Izmēru nosaka faktori, kas ir ārpus elementa satura.
• Iekšējā izmērošana (Intrinsic Sizing): Tas ir tad, kad pārlūks aprēķina elementa izmēru, pamatojoties uz tā saturu. Poga, kas dabiski kļūst platāka, lai pielāgotos garākam teksta nosaukumam, izmanto iekšējo izmērošanu. Izmēru nosaka faktori, kas ir elementa iekšienē.

Flexbox ir iekšējās, uz saturu balstītas izmērošanas meistars. Kamēr jūs sniedzat noteikumus (flex īpašības), pārlūks pieņem galīgos lēmumus par izmēru, pamatojoties uz flex elementu saturu un pieejamo vietu konteinerā. Tieši tas padara to tik spēcīgu plūstošu, adaptīvu dizainu veidošanā.

Trīs elastības pīlāri: Atgādinājums par `flex-basis`, `flex-grow` un `flex-shrink`

Flexbox algoritma lēmumus galvenokārt nosaka trīs īpašības, kuras bieži tiek iestatītas kopā, izmantojot saīsinājumu flex. To stabila izpratne ir nepieciešama, lai saprastu turpmākos soļus.

1. `flex-basis`: Sākuma līnija

Uztveriet flex-basis kā ideālo jeb "hipotētisko" sākuma izmēru flex elementam pa galveno asi, pirms notiek jebkāda palielināšana vai samazināšana. Tas ir pamats, no kura tiek veikti visi pārējie aprēķini.

• Tā var būt garuma vienība (piem., 100px, 10rem) vai procentuāla vērtība (25%).
• Noklusējuma vērtība ir auto. Kad iestatīts uz auto, pārlūks vispirms aplūko elementa galvenā izmēra īpašību (width horizontālam flex konteineram, height vertikālam).
• Lūk, kritiskā saikne: Ja arī galvenā izmēra īpašība ir auto, flex-basis tiek noteikts kā elementa iekšējais, uz saturu balstītais izmērs. Tādējādi pats saturs jau no paša sākuma piedalās izmēru noteikšanas procesā.
• Ir pieejama arī vērtība content, kas skaidri norāda pārlūkam izmantot iekšējo izmēru.

2. `flex-grow`: Pozitīvās telpas pieprasīšana

Īpašība flex-grow ir bezvienības skaitlis, kas nosaka, cik daudz no pozitīvās brīvās vietas flex konteinerā elementam vajadzētu absorbēt, salīdzinot ar tā blakuselementiem. Pozitīva brīvā vieta pastāv, ja flex konteiners ir lielāks par visu tā elementu `flex-basis` vērtību summu.

• Noklusējuma vērtība ir 0, kas nozīmē, ka elementi pēc noklusējuma nepalielināsies.
• Ja visiem elementiem ir flex-grow: 1, atlikusī vieta tiek sadalīta vienādi starp tiem.
• Ja vienam elementam ir flex-grow: 2 un pārējiem flex-grow: 1, pirmais elements saņems divreiz vairāk pieejamās brīvās vietas nekā pārējie.

3. `flex-shrink`: Negatīvās telpas atdošana

Īpašība flex-shrink ir pretstats flex-grow. Tas ir bezvienības skaitlis, kas nosaka, kā elements atdod vietu, kad konteiners ir pārāk mazs, lai uzņemtu visu tā elementu `flex-basis`. Šī bieži vien ir visvairāk pārprastā no šīm trim īpašībām.

• Noklusējuma vērtība ir 1, kas nozīmē, ka elementiem ir atļauts nepieciešamības gadījumā samazināties.
• Bieži sastopams nepareizs uzskats ir, ka flex-shrink: 2 liek elementam samazināties "divreiz ātrāk" vienkāršā nozīmē. Tas ir niansētāk: apjoms, par kādu elements samazinās, ir proporcionāls tā `flex-shrink` koeficientam, kas reizināts ar tā `flex-basis`. Šo svarīgo detaļu mēs izpētīsim ar praktisku piemēru vēlāk.

Flexbox izmēru noteikšanas algoritms: Soli pa solim sadalījums

Tagad atvērsim priekškaru un iziesim cauri pārlūka domāšanas procesam. Lai gan oficiālā W3C specifikācija ir ļoti tehniska un precīza, mēs varam vienkāršot galveno loģiku vieglāk sagremojamā, secīgā modelī vienai flex rindai.

1. solis: Noteikt Flex bāzes izmērus un hipotētiskos galvenos izmērus

Pirmkārt, pārlūkam ir nepieciešams sākumpunkts katram elementam. Tas aprēķina flex bāzes izmēru katram elementam konteinerā. To galvenokārt nosaka atrisinātā flex-basis īpašības vērtība. Šis flex bāzes izmērs kļūst par elementa "hipotētisko galveno izmēru" nākamajiem soļiem. Tas ir izmērs, kāds elements *vēlas* būt pirms jebkādām sarunām ar blakuselementiem.

2. solis: Noteikt Flex konteinera galveno izmēru

Tālāk pārlūks noskaidro paša flex konteinera izmēru pa tā galveno asi. Tas varētu būt fiksēts platums no jūsu CSS, procentuāla daļa no tā vecākelementa, vai arī tas varētu būt iekšēji noteikts pēc tā paša satura. Šis galīgais, noteiktais izmērs ir vietas "budžets", ar kuru flex elementiem ir jārēķinās.

3. solis: Apkopot Flex elementus Flex rindās

Pēc tam pārlūks nosaka, kā grupēt elementus. Ja ir iestatīts flex-wrap: nowrap (noklusējums), visi elementi tiek uzskatīti par daļu no vienas rindas. Ja ir aktīvs flex-wrap: wrap vai wrap-reverse, pārlūks sadala elementus vienā vai vairākās rindās. Pārējais algoritms tiek piemērots katrai elementu rindai neatkarīgi.

4. solis: Atrisināt elastīgos garumus (Galvenā loģika)

Šī ir algoritma sirds, kur notiek faktiskā izmērošana un sadale. Tas ir divdaļīgs process.

4.a daļa: Aprēķināt brīvo vietu

Pārlūks aprēķina kopējo pieejamo brīvo vietu flex rindā. To dara, atņemot visu elementu flex bāzes izmēru summu (no 1. soļa) no konteinera galvenā izmēra (no 2. soļa).

Brīvā vieta = Konteinera galvenais izmērs - Visu elementu Flex bāzes izmēru summa

Šis rezultāts var būt:

• Pozitīvs: Konteineram ir vairāk vietas, nekā nepieciešams elementiem. Šī papildu vieta tiks sadalīta, izmantojot flex-grow.
• Negatīvs: Elementi kopā ir lielāki nekā konteiners. Šis vietas deficīts (pārplūde) nozīmē, ka elementiem jāsamazinās atbilstoši to flex-shrink vērtībām.
• Nulle: Elementi ietilpst perfekti. Palielināšana vai samazināšana nav nepieciešama.

4.b daļa: Sadalīt brīvo vietu

Tagad pārlūks sadala aprēķināto brīvo vietu. Tas ir iteratīvs process, bet mēs varam apkopot loģiku:

• Ja brīvā vieta ir pozitīva (palielināšana):
  1. Pārlūks saskaita visus rindā esošo elementu flex-grow koeficientus.
  2. Tad tas proporcionāli sadala pozitīvo brīvo vietu katram elementam. Vietas daudzums, ko saņem elements, ir: (Elementa flex-grow / Visu flex-grow koeficientu summa) * Pozitīvā brīvā vieta.
  3. Elementa galīgais izmērs ir tā flex-basis plus tā daļa no sadalītās vietas. Šo palielināšanos ierobežo elementa max-width vai max-height īpašība.
• Ja brīvā vieta ir negatīva (samazināšana):
  1. Šī ir sarežģītākā daļa. Katram elementam pārlūks aprēķina svērto samazināšanas koeficientu, reizinot tā flex bāzes izmēru ar tā flex-shrink vērtību: Svertais samazināšanas koeficients = Flex bāzes izmērs * flex-shrink.
  2. Tad tas saskaita visus šos svērtos samazināšanas koeficientus.
  3. Negatīvā vieta (pārplūdes apjoms) tiek sadalīta katram elementam proporcionāli, pamatojoties uz šo svērto koeficientu. Apjoms, par kādu elements samazinās, ir: (Elementa svērtais samazināšanas koeficients / Visu svērto samazināšanas koeficientu summa) * Negatīvā brīvā vieta.
  4. Elementa galīgais izmērs ir tā flex-basis mīnus tā daļa no sadalītās negatīvās vietas. Šo samazināšanos ierobežo elementa min-width vai min-height īpašība, kuras noklusējuma vērtība ir auto, kas ir ļoti svarīgi.

5. solis: Līdzināšana pa galveno asi

Kad visu elementu galīgie izmēri ir noteikti, pārlūks izmanto justify-content īpašību, lai līdzinātu elementus pa galveno asi konteinerā. Tas notiek *pēc* tam, kad visi izmēru aprēķini ir pabeigti.

Praktiski scenāriji: No teorijas uz realitāti

Saprast teoriju ir viena lieta; redzēt to darbībā nostiprina zināšanas. Apskatīsim dažus bieži sastopamus scenārijus, kurus tagad ir viegli izskaidrot, izprotot algoritmu.

1. scenārijs: Patiesi vienādas kolonnas un `flex: 1` saīsinājums

Problēma: Jūs piemērojat flex-grow: 1 visiem elementiem, bet tie neiegūst vienādus platumus.

Izskaidrojums: Tas notiek, ja izmantojat saīsinājumu, piemēram, flex: auto (kas izvēršas par flex: 1 1 auto) vai vienkārši iestatāt flex-grow: 1, atstājot flex-basis tā noklusējuma vērtībā auto. Saskaņā ar algoritmu, flex-basis: auto tiek atrisināts kā elementa satura izmērs. Tātad elements ar lielāku saturu sāk ar lielāku flex bāzes izmēru. Lai gan atlikusī brīvā vieta tiek sadalīta vienādi, elementu galīgie izmēri būs atšķirīgi, jo to sākumpunkti bija atšķirīgi.

Risinājums: Izmantojiet saīsinājumu flex: 1. Tas izvēršas par flex: 1 1 0%. Atslēga ir flex-basis: 0%. Tas liek katram elementam sākt ar hipotētisku bāzes izmēru 0. Viss konteinera platums kļūst par "pozitīvu brīvo vietu". Tā kā visiem elementiem ir flex-grow: 1, visa šī telpa tiek vienādi sadalīta starp tiem, rezultātā iegūstot patiesi vienāda platuma kolonnas neatkarīgi no to satura.

2. scenārijs: `flex-shrink` proporcionalitātes mīkla

Problēma: Jums ir divi elementi, abiem ir flex-shrink: 1, bet, kad konteiners samazinās, viens elements zaudē daudz vairāk platuma nekā otrs.

Izskaidrojums: Šis ir ideāls piemērs 4.b solim attiecībā uz negatīvo telpu. Samazināšana nav balstīta tikai uz flex-shrink koeficientu; to ietekmē elementa flex-basis. Lielākam elementam ir vairāk, ko "atdot".

Apsveriet 500px konteineru ar diviem elementiem:

• Elements A: flex: 0 1 400px; (400px bāzes izmērs)
• Elements B: flex: 0 1 200px; (200px bāzes izmērs)

Kopējais bāzes izmērs ir 600px, kas ir par 100px par lielu konteineram (100px negatīvās telpas).

• Elementa A svērtais samazināšanas koeficients: 400px * 1 = 400
• Elementa B svērtais samazināšanas koeficients: 200px * 1 = 200
• Kopējie svērtie koeficienti: 400 + 200 = 600

Tagad sadalīsim 100px negatīvās telpas:

• Elements A samazinās par: (400 / 600) * 100px = ~66.67px
• Elements B samazinās par: (200 / 600) * 100px = ~33.33px

Lai gan abiem bija flex-shrink: 1, lielākais elements zaudēja divreiz vairāk platuma, jo tā bāzes izmērs bija divreiz lielāks. Algoritms darbojās tieši tā, kā paredzēts.

3. scenārijs: Nesamazināmais elements un `min-width: 0` risinājums

Problēma: Jums ir elements ar garu teksta virkni (piemēram, URL) vai lielu attēlu, un tas atsakās samazināties zem noteikta izmēra, izraisot pārplūdi pāri konteineram.

Izskaidrojums: Atcerieties, ka samazināšanas procesu ierobežo elementa minimālais izmērs. Pēc noklusējuma flex elementiem ir min-width: auto. Elementam, kas satur tekstu vai attēlus, šī auto vērtība tiek atrisināta kā tā iekšējais minimālais izmērs. Tekstam tas bieži ir garākā nesadalāmā vārda vai virknes platums. Flex algoritms samazinās elementu, bet apstāsies, sasniedzot šo aprēķināto minimālo platumu, kas novedīs pie pārplūdes, ja joprojām nebūs pietiekami daudz vietas.

Risinājums: Lai atļautu elementam samazināties mazākam par tā iekšējā satura izmēru, jums ir jāpārraksta šī noklusējuma darbība. Visbiežākais risinājums ir piemērot min-width: 0 flex elementam. Tas pārlūkam saka: "Tev ir mana atļauja nepieciešamības gadījumā samazināt šo elementu līdz pat nulles platumam," tādējādi novēršot pārplūdi.

Iekšējās izmērošanas sirds: `min-content` un `max-content`

Lai pilnībā izprastu uz saturu balstītu izmērošanu, mums ātri jādefinē divi saistīti atslēgvārdi:

• max-content: Elementa iekšējais vēlamais platums. Tekstam tas ir platums, ko teksts aizņemtu, ja tam būtu bezgalīga telpa un tam nekad nebūtu jāpārnesas jaunā rindā.
• min-content: Elementa iekšējais minimālais platums. Tekstam tas ir tā garākās nesadalāmās virknes (piem., viena gara vārda) platums. Tas ir mazākais izmērs, kādu tas var sasniegt, nepārplūstot paša saturam.

Kad flex-basis ir auto un elementa width arī ir auto, pārlūks būtībā izmanto max-content izmēru kā elementa sākuma flex bāzes izmēru. Tāpēc elementi ar lielāku saturu sākumā ir lielāki, pat pirms flex algoritms sāk sadalīt brīvo vietu.

Globālā ietekme un veiktspēja

Šai uz saturu balstītajai pieejai ir svarīgi apsvērumi globālai auditorijai un veiktspējai kritiskās lietojumprogrammās.

Internacionalizācijai (i18n) ir nozīme

Satura vadīta izmērošana ir divpusējs zobens starptautiskām tīmekļa vietnēm. No vienas puses, tā ir fantastiska, ļaujot izkārtojumiem pielāgoties dažādām valodām, kur pogu uzraksti un virsraksti var ievērojami atšķirties garumā. No otras puses, tā var radīt negaidītus izkārtojuma pārrāvumus.

Apsveriet vācu valodu, kas ir slavena ar saviem garajiem salikteņiem. Vārds, piemēram, "Donaudampfschifffahrtsgesellschaftskapitän", ievērojami palielina elementa min-content izmēru. Ja šis elements ir flex elements, tas varētu pretoties samazināšanai veidos, ko jūs negaidījāt, projektējot izkārtojumu ar īsāku angļu tekstu. Līdzīgi, dažās valodās, piemēram, japāņu vai ķīniešu, starp vārdiem var nebūt atstarpju, kas ietekmē, kā tiek aprēķināta pārnešana un izmērošana. Šis ir ideāls piemērs tam, kāpēc iekšējā algoritma izpratne ir ļoti svarīga, lai veidotu izkārtojumus, kas ir pietiekami robusti, lai darbotos visiem un visur.

Piezīmes par veiktspēju

Tā kā pārlūkam ir jāizmēra flex elementu saturs, lai aprēķinātu to iekšējos izmērus, tam ir skaitļošanas izmaksas. Lielākajai daļai tīmekļa vietņu un lietojumprogrammu šīs izmaksas ir niecīgas un nav vērts par tām uztraukties. Tomēr ļoti sarežģītās, dziļi ligzdotās lietotāja saskarnēs ar tūkstošiem elementu šie izkārtojuma aprēķini var kļūt par veiktspējas vājo vietu. Šādos progresīvos gadījumos izstrādātāji varētu izpētīt CSS īpašības, piemēram, contain: layout vai content-visibility, lai optimizētu renderēšanas veiktspēju, bet tas ir temats citai dienai.

Praktiski ieteikumi: Jūsu Flexbox izmērošanas špikeris

Rezumējot, šeit ir galvenie secinājumi, kurus varat piemērot nekavējoties:

• Patiesi vienāda platuma kolonnām: Vienmēr izmantojiet flex: 1 (kas ir saīsinājums no flex: 1 1 0%). flex-basis ar nulles vērtību ir atslēga.
• Ja elements nesamazinās: Visticamākais vaininieks ir tā netiešais min-width: auto. Piemērojiet min-width: 0 flex elementam, lai ļautu tam samazināties zem tā satura izmēra.
• Atcerieties, ka `flex-shrink` ir svērts: Elementi ar lielāku flex-basis absolūtos skaitļos samazināsies vairāk nekā mazāki elementi ar to pašu flex-shrink koeficientu.
• `flex-basis` ir karalis: Tas nosaka sākumpunktu visiem izmēru aprēķiniem. Kontrolējiet flex-basis, lai visvairāk ietekmētu galīgo izkārtojumu. Izmantojot auto, tiek dota priekšroka satura izmēram; izmantojot konkrētu vērtību, jūs iegūstat skaidru kontroli.
• Domājiet kā pārlūks: Vizualizējiet soļus. Vispirms iegūstiet bāzes izmērus. Pēc tam aprēķiniet brīvo vietu (pozitīvu vai negatīvu). Visbeidzot, sadaliet šo vietu saskaņā ar grow/shrink noteikumiem.

Noslēgums

CSS Flexbox izmēru noteikšanas algoritms nav patvaļīga maģija; tā ir labi definēta, loģiska un neticami spēcīga uz saturu orientēta sistēma. Pārejot no vienkāršiem īpašību-vērtību pāriem un izprotot pamatā esošo procesu, jūs iegūstat spēju prognozēt, atkļūdot un veidot izkārtojumus ar pārliecību un precizitāti.

Nākamreiz, kad kāds flex elements uzvedīsies nepareizi, jums nebūs jāmin. Jūs varat domās iziet cauri algoritmam: pārbaudīt flex-basis, apsvērt satura iekšējo izmēru, analizēt brīvo vietu un piemērot flex-grow vai flex-shrink noteikumus. Jums tagad ir zināšanas, lai radītu lietotāja saskarnes, kas ir ne tikai elegantas, bet arī noturīgas, skaisti pielāgojoties satura dinamiskajai dabai, neatkarīgi no tā, no kurienes pasaulē tas nāk.