Flex-kohteen Ominaisuuksien Ymmärtäminen
Joustavat kohteet ovat joustavan säiliön lapsielementtejä. Ne eivät ole enää rivinsisäisiä tai lohkotason elementtejä. Näin ollen kohteen ominaisuuksia voidaan muuttaa oikean sijoittelun saavuttamiseksi.
flex-basis
]flex-basis] määrittää joustavan kohteen alkukoon ennen ylimääräisen tilan jakamista.
Arvo voidaan asettaa käyttämällä px, %, em tai auto (koko määräytyy sisällön mukaan).
flex-basis: auto | value;
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. 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.
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
Mahtavaa!
Completion arvosana parantunut arvoon 2.56Flex-kohteen Ominaisuuksien Ymmärtäminen
Pyyhkäise näyttääksesi valikon
Joustavat kohteet ovat joustavan säiliön lapsielementtejä. Ne eivät ole enää rivinsisäisiä tai lohkotason elementtejä. Näin ollen kohteen ominaisuuksia voidaan muuttaa oikean sijoittelun saavuttamiseksi.
flex-basis
]flex-basis] määrittää joustavan kohteen alkukoon ennen ylimääräisen tilan jakamista.
Arvo voidaan asettaa käyttämällä px, %, em tai auto (koko määräytyy sisällön mukaan).
flex-basis: auto | value;
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. 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.
index.html
index.css
1. Mitä flex-grow-ominaisuus tekee?
2. Mitä flex-basis-ominaisuus tekee?
Kiitos palautteestasi!
