Työskentely Flex-elementtien Kanssa

Flex-alkiot ovat flex-kontainerin lapsia. Ne eivät ole enää rivinsisäisiä tai lohkotason elementtejä. Näin ollen alkiokohtaisia ominaisuuksia voidaan muuttaa oikean sijoittelun saavuttamiseksi.

flex-basis

]flex-basis] määrittää flex-alkion alkuperäisen koon ennen ylimääräisen tilan jakamista. Arvo 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ää, kuinka paljon flex-item voi kasvaa suhteessa muihin kohteisiin flex-kontainerissa, kun ylimääräistä tilaa on käytettävissä.

flex-grow-ominaisuus hyväksyy yksiköttömän arvon, joka ilmaisee flex-itemin suhteellisen koon verrattuna muihin kohteisiin. Esimerkiksi, jos yhdellä kohteella on flex-grow-arvo 2 ja toisella arvo 1, ensimmäinen kohde kasvaa kaksi kertaa enemmän kuin toinen, 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. Voimme kuitenkin muuttaa tätä järjestystä käyttämällä order-ominaisuutta.

order-arvo voi olla mikä tahansa numero. Vaikka meillä olisi vain 3 elementtiä, jos annamme toiselle elementille order: 1000;, se ei tarkoita, että meillä olisi 1000 elementtiä. Se tarkoittaa vain, että toinen elementti sijoitetaan viimeiseksi. Lisäksi, 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.