Visuaalinen opas CSS Flexboxiin

Mikä on CSS Flexbox?

MDN-verkkodokumenttien mukaan:

"CSS Flexible Box Layout on CSS-moduuli, joka määrittelee käyttöliittymäsuunnitteluun optimoidun CSS-laatikkomallin ja kohteiden asettelun yhdessä ulottuvuudessa. Joustavan asettelumallin mukaan joustavan säiliön lapset voidaan sijoittaa mihin tahansa suuntaan, ja he voivat "taipua" kokonsa joko kasvamalla täyttämään käyttämätön tila tai kutistumalla vanhemman täynnä. Lasten sekä vaaka- että pystysuuntaista suuntausta voidaan helposti käsitellä.

Joten yhteenvetona voidaan todeta, että se on asettelumoduuli, joka tekee asioista helpompaa kohdistaa ja jakaa tilaa säiliön kohteiden välillä.

Katsotaanpa lyhyesti muutama esimerkki siitä, mitä CSS-joustolaatikon avulla voidaan tehdä vain vähintään 1-2 rivillä koodeja:

Vaakasuora kohdistusasettelu:

Pystysuuntainen suuntausasettelu:

Se on melko siisti, kun otetaan huomioon, että vain yksi tai kaksi riviä CSS: ää vaadittiin manipuloimaan asettelua kunkin kontin sisällä.

Perusteet

Flexbox-ominaisuudet voidaan luokitella kahteen päätyyppiin:

  1. Säiliön ominaisuudet (joustava suunta, joustava kääre, perustele sisältö, kohdista kohteet, tasaa sisältö)
  2. Joustavien tuotteiden ominaisuudet (järjestys, jousto, joustava kasvu, joustava kutistuminen, tasaus itse)

Näyttö: joustava

Ensimmäinen ominaisuus ei ole erityinen flexboxille. Että omaisuus on displayjoka asetamme arvoon: flex. Tämä asetetaan säiliöön, joka sisältää kohteet, joita haluamme käsitellä.

Lisätään joitain visualisointeja ymmärtämään, miten se toimii:

Jos meillä on aluksi astia, sen divsisällä on 3 laatikkoa ( ). Näin he näyttävät:

Lisätään flexnyt konttiin:

Vain yksi CSS-rivi on muuttanut asettelun pystysuunnasta vaakatasoon.

Tärkeitä termejä Flexboxin ympärillä

Näitä termejä käytetään tässä oppaassa.

  1. Joustava säiliö: Tämä viittaa siihen asetettuun säiliöön display: flex;.
  2. Flex-esine: Nämä ovat yksittäisiä lapsia Flex-säiliön sisällä
  3. Pääakseli : Oletusasetus on vasemmalta oikealle.
  4. Poikkiakseli : Oletusarvo on asetettu ylhäältä alas.

Heti kun display: flexse asetetaan astiaan, nämä kuvitteelliset akselit työskentelevät yhdessä selvittääkseen, kuinka joustavan säiliön sisällä olevien joustavien esineiden tulisi liikkua ja käyttäytyä. Nämä kaksi akselia vaihtavat suuntaa aina, kun muutamme tiettyjä alla kuvattuja flexbox-ominaisuuksia.

Joustava suunta

Tämä ominaisuus määrää kuvitteellisten akselien suunnan. Akselit puolestaan ​​määräävät, miten joustosäiliössä olevat kohteet tulisi sijoittaa. Se vie seuraavat 4 arvoa:

  1. rowon pääakselin oletusarvo, joka osoittaa vasemmalta oikealle. Poikkiakseli pysyy ylhäältä alas.
  2. row-reversekääntää rivin suunnan oikealta vasemmalle. Jälleen poikkiakseli ei muutu.

3. columnvaihtaa pääakselin vaaka-akselista pystyakseliin. Tämä tarkoittaa, että pääakseli virtaa nyt ylhäältä alas, kun taas poikkiakseli virtaa nyt vasemmalta oikealle.

4. column-reverseon samanlainen kuin sarakkeen arvo, ainoana erona on, että pääakseli virtaa nyt alhaalta ylös.

Joustava kääre

