Tunnista akseli ennen kuin valitset CSS ominaisuuden
Lue tason kohdeliljapehmusteet ja tarkista sammakon nykyinen sijoittelu. Oletusrivin suunnassa justify-content toimii vaakasuuntaisella pääakselilla ja align-items pystysuoralla poikkiakselilla. Ennen kuin kirjoitat arvon, ilmoita, mitä akselia haluat muuttaa. Tämä tapa estää yleisen virheen: oikeannäköisen arvon valitsemisen kiinteistölle, joka ohjaa eri suuntaa.
Kun flex-direction muuttuu sarakkeeksi, pää- ja ristiakselit muuttuvat sen mukana. Arvioi ominaisuus uudelleen sen sijaan, että oletat, että justify-content tarkoittaa aina vaakasuuntaista liikettä. Syötä yksi CSS muutos editoriin ja vertaa tuloksena olevia paikkoja kohteisiin. CSS asettaa sammakot, eikä niitä vedä paikoilleen. Käytä tason vihjeitä ja sallittuja ominaisuuksia pitääksesi kokeilun sidottuna todellisuudessa esitettyyn tehtävään.
Selitä epäonnistunut muutos ennen kuin yrität uutta
Kun muutos ohittaa tavoitteen, kysy, onko ominaisuus vaikuttanut väärään akseliin, onko valittu arvo järjestellyt kohteet eri tavalla kuin odotit, vai onko nykyinen suunta muuttanut asettelun merkitystä. Säilytä se osa säännöstä, jonka ymmärrät, ja tarkista yksi asia. Useiden kiinteistöjen vaihtaminen kerralla voi saavuttaa tavoitteen, mutta jättää epävarmaksi, mikä muutos ratkaisi ongelman.
Tarkasteluharjoituksessa kuvaile onnistunutta sääntöä sanoin ennen kuin siirryt eteenpäin: mitä akselia se käytti ja miten se sijoitti sammakot suhteessa liljan tyynyihin. Myöhemmät tasot voivat yhdistää ideoita, joten tämä selitys on hyödyllisempi kuin rivin muistaminen ilman kontekstia. Tämä opas ei tarjoa keksittyä täydellistä vastausluetteloa tai väitettä, että pelin ratkaiseminen todistaa CSS ammattitaidon. Linkitetty toistosivu antaa editorille ohjaimet ja tarkan tehtäväkehyksen; keskus tukee ymmärtämistä ja harjoittelua kaikilla tasoilla, joita todella kohtaat.
Jos esimerkiksi sääntö muuttaa sammakoita pystysuunnassa, kun aiot tehdä vaakasuuntaisen liikkeen, tarkasta flex-direction ja tunnista nykyinen pääakseli ennen toisen arvon valitsemista. Sano relaatio ääneen: tämä ominaisuus muuttaa jakautumista pääakselilla, ja pääakseli kulkee tällä hetkellä tähän suuntaan. Tee sitten yksi muokkaus ja tarkista tulos. Kun se toimii, testaa selitystäsi näkyviä liljatyynyjä vastaan. Tämä muuttaa epäonnistuneen arvauksen uudelleen käytettäväksi asetteluideaksi komennon sijaan, jonka muistat vain yhdeltä näytöltä.
Flexbox Froggy-vinkkejä ja -strategiaa
Valitse vinkki harjoiteltavaksi seuraavalla kierroksella. Tämä lista ei muuta peliä eikä tallenna pelin edistymistä.
Flexbox Froggy-kysymykset ja vastaukset
Pitääkö minun asentaa koodaustyökalu?
Ei. CSS-editori on selainpelin sisällä.
Onko tämä täydellinen web-kehityskurssi?
Se on interaktiivinen harjoituspeli flexbox-asettelun käsitteille. Se ei korvaa laajempaa HTML- ja CSS-kurssia.
Kuka loi projektin?
Thomas Park loi Flexbox Froggy:n. Lähde on MIT-lisensoitu ja tallennetussa taideteoksessa käytetään CC BY 3.0:aa; attribuutiolinkit ovat alla.
Miksi flex-end vaihtaa puolta suunnan kääntyessä?
Alku ja loppu seuraavat pääakselia, eivät kiinteää vasenta ja oikeaa reunaa. row-reverse alkaa oikealta, joten justify-content: flex-end asettaa elementit vasemmalle. Tarkista flex-direction ensin. align-items muuttaa poikittaisakselia ja ratkaisee eri sijoitteluongelman.