Flexboxi suuruse määramise algoritmi demüstifitseerimine: sügav sukeldumine sisupõhistesse paigutustesse

Kas olete kunagi kasutanud flex: 1 mitme elemendi puhul, oodates täiuslikult võrdseid veerge, kuid avastanud, et nende suurused on ikkagi erinevad? Või olete maadelnud flex-elemendiga, mis kangekaelselt keeldub kahanemast, põhjustades inetut ülevoolu, mis rikub teie disaini? Need levinud frustratsioonid viivad arendajad sageli oletuste ja juhuslike omaduste muutmise tsüklisse. Lahendus ei ole aga maagia, vaid loogika.

Vastus neile mõistatustele peitub sügaval CSS-i spetsifikatsioonis protsessis, mida tuntakse kui Flexboxi sisemise suuruse määramise algoritmi. See on võimas, sisuteadlik mootor, mis juhib Flexboxi, kuid selle sisemine loogika võib sageli tunduda läbipaistmatu musta kastina. Selle algoritmi mõistmine on Flexboxi valdamise ja tõeliselt ettearvatavate, vastupidavate kasutajaliideste loomise võti.

See juhend on mõeldud arendajatele üle kogu maailma, kes soovivad Flexboxiga liikuda "katse-eksituse" meetodilt "tahtliku disaini" juurde. Me harutame selle võimsa algoritmi samm-sammult lahti, muutes segaduse selguseks ja andes teile võimaluse luua tugevamaid ja globaalselt teadlikumaid paigutusi, mis töötavad mis tahes sisu ja keele puhul.

Fikseeritud pikslitest kaugemale: sisemise vs. välise suuruse mõistmine

Enne algoritmi endasse süvenemist on ülioluline mõista CSS-i paigutuse põhimõistet: erinevust sisemise ja välise suuruse vahel.

• Väline suurus: See on siis, kui teie, arendaja, määrate elemendi suuruse selgesõnaliselt. Omadused nagu width: 500px, height: 50% või width: 30rem on välise suuruse näited. Suuruse määravad tegurid, mis on elemendi sisust väljaspool.
• Sisemine suurus: See on siis, kui brauser arvutab elemendi suuruse selle sisu põhjal. Nupp, mis loomulikult laieneb, et mahutada pikemat tekstisilti, kasutab sisemist suurust. Suuruse määravad tegurid, mis on elemendi sees.

Flexbox on sisemise, sisupõhise suuruse meister. Kuigi teie annate reeglid (flex-omadused), teeb brauser lõplikud suuruse otsused flex-elementide sisu ja konteineris oleva vaba ruumi põhjal. Just see teebki selle nii võimsaks voolavate, reageerivate disainide loomisel.

Paindlikkuse kolm sammast: meeldetuletus flex-basis, flex-grow ja flex-shrink kohta

Flexboxi algoritmi otsused juhinduvad peamiselt kolmest omadusest, mida sageli määratakse koos flex lühendi abil. Nende kindel mõistmine on järgmiste sammude mõistmiseks vältimatu.

1. flex-basis: Stardijoon

Mõelge flex-basis'ele kui ideaalsele või "hüpoteetilisele" algsuurusele piki põhitelge, enne kui toimub igasugune kasvamine või kahanemine. See on baasjoon, millest kõik muud arvutused lähtuvad.

• See võib olla pikkus (nt 100px, 10rem) või protsent (25%).
• Vaikimisi väärtus on auto. Kui see on seatud väärtusele auto, vaatab brauser esmalt elemendi põhimõõtme omadust (width horisontaalse flex-konteineri puhul, height vertikaalse puhul).
• Siin on oluline seos: Kui ka põhimõõtme omadus on auto, lahendatakse flex-basis elemendi sisemiseks, sisupõhiseks suuruseks. Nii saab sisu ise suuruse määramise protsessis kohe algusest peale hääleõiguse.
• Saadaval on ka väärtus content, mis ütleb brauserile selgesõnaliselt, et ta kasutaks sisemist suurust.