Joustava säiliö ei oletusarvoisesti salli tuotteiden vievän useita rivejä peräkkäin. Sen sijaan kaikki kohteet jaetaan yhteen riviin, eli se ei salli käärimistä useaan riviin.

  1. flex-wrap: no-wrap on oletusarvo.

2 flex-wrap: wrap.. Muuttamalla ominaisuuden arvoksi wrapvoimme nyt varmistaa, että jokainen joustava tuote säilyttää koonsa. Jos ne eivät mahdu yhdelle riville, ne kietoutuvat seuraavalle riville tai sarakkeeseen joustavuuden suunnasta riippuen.

Jos taipumissuunta on asetettu rivin taaksepäin, kohteet siirtyvät seuraavalle riville alkaen oikealta vasemmalle.

3. wrap-reversetoisaalta kääri seuraavan joustavien esineiden rivin alkuperäisen yläpuolelle, edelleen vasemmalta oikealle.

Perusta sisältöä

Tätä ominaisuutta käytetään hyvin usein. Sen tarkoituksena on jakaa tilaa joustavien esineiden välillä joustosäiliössä pääakselia pitkin . Sen oletusarvo on flex-start.

Muista: Jos taipumissuunta on asetettu sarakkeeksi, pääakseli virtaisi nyt ylhäältä alas. Tarkoittaen, että perusteltava sisältö jakaisi nyt tuotteet vertikaalisesti.

Kohdista kohteet

Tämä ominaisuus on yhtä suosittu kuin justify-contentja sitä käytetään säännöllisesti flexboxin kanssa. Se tekee saman asian kuin justify-contentsillä ainoalla erolla, että se toimii poikittaisakselilla . Oletusarvo align-itemson stretch.

Muista: Jos taipumissuunta on asetettu sarakkeeksi, poikkiakseli virtaisi nyt vasemmalta oikealle. Tarkoittaen, että kohdistuskohteet jakaisivat tuotteet nyt vaakasuoraan.

Tasaa sisältö

Tämä ominaisuus on samanlainen ja voidaan helposti sekoittaa siihen align-items. Tämän ominaisuuden tarkoituksena on määrittää, kuinka joustosäiliön rivien välinen tila tulisi jakaa poikkiakselilla .

Kohdistaessa align-itemsjoustavien kohteiden välistä tilaa, mutta align-contentkohteiden väliin rivit. Oletusarvo align-contenton stretch.

Joustavien tuotteiden ominaisuudet

Aika siirtyä toisentyyppisiin flexbox-ominaisuuksiin, joiden avulla voimme kohdistaa yksittäiset kohteet joustosäiliön sisällä.

Tasaa itse

Tämän ominaisuuden avulla voit kohdistaa yksittäisen joustavan kohteen poikittaisakselille. Se ohittaa säiliölle asetetun kohdistuksen läpi align-items.

Sillä on myös samat ominaisuudet kuin align-items(katso yllä).

Tilaus

Tämän ominaisuuden avulla voimme järjestää yksittäisten joustavien tuotteiden sijainnit niiden joustosäiliön sisällä. Oletusarvoisesti kaikille kohteille on määritetty arvo 0.

Määrittämällä orderyksittäisille kohteille arvon pienempi (-ve) tai suurempi (+ ve) , kyseinen kohde siirtyy sijoitettavaksi niiden arvojen mukaan.

Järjestys noudattaa loogisinta tapaa eli -ve, 0, + ve. Pienin numero menee vasemmalle ja suurin numero oikealle, olettaen, että kaikki muu on asetettu oletukseksi. Jos on kohteita, joille ei ole annettu uutta arvoa, ne pysyvät arvona 0.

Huomaa: Yllä olevan esimerkin laatikot 1, 2, 5 ja 6 ovat edelleen oletusarvo 0. Selkeyden vuoksi kuudella yllä olevalla laatikolla on seuraavat arvot: -1, 0, 0, 0, 0, 1 .

Jos haluat sijoittaa laatikon laatikon numero 4 eteen, sinun on asetettava kohdennettu laatikko järjestykseen -2 tai pienempi.

Flex-pohjainen, Flex-grow ja Flex-Shrink

Toistaiseksi kaikki joustavat tuotteet olivat kooltaan samanlaisia. Katsotaan nyt, miten voimme saada tietyn joustavan tuotteen viemään enemmän tilaa joustavan säiliön sisällä verrattuna muihin saman säiliön sisällä oleviin esineisiin.

