Flex-Item-Ominaisuuksien Ymmärtäminen
Flex-alkiot ovat flex-kontainerin lapsia. Ne eivät ole enää rivinsisäisiä tai lohkotason elementtejä. Voimme siis muuttaa alkiokohtaisia ominaisuuksia saadaksemme oikean sijoittelun.
flex-basis
flex-basis-ominaisuus määrittää flex-alkion alkukoon ennen kuin jäljellä oleva tila jaetaan. Se määrittelee flex-alkion ihanteellisen koon, jota voidaan säätää käytettävissä olevan tilan ja muiden flex-kontainerin ominaisuuksien mukaan.
flex-basis: auto | value;
Koon voi määrittää pikseleinä, prosentteina tai em-yksiköinä, jolloin määritellään ihanteellinen koko, tai asettaa arvoksi auto, jolloin selain määrittää koon alkion sisällön perusteella.
index.html
index.css
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 kohde, kun flex-kontainerissa on ylimääräistä tilaa.
index.html
index.css
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ä. Tämä 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.
index.html
index.css
1. Mitä flex-grow-ominaisuus tekee?
2. Mitä flex-basis-ominaisuus tekee?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 2.56Flex-Item-Ominaisuuksien Ymmärtäminen
Pyyhkäise näyttääksesi valikon
Flex-alkiot ovat flex-kontainerin lapsia. Ne eivät ole enää rivinsisäisiä tai lohkotason elementtejä. Voimme siis muuttaa alkiokohtaisia ominaisuuksia saadaksemme oikean sijoittelun.
flex-basis
flex-basis-ominaisuus määrittää flex-alkion alkukoon ennen kuin jäljellä oleva tila jaetaan. Se määrittelee flex-alkion ihanteellisen koon, jota voidaan säätää käytettävissä olevan tilan ja muiden flex-kontainerin ominaisuuksien mukaan.
flex-basis: auto | value;
Koon voi määrittää pikseleinä, prosentteina tai em-yksiköinä, jolloin määritellään ihanteellinen koko, tai asettaa arvoksi auto, jolloin selain määrittää koon alkion sisällön perusteella.
index.html
index.css
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 kohde, kun flex-kontainerissa on ylimääräistä tilaa.
index.html
index.css
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ä. Tämä 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.
index.html
index.css
1. Mitä flex-grow-ominaisuus tekee?
2. Mitä flex-basis-ominaisuus tekee?
Kiitos palautteestasi!
