Selles juhendis saad teada, kuidas Flexboxiga saad Flex-konteineris elemente piki peatelge joondada. Oleme juba arutanud joondamist ristteljega, kuid peatelg on samuti oluline. Flexbox-tehnoloogia võimaldab sul erinevaid võimalusi, et muuta oma elementide joondamine paindlikumaks ja kohandatavamaks. Vaatame asja lähemalt!
Olulisemad järeldused
- Põhiteguriga joondamine toimub justify-content omaduse abil.
- Sa saad kasutada erinevaid väärtusi, nagu center, flex-start, flex-end, space-between ja space-around, et kohandada oma paigutust.
- Flexbox seaded mõjutavad otseselt elementide paigutamist soovitud suunas.
Samm-sammuline juhend
1. Flex-konteineri algseadistus
Alusta Flex-konteineri loomisega ja määra sellele Flex-suund. Selles näites seadistame Flex-suuna reale. See tähendab, et elemendid paigutatakse vasakult paremale reale.
2. Elementide vaikimisi joondamine
Kui lisad oma elemendid konteinerisse ilma eriliste stiilimuudatusteta, märkad, et need on vaikimisi konteineri alguses joondatud. Saad anda neile laiuseks 100 pikslit, et need oleksid selgelt nähtavad.
3. Keskjoondamine
Elementide keskjoondamiseks kasuta CSS omadust justify-content väärtusega center. See joondab su elemendid konteineri keskele, luues väga meeldiva paigutuse.
4. Elementide paigutamine lõppu
Kui soovid, et su elemendid oleksid konteineri lõpus, kasuta justify-content väärtust flex-end. See nihutab su elemendid konteineri paremasse serva.
5. Elementide algusesse joondamine
Vaikimisi käitumine ilma muudatusteta on flex-start, mis tähendab, et elemendid jäävad konteineri algusesse. See seadistus on kasulik, kui soovid elementide selget, korrastatud paigutust konteineri ülaosas.
6. Flex-suuna muutmine
Kui muudad Flex-suuna veerule, muutub peatelg horisontaalselt vertikaalseks. See tähendab, et elemendid on nüüd ülevalt alla paigutatud.
7. Elementide vertikaalselt keskjoondamine
Samas uues suunaga saad elemendid keskjoondada, kasutades justify-content: center. See seadistus tagab, et kõik elemendid kuvatakse konteineri keskel.
8. Joondamine alumisse serva
Kui soovid, et elemendid oleksid konteineri alumises osas, määra justify-content väärtuseks jälle flex-end. See paigutab elemendid konteineri põhja servale.
9. Ruumi-omaduste kasutamine
Flexbox võimaldab sul juhtida elementide vahelist ruumi kasutades space-between, space-around ja space-evenly. Need omadused jaotavad saadaoleva ruumi erinevalt.
10. Space-Between kasutamine
Kasutades justify-content: space-between on esimene element ülemises servas ja viimane element alumises servas, samal ajal jaotades ruumi elementide vahel ühtlaselt.
11. Proovige space-around
Kui kasutate space-around, luuakse igale elemendile võrdne ruum. See kaugus muutub konteineri keskel nähtavaks, samal ajal kui elemendid jäävad ühtlaselt jaotatuks.
12. Kasutage space-evenly
Space-evenly kasutamisel tagatakse, et elementide vahel ja konteineri servade vahel oleks ühtlane ruum.
Kokkuvõte
Selles juhendis õppisite, kuidas saate Flexboxi abil määrata elemendid peatelje suhtes. Justify-content'i kasutamisega saate oma elementide positsioneerimise väga paindlikuks muuta. Olete ka õppinud erinevaid omadusi, mis aitavad teil saavutada soovitud kujunduse. Kasutage neid teadmisi atraktiivsete ja kasutajasõbralike kujunduste loomiseks!
Sagedased küsimused
Mis on Flexbox?Flexbox on CSS-i paigutusmoodul, mis võimaldab elementidel konteineri sees paindlikult paigutuda.
Kuidas justify-content töötab?Justify-content omadus määrab, kuidas paindliku konteineri elementide vahele ja ümber jagatakse.
Milliseid Flex-suundi saab kasutada?Te saate kasutada rida, rida-tagurpidi, veerg ja veerg-tagurpidi, et juhtida elementide paigutust konteineris.
Mis vahe on space-between ja space-around vahel?Space-between paneb esimesed ja viimased elemendid konteineri servadele, samal ajal kui space-around loob võrdse ruumi iga elemendi ümber.