2. flex-grow: Positiivse ruumi hõivamine

Omadus flex-grow on ühikuta arv, mis määrab, kui suure osa positiivsest vabast ruumist flex-konteineris element peaks endasse imama, võrreldes oma naaberelementidega. Positiivne vaba ruum tekib siis, kui flex-konteiner on suurem kui kõigi selle elementide `flex-basis` väärtuste summa.

• Vaikimisi väärtus on 0, mis tähendab, et elemendid vaikimisi ei kasva.
• Kui kõigil elementidel on flex-grow: 1, jaotatakse järelejäänud ruum nende vahel võrdselt.
• Kui ühel elemendil on flex-grow: 2 ja teistel flex-grow: 1, saab esimene element kaks korda rohkem vaba ruumi kui teised.

3. flex-shrink: Negatiivsest ruumist loobumine

Omadus flex-shrink on flex-grow'i vaste. See on ühikuta arv, mis reguleerib, kuidas element loobub ruumist, kui konteiner on liiga väike, et mahutada kõigi oma elementide `flex-basis` väärtusi. See on sageli neist kolmest kõige valesti mõistetud omadus.

• Vaikimisi väärtus on 1, mis tähendab, et elementidel on vajadusel lubatud vaikimisi kahaneda.
• Levinud väärarusaam on, et flex-shrink: 2 paneb elemendi lihtsas mõttes "kaks korda kiiremini" kahanema. Asi on nüansseeritum: elemendi kahanemise suurus on proportsionaalne selle `flex-shrink` teguri ja `flex-basis` korrutisega. Uurime seda olulist detaili hiljem praktilise näite varal.

Flexboxi suuruse määramise algoritm: samm-sammuline ülevaade

Nüüd kergitame saladuskatet ja käime läbi brauseri mõttekäigu. Kuigi ametlik W3C spetsifikatsioon on väga tehniline ja täpne, saame tuumikloogika lihtsustada seeditavamaks, järjestikuseks mudeliks ühe flex-rea jaoks.

Samm 1: Määrake paindlikud baassuurused ja hüpoteetilised põhimõõtmed

Esiteks vajab brauser iga elemendi jaoks lähtepunkti. See arvutab iga konteineris oleva elemendi jaoks paindliku baassuuruse. See määratakse peamiselt flex-basis omaduse lahendatud väärtuse järgi. See paindlik baassuurus muutub elemendi "hüpoteetiliseks põhimõõtmeks" järgmiste sammude jaoks. See on suurus, mida element *tahab* olla enne igasugust läbirääkimist oma naaberelementidega.

Samm 2: Määrake paindliku konteineri põhimõõde

Järgmiseks selgitab brauser välja flex-konteineri enda suuruse piki selle põhitelge. See võib olla teie CSS-ist pärit fikseeritud laius, protsent vanemast või see võib olla sisemiselt määratud oma sisu järgi. See lõplik, kindel suurus on "eelarve" ruumist, millega flex-elemendid peavad töötama.

Samm 3: Koguge paindlikud elemendid paindlikeks ridadeks

Seejärel määrab brauser, kuidas elemente grupeerida. Kui on määratud flex-wrap: nowrap (vaikimisi), loetakse kõik elemendid ühe rea osaks. Kui on aktiivne flex-wrap: wrap või wrap-reverse, jaotab brauser elemendid ühele või mitmele reale. Ülejäänud algoritmi rakendatakse seejärel igale elemendireale eraldi.

Samm 4: Lahendage paindlikud pikkused (tuumikloogika)

See on algoritmi süda, kus toimub tegelik suuruse määramine ja jaotamine. See on kaheosaline protsess.

Osa 4a: Arvutage vaba ruum

Brauser arvutab kogu saadaoleva vaba ruumi flex-reas. See teeb seda, lahutades konteineri põhimõõtmest (2. sammust) kõigi elementide paindlike baassuuruste summa (1. sammust).

Vaba ruum = Konteineri põhimõõde - Kõigi elementide paindlike baassuuruste summa

