Flex-Elementtien Ominaisuuksien Ymmärtäminen
Joustavat kohteet ovat joustavan säiliön lapsielementtejä. Ne eivät ole enää rivin sisäisiä tai lohkotason elementtejä. Näin ollen kohteen ominaisuuksia voidaan muuttaa oikean sijoittelun saavuttamiseksi.
flex-basis
flex-basis-ominaisuus määrittää joustavan kohteen alkukoon ennen jäljellä olevan tilan jakamista. Se määrittelee joustavan kohteen ihanteellisen koon, jota voidaan säätää käytettävissä olevan tilan ja muiden joustavan säiliön ominaisuuksien mukaan.
flex-basis: auto | value;
Koon voi määrittää pikseleinä, prosentteina tai em-yksiköinä, jolloin määritetään ihanteellinen koko, tai asettaa arvoksi auto, jolloin selain määrittää koon kohteen sisällön perusteella.
index.html
index.css
flex-grow
flex-grow-ominaisuus määrittää, kuinka paljon flex-item voi kasvaa suhteessa muihin flex-kontainerin sisällä oleviin elementteihin, kun käytettävissä on ylimääräistä tilaa.
flex-grow-ominaisuus hyväksyy yksiköttömän arvon, joka ilmaisee flex-itemin 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, 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öjä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 3, 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
Can you explain how flex-basis interacts with flex-grow and flex-shrink?
How do I use the order property to rearrange flex items?
What happens if two flex items have the same order value?
Awesome!
Completion rate improved to 2.56Flex-Elementtien Ominaisuuksien Ymmärtäminen
Pyyhkäise näyttääksesi valikon
Joustavat kohteet ovat joustavan säiliön lapsielementtejä. Ne eivät ole enää rivin sisäisiä tai lohkotason elementtejä. Näin ollen kohteen ominaisuuksia voidaan muuttaa oikean sijoittelun saavuttamiseksi.
flex-basis
flex-basis-ominaisuus määrittää joustavan kohteen alkukoon ennen jäljellä olevan tilan jakamista. Se määrittelee joustavan kohteen ihanteellisen koon, jota voidaan säätää käytettävissä olevan tilan ja muiden joustavan säiliön ominaisuuksien mukaan.
flex-basis: auto | value;
Koon voi määrittää pikseleinä, prosentteina tai em-yksiköinä, jolloin määritetään ihanteellinen koko, tai asettaa arvoksi auto, jolloin selain määrittää koon kohteen sisällön perusteella.
index.html
index.css
flex-grow
flex-grow-ominaisuus määrittää, kuinka paljon flex-item voi kasvaa suhteessa muihin flex-kontainerin sisällä oleviin elementteihin, kun käytettävissä on ylimääräistä tilaa.
flex-grow-ominaisuus hyväksyy yksiköttömän arvon, joka ilmaisee flex-itemin 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, 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öjä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 3, 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!