Joustopohjainen

Tämä ominaisuus määrittää joustavan tuotteen ihanteellisen koon ennen sen sijoittamista joustosäiliöön. Se toimii samalla tavalla kuin leveys työskennellessäsi rivien kanssa. Se toimii kuin korkeus työskenneltäessä pylväiden kanssa. Joten jos työskentelemme sarakkeiden kanssa ja tuotteelle on annettu sekä korkeus että joustopohja, joustopohja on etusijalla, koska se on ihanteellinen korkeus, jonka joustokappale ottaa, jos tilaa on riittävästi.

Tästä huolimatta, jos kohteille ei ole tarpeeksi tilaa eikä korkeudelle tai leveydelle ole määritetty. Kohteet ottavat huomioon korkeuden tai korkeuden, joka on käytettävissä säiliössä.

Joustava kasvu

Tämä ominaisuus määrittää kuinka flex-kohteet voivat kasvaa täyttääkseen käyttämättömän tilan flex-säiliössä.

Jos osoitamme flex-grow: 1kaikille ruuduille a , ne kaikki vievät jäljellä olevan tilan tasaisesti, mikä on myös sen oletusarvo. Numero voi olla mikä tahansa, kunhan ne kaikki ovat samanlaisia.

Jos annamme flex-grow: 1yhdelle tuotteelle ja annamme toiselle a flex-grow: 2, niin toinen kohde vie kaksi kertaa niin paljon käyttämätöntä tilaa kuin ensimmäinen.

Tämä koskee sekä rivejä että sarakkeita.

Joustava kutistuminen

Tämä ominaisuus määrittää, kuinka joustovälineet voivat kutistua aina, kun joustosäiliössä ei ole tarpeeksi tilaa.

Tämä flex-shrink: 1on oletusarvo, mikä tarkoittaa, että kaikki kohteet kutistuvat oletusarvoisesti samalla nopeudella.

Huomaa:flex-shrink: 0; tarkoittaa, että tämän nimenomaisen kohteen ei pitäisi koskaan kutistua.

flex-shrink: 2; tarkoittaa, että tämän nimenomaisen kohteen pitäisi kutistua nopeammin kuin muut flex-shrink: 1;

Joustava

Tämä on lyhennetty versio joustavaan kasvuun, joustoon kutistumiseen ja joustoon perustuvassa versiossa kyseisessä järjestyksessä.

Jos sinun on käytettävä kaikkia edellä mainittuja kolmea, voit yksinkertaisesti käyttää jotain tällaista:

flex: 0 2 200px; missä 0 viittaa joustavaan kasvuun, 2 tarkoittaa joustavaa kutistumista ja 200 kuvapistettä viittaa joustavuuteen.

Onnittelut!

Se siitä! Nämä ovat avaimen ainesosia joustavaksi päälliköksi tulemiseen. Ja kuten kaikilla muillakin asioilla elämässä ja koodissa, harjoittelu tekee meistä täydellistä. Suosittelen lämpimästi tämän oppaan toteuttamista käytännön ymmärryksen saamiseksi. Yksi esimerkki voisi olla aloittaa pienellä, kuten yksinkertaisella navigointipalkilla.

Voit myös tarkistaa linkin Codepen-kokoelmaani flex-boxissa, jota käytin luomaan nämä flexboxit yllä oleviin kuviin ja nipistämällä niitä nähdäksesi, miten ne muuttuvat.

Kiitos tämän oppaan lukemisesta flexboxissa. Toivon, että se oli hyödyllinen ja informatiivinen. Jos sinulla on kysyttävää tai haluat jakaa ajatuksiasi tästä aiheesta, ota rohkeasti yhteyttä kommenttiosion kautta tai sähköpostitse osoitteeseen [email protected]

Jos pidit tämän luetun arvokkaana, ole hyvä ja näytä tälle artikkelille rakkautta jättämällä joitain taputuksia, jotta muutkin kehittäjät löytävät sen.

ZeeshaanMaudar - Yleiskatsaus

Hauskanpito Koodi muutokseen Sosiaalisen hyödyn koodi - ZeeshaanMaudar github.com