See tulemus võib olla:

• Positiivne: Konteineris on rohkem ruumi, kui elemendid vajavad. See lisaruum jaotatakse flex-grow abil.
• Negatiivne: Elemendid on kokku suuremad kui konteiner. See ruumipuudus (ülevool) tähendab, et elemendid peavad kahanema vastavalt oma flex-shrink väärtustele.
• Null: Elemendid sobivad ideaalselt. Kasvamine ega kahanemine pole vajalik.

Osa 4b: Jaotage vaba ruum

Nüüd jaotab brauser arvutatud vaba ruumi. See on iteratiivne protsess, kuid saame loogika kokku võtta:

• Kui vaba ruum on positiivne (kasvamine):
  1. Brauser liidab kokku kõik real olevate elementide flex-grow tegurid.
  2. Seejärel jaotab see positiivse vaba ruumi igale elemendile proportsionaalselt. Elemendi saadav ruum on: (Elemendi flex-grow / Kõigi flex-grow tegurite summa) * Positiivne vaba ruum.
  3. Elemendi lõplik suurus on selle flex-basis pluss selle osa jaotatud ruumist. Seda kasvu piirab elemendi max-width või max-height omadus.
• Kui vaba ruum on negatiivne (kahanemine):
  1. See on keerulisem osa. Iga elemendi jaoks arvutab brauser kaalutud kahanemisteguri, korrutades selle paindliku baassuuruse selle flex-shrink väärtusega: Kaalutud kahanemistegur = Paindlik baassuurus * flex-shrink.
  2. Seejärel liidab see kõik need kaalutud kahanemistegurid kokku.
  3. Negatiivne ruum (ülevoolu suurus) jaotatakse igale elemendile proportsionaalselt selle kaalutud teguri alusel. Elemendi kahanemise suurus on: (Elemendi kaalutud kahanemistegur / Kõigi kaalutud kahanemistegurite summa) * Negatiivne vaba ruum.
  4. Elemendi lõplik suurus on selle flex-basis miinus selle osa jaotatud negatiivsest ruumist. Seda kahanemist piirab elemendi min-width või min-height omadus, mis oluliselt vaikimisi on auto.

Samm 5: Põhitelje joondamine

Kui kõigi elementide lõplikud suurused on kindlaks määratud, kasutab brauser justify-content omadust elementide joondamiseks piki põhitelge konteineri sees. See juhtub *pärast* kõigi suuruse arvutuste lõpuleviimist.

Praktilised stsenaariumid: teooriast tegelikkusesse

Teooria mõistmine on üks asi; selle tegevuses nägemine kinnistab teadmisi. Vaatame mõningaid levinud stsenaariume, mida on nüüd meie algoritmi mõistmisega lihtne seletada.

Stsenaarium 1: Tõeliselt võrdsed veerud ja flex: 1 lühend

Probleem: Rakendate kõigile elementidele flex-grow: 1, kuid need ei saa võrdse laiusega.

Selgitus: See juhtub, kui kasutate lühendit nagu flex: auto (mis laieneb väärtusele flex: 1 1 auto) või määrate lihtsalt flex-grow: 1, jättes flex-basis selle vaikimisi väärtusele auto. Algoritmi kohaselt lahendatakse flex-basis: auto elemendi sisu suuruseks. Seega alustab suurema sisuga element suurema paindliku baassuurusega. Kuigi järelejäänud vaba ruum jaotatakse võrdselt, on elementide lõplikud suurused erinevad, kuna nende lähtepunktid olid erinevad.

Lahendus: Kasutage lühendit flex: 1. See laieneb väärtusele flex: 1 1 0%. Võti on flex-basis: 0%. See sunnib iga elementi alustama hüpoteetilise baassuurusega 0. Kogu konteineri laius muutub "positiivseks vabaks ruumiks". Kuna kõigil elementidel on flex-grow: 1, jaotatakse see kogu ruum nende vahel võrdselt, tulemuseks on tõeliselt võrdse laiusega veerud, sõltumata nende sisust.

