Flexin kasvaminen, kutistuminen ja perusta

Oletusarvoisesti flex-lasten koko määräytyy niiden sisällön mukaan. Flexbox tarjoaa kuitenkin kolme ominaisuutta, joiden avulla voitte hallita tarkasti, miten lapset täyttävät käytettävissä olevan tilan: flex-grow määrittää, kuinka paljon ylimääräistä tilaa lapsi ottaa, flex-shrink määrittää, kuinka paljon se kutistuu tilan ollessa vähissä, ja flex-basis määrittää alkuperäisen koon ennen kasvamista tai kutistumista. Tailwind tarjoaa kaikki kolme tiiviillä apuluokilla.

flex-1 on yleisimmin käytetty flex-koon apuluokka. Se ottaa käyttöön arvon flex: 1 1 0% — kasvaa täyttämään käytettävissä olevan tilan, kutistuu tarvittaessa ja aloittaa nollaperustasta. Käytännössä flex-1 saa jokaisen elementin ottamaan yhtä suuren osuuden säilön jäljelle jäävästä tilasta. Kaksi flex-1-sisarelementtiä saavat kumpikin 50 %, kolme kumpikin 33 %.

flex-auto ottaa käyttöön arvon flex: 1 1 auto — elementti kasvaa ja kutistuu, mutta aloittaa elementin luonnollisesta sisällön koosta. Toisin kuin flex-1, joka aloittaa nollasta, flex-auto säilyttää elementtien kokoerot ennen ylimääräisen tilan jakamista suhteellisesti. Käyttäkää sitä, kun haluatte sisällön huomioivan jaon tasasuuruisten osuuksien sijaan.

flex-initial ottaa käyttöön arvon flex: 0 1 auto — selaimen oletusarvon. Elementit eivät kasva sisältönsä kokoa suuremmiksi (grow: 0), mutta ne kutistuvat tilan ollessa vähissä (shrink: 1). Tätä käytetään oletusarvon ilmaisemiseen selkeästi tilanteessa, jossa sisarelementit käyttävät flex-1-luokkaa. Näin ensimmäinen elementti säilyy sisältönsä kokoisena sisarelementtien täyttäessä jäljelle jäävän tilan.

flex-none ottaa käyttöön arvon flex: none — elementti ei kasva täyttämään ylimääräistä tilaa eikä kutistu tilan ollessa vähissä. Elementti säilyy aina täsmälleen luonnollisen sisältönsä kokoisena. Käyttäkää flex-none-luokkaa kuvakkeille, avatar-kuville, tunnisteille ja kiinteän levyisille elementeille, joiden koon tulee säilyä riippumatta flex-säilön käytettävissä olevasta tilasta.

Yksityiskohtaisempaa hallintaa varten Tailwind tarjoaa erilliset grow-, grow-0-, shrink- ja shrink-0-apuluokat. grow sallii elementin kasvamisen (flex-grow: 1). grow-0 estää kasvamisen. shrink sallii kutistumisen (flex-shrink: 1). shrink-0 estää kutistumisen — tästä on hyötyä, kun kuvia ja kuvakkeita ei haluta kutistaa säilön ollessa liian kapea.

basis-* määrittää flex-elementin alkuperäisen koon ennen kasvamista tai kutistumista. Se vastaa CSS:n flex-basis-ominaisuutta. Voitte käyttää Tailwindin välistysarvoja (basis-4 = 16px), prosenttiarvoja (basis-1/2 = 50 %) tai avainsanoja (basis-full = 100 %). Kun kolmelle sisarelementille asetetaan basis-1/3 ja grow, tuloksena on kolmisarakkeinen asettelu, joka alkaa yhtä suurista kolmanneksista ja täyttää käytettävissä olevan tilan.

basis-0 ja basis-auto tuottavat hienovaraisesti erilaisen tuloksen yhdessä grow-luokan kanssa. basis-0-luokkaa käytettäessä kaikki elementit aloittavat nollaleveydestä ja kasvavat pelkästään flex-grow-suhteidensa perusteella, mikä johtaa tilan tasaiseen jakamiseen. basis-auto-luokkaa käytettäessä elementit ottavat ensin sisältönsä leveyden, minkä jälkeen ylimääräinen tila jaetaan, jolloin jako on suhteessa sisällön kokoon.

Klassisessa kaksipaneelisessa asettelussa sivupalkissa käytetään flex-none w-64-luokkia (kiinteä 256px:n leveys) ja pääsisältöalueella flex-1-luokkaa (ottaa kaiken muun tilan). Näin sivupalkki ei koskaan kasva tai kutistu, kun taas sisältöalue täyttää 100 % jäljelle jäävästä tilasta. Tämä on hallintapaneelien ja ylläpitokäyttöliittymien asettelujen perusta.

Kun yhdistätte flex flex-wrap- ja flex-1-luokat sekä min-w-*-rajoitteen, saatte responsiivisen ruudukon, joka säätää sarakkeiden määrää automaattisesti käytettävissä olevan leveyden mukaan. Jokainen kortti vie vähintään min-w-64-luokan määrittämän leveyden, ja kortit laajenevat täyttämään rivin flex-1-luokan avulla. Kun kortti ei enää mahdu riville, se siirtyy seuraavalle riville — erillisiä breakpoint-määrityksiä ei tarvita.

Tailwindin order-*-apuluokat muuttavat flex-elementtien visuaalista näyttöjärjestystä muuttamatta niiden järjestystä DOM-puussa. order-first siirtää elementin alkuun, order-last siirtää sen loppuun, ja order-1–order-12 tarjoavat yksityiskohtaisen hallinnan. Tämä on hyödyllistä responsiivisessa uudelleenjärjestämisessä: mobiilissa sisällön jälkeen näkyvä sivupalkki voidaan siirtää visuaalisesti sisällön edelle työpöytänäkymässä käyttämällä md:order-first-luokkaa.

Tässä oppitunnissa opitte seuraavaa: flex-1 saa lapset ottamaan yhtä suuret osuudet käytettävissä olevasta tilasta, flex-none estää elementtiä kasvamasta tai kutistumasta, joten se säilyy luonnollisen kokoisena, ja grow-, shrink- ja basis-*-luokat tarjoavat yksityiskohtaisen hallinnan kullekin ulottuvuudelle erikseen. Seuraavaksi käsittelemme ylivuotoa flex-wrap-luokalla ja luomme yhtenäiset välit flex-elementtien välille.