Työskentely Flex-Elementtien Kanssa

Joustoelementit ovat joustavan säiliön lapsielementtejä. Ne eivät ole enää rivinsisäisiä tai lohkotason elementtejä. Näin ollen voimme muuttaa elementtien ominaisuuksia saadaksemme oikean sijoittelun.

flex-basis

]flex-basis] määrittää joustoelementin alkukoon ennen ylimääräisen tilan jakamista. Se voidaan asettaa käyttämällä px, %, em tai auto (koko perustuu sisältöön).

flex-basis: auto | value;

flex-grow

flex-grow-ominaisuus määrittää flex-elementin kyvyn kasvaa suhteessa muihin elementteihin flex-kontainerissa, kun ylimääräistä tilaa on käytettävissä.

flex-grow-ominaisuus hyväksyy yksiköttömän arvon, joka ilmaisee flex-elementin suhteellisen koon verrattuna muihin elementteihin. Esimerkiksi, jos yhdellä elementillä on flex-grow-arvo 2 ja toisella arvo 1, ensimmäinen elementti kasvaa kaksi kertaa enemmän kuin toinen elementti, kun flex-kontainerissa on ylimääräistä tilaa.

order

order-ominaisuutta käytetään määrittämään flex-elementtien näyttämisjärjestys niiden säiliössä. Oletuksena flex-elementit näytetään siinä järjestyksessä kuin ne esiintyvät HTML-dokumentissa. Tätä järjestystä voidaan kuitenkin muuttaa käyttämällä order-ominaisuutta.

order-arvo voi olla mikä tahansa numero. Vaikka elementtejä olisi vain kolme, jos toiselle elementille asetetaan order: 1000;, se ei tarkoita, että elementtejä olisi 1000. Tämä tarkoittaa vain, että toinen elementti sijoitetaan viimeiseksi. Jos useilla elementeillä on sama order-arvo, selain sijoittaa ne siinä järjestyksessä kuin ne esiintyvät HTML-dokumentissa. Järjestellään seuraavan listan elementtien order-arvot uudelleen. Tehtävänä on sijoittaa kolmas elementti ensimmäiseksi.