Stsenaarium 2: flex-shrink proportsionaalsuse mõistatus

Probleem: Teil on kaks elementi, mõlemal flex-shrink: 1, kuid kui konteiner kahaneb, kaotab üks element palju rohkem laiust kui teine.

Selgitus: See on täiuslik näide 4b sammust negatiivse ruumi puhul. Kahanemine ei põhine ainult flex-shrink teguril; seda kaalutakse elemendi flex-basis'ega. Suuremal elemendil on rohkem, mida "ära anda".

Vaatleme 500px konteinerit kahe elemendiga:

• Element A: flex: 0 1 400px; (400px baassuurus)
• Element B: flex: 0 1 200px; (200px baassuurus)

Kogubaassuurus on 600px, mis on konteineri jaoks 100px liiga suur (100px negatiivset ruumi).

• Elemendi A kaalutud kahanemistegur: 400px * 1 = 400
• Elemendi B kaalutud kahanemistegur: 200px * 1 = 200
• Kaalutud tegurite summa: 400 + 200 = 600

Nüüd jaotame 100px negatiivset ruumi:

• Element A kahaneb: (400 / 600) * 100px = ~66.67px
• Element B kahaneb: (200 / 600) * 100px = ~33.33px

Kuigi mõlemal oli flex-shrink: 1, kaotas suurem element kaks korda rohkem laiust, sest selle baassuurus oli kaks korda suurem. Algoritm käitus täpselt nii, nagu ette nähtud.

Stsenaarium 3: Mittekahanev element ja min-width: 0 lahendus

Probleem: Teil on element pika tekstireaga (nagu URL) või suure pildiga ja see keeldub kahanemast alla teatud suuruse, põhjustades ülevoolu konteinerist.

Selgitus: Pidage meeles, et kahanemisprotsessi piirab elemendi minimaalne suurus. Vaikimisi on flex-elementidel min-width: auto. Teksti või pilte sisaldava elemendi puhul lahendatakse see auto väärtus selle sisemiseks miinimumsuuruseks. Teksti puhul on see sageli kõige pikema murdmatu sõna või stringi laius. Flex-algoritm kahandab elementi, kuid peatub, kui jõuab selle arvutatud miinimumlaiuseni, mis põhjustab ülevoolu, kui ruumi ikka veel ei piisa.

Lahendus: Et lubada elemendil kahaneda väiksemaks kui selle sisemine sisu suurus, peate selle vaikimisi käitumise üle kirjutama. Kõige levinum lahendus on rakendada flex-elemendile min-width: 0. See ütleb brauserile: "Teil on minu luba kahandada see element vajadusel kuni nulli laiuseni," vältides seega ülevoolu.

Sisemise suuruse süda: min-content ja max-content

Et sisupõhist suuruse määramist täielikult mõista, peame kiiresti defineerima kaks seotud märksõna:

• max-content: Elemendi sisemine eelistatud laius. Teksti puhul on see laius, mille tekst võtaks, kui tal oleks lõputult ruumi ja ta ei peaks kunagi reamurdmist tegema.
• min-content: Elemendi sisemine miinimumlaius. Teksti puhul on see selle pikima murdmatu stringi laius (nt üks pikk sõna). See on väikseim, milleni see saab minna, ilma et selle enda sisu üle voolaks.

Kui flex-basis on auto ja elemendi width on samuti auto, kasutab brauser sisuliselt max-content suurust elemendi algse paindliku baassuurusena. Seetõttu on suurema sisuga elemendid suuremad juba enne, kui flex-algoritm hakkab vaba ruumi jaotama.

Globaalsed mõjud ja jõudlus

Sellel sisupõhisel lähenemisel on olulised kaalutlused globaalsele publikule ja jõudluskriitilistele rakendustele.

Rahvusvahelistamine (i18n) on oluline

