Selles juhendis näitan sulle, kuidas luua Flexboxi kasutades CSS-is ja HTML-is kaks külgriba ja peasisuhtega responsiivne paigutus. Flexbox võimaldab sul paindlikult korraldada elemente nii, et need kohanevad dünaamiliselt ekraani suurusega. Olenemata sellest, kas soovid luua lihtsat veebisaiti või keerukat disaini, pakub Flexboxi tehnoloogia palju võimalusi. Alustame konkreetse näitega!
Olulisemad järeldused
- Flexboxiga saad luua responsiivse paigutuse, kus erinevad elemendid jaotuvad võrdsetel laiustel saadaolevale laiusele.
- Fleksiomadused määravad, kui palju iga element ruumi võtab võrreldes teistega.
Samm-sammult juhend
Samm 1: Alusstruktuuri loomine
Flexboxiga töötamiseks vajad esmalt põhilist HTML põhistruktuuri. Loo HTML-fail ja lisa põhielemendid nagu <head>, <body>, <header> ja <main>. <body> märkusesse lisa siis konteineri elemendid oma külgribadele ja peasisule.
Samm 2: CSS-i lisamine paigutuse kujundamiseks
Nüüd tahad CSS-iga pisut stiili lisada oma paigutusesse. Võid seda teha kas oma <head>
Samm 3: Flexboxi aktiveerimine
Flexboxi aktiveerimiseks rakenda display: flex; konteinerile. Nii saavad konteineri otseste laste elemendid fleksielementideks. Soovid tõenäoliselt määrata ka suuna: kasuta horisontaalse paigutuse jaoks flex-direction: row;.
Samm 4: Fleksiomaduste määramine lasteelementidele
Järgmiseks määra fleksiomadused lasteelementidele. Saad määrata, kui palju ruumi iga element peaks võrdeliselt teiste elementidega võtma. Näiteks võib peaelemendil olla fleks: 2; ja külgribadel fleks: 1;, et tagada, et peaelement võtab kaks korda rohkem ruumi kui iga külgriba.
Samm 5: Vastav laius responsiivselt kohandada
Tagamaks, et sinu paigutus on ka responsiivne, pead seadma konteinerile width: 100%;. Sellega kohandub paigutus brauseriakna laiusega. Vali ka kõrgus, et paigutusvaated saaksid optimeeritud.
Samm 6: Fikseeritud laiused külgribadele määratleda
Kui soovid külgribal määratleda fikseeritud laiuse, saad fleksi paigutust täiendada külgriba fikseeritud laiusega. Eemalda fleksiomadus lihtsalt külgribal, nii et see jääb ainult minimaalse laiuse juurde.
Samm 7: Lisakohandused ja testid
Nüüd tasub oma paigutus üle vaadata brauseris, et veenduda, et kõik näeb õigesti välja. Katseta erinevate fleksi väärtuste ja laiustega, et näha, kuidas paigutus sellele reageerib. Skaleeri brauseriakna suurust, et testida disaini responsiivseid omadusi.
Samm 8: Vertikaalse paigutuse rakendamine
Vajadusel saad oma paigutust muuta, et luua vertikaalne paigutus. Selleks muuda flekskonteiner veerule, kasutades flex-direction: column;. See samm on vajalik, kui soovid rohkem kujundusvõimalusi.
Samm 9: Brauseri toe lisamine
Ära unusta kontrollida brauserituge oma töö käigus. Mõned vanemad brauseriversioonid nõuavad Flexboxi jaoks prefikseid. Lisa vastavad prefiksid, et tagada, et sinu paigutus näeks igal pool hästi välja.
Samm 10: Tee viimased kohandused ja salvesta
Veendu, et kõik juhtelemendid oleksid kontrollitud ja et sinu paigutus näeks erinevatel ekraanisuurustel hästi välja. Salvesta kõik muudatused ja tee oma paigutusest ekraanipilte, et saada ülevaade edusammudest.
Kokkuvõte
Selles õpetuses õppisid, kuidas luua paindliku Flexboxiga lihtne ja responsiivne paigutus. Flexi omadused võimaldavad sul oma elementide suurust ja paigutust lihtsal viisil juhtida. Ülal kirjeldatud sammude abil saad kujundada paigutuse kahe külgsiibriga ja põhivaldkonnaga, mis kohaneb sujuvalt erinevate ekraanisuurustega.
Korduma kippuvad küsimused
Kuidas Flexbox toimib?Flexbox on kaasaegne CSS-i paigutusmoodul, mis võimaldab elementide vahel ruumi jaotada ning neid dünaamiliselt paigutada.
Kas ma saan Flexboxi kasutada ka vertikaalsetel paigutustel?Jah, saad Flexboxi kasutada ka vertikaalsetel paigutustel, muutes flex-suuna veerule.
Kuidas saan oma kujunduse responsiivsust testida?Sa saad muuta oma brauseriakna suurust või kasutada arendajatööriistu oma brauseris erinevate ekraanisuuruste simuleerimiseks.
