Selles juhendis keskendud sa praktilisele Flexboxi rakendamisele, eriti flex-wrap omadusele. See tehnik on oluline responsiivsete paigutuste loomiseks veebiprojektides. Eesmärk on realiseerida konkreetne elementide jada paindlikus konteineris, mis vajadusel murdub ümber. Sa õpid, kuidas paigutada elemendid nii, et need elegantset ühest reast teise liiguksid, säilitades samal ajal ühtlased vahemaad.
Olulisemad teadmised
- flex-wrap kasutamine võimaldab vajadusel Flexboxi elemente uuele reale liigutada.
- Horisontaalsete elementide paigutamiseks kasutatakse flex-direction: row, samas kui flex-wrap: wrap-reverse tagab murdude altpoolt ülespoole toimumise.
- Ühtlaste vahemaade tagamiseks elementide vahel on oluline justify-content: space-evenly.
Juhend samm-sammult
Alustuseks tutvud ülesandega ja vaatad soovitud lõpptulemust.
Lõpptulemus peaks olema selline, et numbrid 1 kuni 10 murduvad paindlikku konteinerisse alt ülespoole. Oluline on, et järjekord oleks õige, nii et pärast esimest rida ilmuks teine rida.
Nüüd vaatame antud HTML-koodi. Siin on kümme div-elementi konteineris, mille vajalikud Flexboxi omadused tuleb esmalt seadistada. Need div-elementid on hetkel vorminguta.
Flexboxi omaduste korrektseks rakendamiseks lisage display: flex, et elemendid oleksid reas (row). Alguses tundub, et kõik div-id on järjestatud üksteise järel.
Kuid kogu paigutus tuleb kohandada, et saavutada soovitud välimus. Konteiner määratakse Flexboxina ja elemendid peavad murduma.
Enne stiiliga alustamist veendu, et elementide vahemaad oleksid ühtlased ja sobivad. Oluline on säilitada sama vahemaa nii ridade vahel kui ka ülevalt allapoole.
Nüüd, kui olete aluse pannud, proovige oma õnne ja rakendage paigutus. Esimene rida on horisontaalselt vasakult paremale paigutatud ja teine rida murdub vastavalt.
Eesmärk on lõpetada viimane rida elementide 9 ja 10-ga ülevalt ning tagada vahemaa säilitamine.
Div-elementidel on nüüd vaja CSS reegleid Flexboxi mudeli jaoks. On oluline märkida, et saate suurustele kohandusi teha, aktiveerides murdumise omaduse, et neid kokku ei surutaks.
Kui vastavad reeglid on lisatud, kontrollige oma paigutust brauseris. Vajadusel tehke CSS-s tehtud muudatused uuesti nähtavaks, kui tulemusega rahul ei ole.
Sinu paigutuse võti peitub omadustes flex-wrap ja justify-content. Kui kasutate flex-wrap: wrap-reverse, muudab see paigutuse selliseks, et read lisatakse alt üles.
Teine oluline omadus on justify-content: space-evenly. See tagab ühtlased vahemaad nii ridade vahel kui ka ülevalt ja alt.
Kui kasutate aga selle asemel space-between, leiate, et ülal ja all ei ole vahet. See muudab paigutuse mitte optimaalseks, seega on eelistatud valik space-evenly.
Kokkuvõte
Selles harjutuses õppisid, kui oluline on flex-wrap responsiivsete paigutuste loomisel. Nägid ka, kuidas elementide paigutus Flexboxiga võimalikuks muutub ja millised omadused on ühtlaste vahemaade tagamisel olulised.
Korduma kippuvad küsimused
Kuidas tagada elementide murdumine?Kasuta oma CSS-is omadust flex-wrap, et saavutada soovitud käitumine.
Mis vahe on ruumilisuselt võrdselt jaotatud, ruumiliselt eraldatud ja ühtlaselt ümber jaotatud vahel?Ruumiliselt võrdselt jaotatud tagab ühtlased vahed, ruumiliselt eraldatud ei oma alguses ja lõpus vahet ja ühtlaselt ümber jaotatud on igal küljel erineva suurusega vahed.
Kuidas lülitada sisse flex-wrap minu paigutuse jaoks?Lisa lihtsalt reegel flex-wrap: wrap; oma konteinerile.