Sisupõhine suuruse määramine on rahvusvaheliste veebisaitide jaoks kahe teraga mõõk. Ühest küljest on see fantastiline, võimaldades paigutustel kohaneda erinevate keeltega, kus nuppude sildid ja pealkirjad võivad pikkuselt drastiliselt erineda. Teisest küljest võib see põhjustada ootamatuid paigutuse katkemisi.

Mõelge saksa keelele, mis on kuulus oma pikkade liitsõnade poolest. Sõna nagu "Donaudampfschifffahrtsgesellschaftskapitän" suurendab oluliselt elemendi min-content suurust. Kui see element on flex-element, võib see kahanemisele vastu seista viisil, mida te lühema ingliskeelse tekstiga paigutust kujundades ei osanud oodata. Samamoodi ei pruugi mõnedes keeltes nagu jaapani või hiina keel olla sõnade vahel tühikuid, mis mõjutab reamurdmise ja suuruse arvutamist. See on täiuslik näide sellest, miks sisemise algoritmi mõistmine on ülioluline, et luua paigutusi, mis on piisavalt tugevad, et töötada kõigi jaoks, kõikjal.

Märkused jõudluse kohta

Kuna brauser peab mõõtma flex-elementide sisu nende sisemiste suuruste arvutamiseks, on sellel arvutuslik kulu. Enamiku veebisaitide ja rakenduste puhul on see kulu tühine ja muretsemist mitte väärt. Kuid väga keerulistes, sügavalt pesastatud tuhandete elementidega kasutajaliidestes võivad need paigutuse arvutused muutuda jõudluse pudelikaelaks. Sellistel edasijõudnud juhtudel võivad arendajad uurida CSS-i omadusi nagu contain: layout või content-visibility renderdamise jõudluse optimeerimiseks, kuid see on teema teiseks päevaks.

Rakendatavad teadmised: Teie Flexboxi suuruse spikker

Kokkuvõtteks on siin peamised järeldused, mida saate kohe rakendada:

• Tõeliselt võrdse laiusega veergude jaoks: Kasutage alati flex: 1 (mis on lühend väärtusest flex: 1 1 0%). Nullväärtusega flex-basis on võti.
• Kui element ei kahane: Kõige tõenäolisem süüdlane on selle kaudne min-width: auto. Rakendage flex-elemendile min-width: 0, et lubada sellel kahaneda alla oma sisu suuruse.
• Pidage meeles, et `flex-shrink` on kaalutud: Suurema flex-basis'ega elemendid kahanevad absoluutarvudes rohkem kui väiksemad elemendid sama flex-shrink teguriga.
• `flex-basis` on kuningas: See seab lähtepunkti kõigile suuruse arvutustele. Kontrollige flex-basis't, et omada suurimat mõju lõplikule paigutusele. auto kasutamine delegeerib sisu suurusele; konkreetse väärtuse kasutamine annab teile selgesõnalise kontrolli.
• Mõelge nagu brauser: Visualiseerige samme. Esmalt hankige baassuurused. Seejärel arvutage vaba ruum (positiivne või negatiivne). Lõpuks jaotage see ruum vastavalt kasvu/kahanemise reeglitele.

Kokkuvõte

CSS Flexboxi suuruse määramise algoritm ei ole suvaline maagia; see on hästi defineeritud, loogiline ja uskumatult võimas sisuteadlik süsteem. Liikudes mööda lihtsatest omaduse-väärtuse paaridest ja mõistes aluseks olevat protsessi, saate võime ennustada, siluda ja arhitektuurida paigutusi enesekindluse ja täpsusega.

Järgmine kord, kui flex-element käitub valesti, ei pea te arvama. Saate vaimselt samm-sammult algoritmi läbi käia: kontrollige `flex-basis`'t, arvestage sisu sisemist suurust, analüüsige vaba ruumi ja rakendage `flex-grow` või `flex-shrink` reegleid. Teil on nüüd teadmised, et luua kasutajaliideseid, mis ei ole mitte ainult elegantsed, vaid ka vastupidavad, kohandudes kaunilt sisu dünaamilise olemusega, olenemata sellest, kust maailma nurgast see pärineb.