Flexbox, tuntud ka kui Paindliku Kasti Paigutus, on võimas CSS-tehnoloogia, mis aitab teil luua tõhusaid ja paindlikke paigutusi. Selles Õpetuses näitan sulle, kuidas kasutada Flexbox omadusi sisu paigutamiseks piki peatäheruumi. Eriti keskendume justify-content kasutamisele, mis pakub erinevaid valikuid elementide paigutamiseks. See näide näitab, kuidas saad luua navigeerimise vasakul ja nupu paremal, jättes samas piisavalt ruumi nende vahele.
Olulisemad Punktid
- Sa saad kasutada justify-content elementide tõhusaks paigutamiseks.
- space-between jagab kättesaadava ruumi elementide vahel ühtlaselt ära.
- Flexbox võimaldab luua paigutusi ilma lisakonteineriteta.
Samm-sammult Juhend
1. Põhikonteineri Loomine
Alustuseks pead looma oma põhikonteineri (nt elemendi), mis toimib paindliku elemendina. Veendu, et lisad omaduse display: flex;. See muudab su konteineri flex-konteineriks ja võimaldab rakendada seal sisalduvatele elementidele flex-omadusi.
2. Flexbox Omandite Kohandamine
Nüüd muudame konteineri justify-content omadust, et optimaalselt ruumi elementide vahel jaotada. Selles õpetuses kasutame väärtust space-between. See tagab, et kättesaadav ruum jaotatakse elementide vahel ühtlaselt.
3. Paddingu ja Kast-Suuruse Lisamine
Selleks, et tagada, et meie paigutus näeks hea välja ja et ükski sisu ei oleks liiga lähedal äärest, sea box-sizing omadus border-box. See takistab elementidel ootamatult konteineri piiridest väljumist. Lisaks lisame 10 pikslit paddingut, et tagada meeldiv kaugus äärest.
4. Navigeerimise ja Nuppude Loomine
Nüüd saad lisada oma navigeerimiselemente. Need elemendid peaksid olema paigutatud põhikonteineri sisse. Võid kasutada näiteks linke "Tagasi", "Ekspordi" ja "Eelvaade". Need loetletakse flex-konteineris ja tänu space-between jaotatakse need ühtlaselt.
5. Paindlike Omandite Määramine Üksikutele Elementidele
Kui soovid paigutada täiendavaid elemente keskele, näiteks tööriistaribaga, kus on mitu nuppu, saad need paigutada samuti flex-konteinerisse. Flexbox hoolitseb paigutuse eest ja asetab nad vasakult ja paremalt navigeerimise vahel keskele.
6. space-evenly Kasutamine Alternatiivina
Kuigi space-between on suurepärane valik, saad kasutada ka space-evenly, et jaotada ruumi kõigi elementide vahel võrdselt, sealhulgas äärtes. See tähendab siiski, et kõigi elementide vaheline kaugus on võrdne. Paljudel juhtudel soovid siiski, et äärmuslikud elemendid jääksid lähedale äärtele.
7. Kordamine ja Kohandamine
Saad paigutust vahetades konteineri laiust muutes testida. Paigutus reageerib dünaamiliselt vastavalt konteineri suurusele. See on Flexboxi oluline eelis, kuna see kohandub automaatselt, et tagada paindlik kasutajaliides.
Kokkuvõte
Selles õpetuses vaatasime CSS Flexbox tehnoloogiat. Õppisid, kuidas justify-content ja eriti space-between abil luua paindliku ja atraktiivse paigutuse, mis asetab navigeerimiselemendid ja nupud professionaalselt. Flexbox võimaldab sul hõlpsasti luua keerukaid paigutusi, lisamata täiendavaid konteinereid.
Korduma Kippuvad Küsimused
Kuidas kasutada justify-content Flexboxis?Saad kasutada justify-content, et määrata oma elementide paigutus piki peatäheruumi. Näiteks: justify-content: space-between; loob vahed elementide vahel.
Mis vahe on space-between ja space-evenly vahel?space-between jaotab kättesaadava ruumi ainult elementide vahel, samas kui space-evenly jaotab ruumi võrdselt kõigi elementide vahel, sh äärtes.
Kuidas kohandada Flex-konteineri suurust?Saad lihtsalt kohandada Flex-konteineri suurust CSS-omaduste, nagu laius ja kõrgus, abil. Flexbox reageerib dünaamiliselt nendele muudatustele.
