Selles juhendis õpetan sulle, kuidas luua CSS Flexbox abil paindlik paigutus kolme veeru ja kolme reaga. See paigutus on mitte ainult lihtne rakendada, vaid kohaneb ka dünaamiliselt saadaoleva ekraanipinnaga. Flexbox teeb oluliselt lihtsamaks responsive disainide loomise ning muudab vanemate paigutustehnikate, nagu Floats või Inline-Block, kasutamise üleliigseks.
Olulisemad teadmised
- Flexbox võimaldab teil luua paigutusi ainult mõne rea CSS-iga.
- Allpool näitan samm-sammult, kuidas luua ja kohandada 3-veeru, 3-reaga paigutus.
Samm-sammult juhend
Samm 1: Alusta HTML struktuuriga
Esiteks loote oma veebisaidi algse struktuuri kolme div-elemendiga. Iga div saab klassi "Box". Need paigutatakse hiljem Flex-containeri sees.
Samm 2: Stiliseeri lahtreid
Nüüd lisate CSS-i, et anda lahtreid kergema kujundusega polsterdamine ja raam. Kasutage box-sizing: border-box; mõõtmete lihtsustamiseks.
Samm 3: Määra Flex-container
Pead nüüd ülemineku konteineri määratlema Flex-containerina. Määrake display: flex; ja flex-direction: row;, et lahtreid ritta paigutada. Iga lahtrelement peaks seadistama paindlikkuse väärtuseks 1, et võtaksid võrdselt kasutadaolevast ruumist.
Samm 4: Kohanda Flex-väärtusi
Kuna kõik lahtreid omavad väärtust flex: 1;, jaotub ruum kõigi kolme lahtre vahel ühtlaselt. Seda saate testida brauseriakna suurust muutes.
Samm 5: Muuda Flex-atribuute
Kui soovite fleksiparameetreid täpsemalt juhtida, saate näiteks määrata flex-grow: 0; konkreetsetele lahtreid. See tähendab, et need lahtreid ei võta lisaruumi juhul, kui konteinerit laiendatakse.
Samm 6: Kohanda Flex-baasväärtust
Lahtreid, millele soovite määrata baaslaiuse, saate kasutada flex-basis: 50px;. Seejärel on lahtrel fikseeritud laius ja ülejäänud ruum jaotatakse paindlikult teistele lahtritele.
Samm 7: Seadke kõrgused lahtreis
Saate määrata erinevate lahtreid jaoks spetsiifilised kõrgused kohandades flex-basis. Näiteks seadke ülemise lahtri jaoks flex-basis: 50px; ning alumise lahtri jaoks flex-basis: 100px;.
Samm 8: Kohanda konteineri kõrgus
Tagamaks, et lahtreid vastavalt kohanduksid, peate piirama ka Flex-konteineri kõrgust. Näiteks seadke kõrgus 400px;, et keskmine lahter võtaks ülejäänud ruumi.
Samm 9: Optimeeri paigutuse kujundust
Kui soovite kujundust veelgi täiustada, saate vastavalt vajadusele kohandada Flexboxi omadusi. Lihtne justify-content või align-items võib kaasa tuua suuri erinevusi paigutuse kujunduses.
Samm 10: Testi responsive disaini
Veendu, et sinu kujundus näeks hea välja ka mobiilsetel seadmetel. Kasuta selleks oma brauseri arendajatööriistu, et proovida erinevaid ekraanisuurusi ja veenduda, et see reageeriks õigesti.
Kokkuvõte
Oled nüüd õppinud, kuidas luua ja kohandada paindlikku paigutust Flexboxiga CSS-is ja HTML-is. Paindlike väärtuste kohandamine ja konkreetsete kõrguste ja laiuste määramine võimaldab sul lihtsalt luua responsive disaine. Flexbox abil muutub kogu protsess oluliselt lihtsamaks.
Korduma kippuvad küsimused
Kuidas Flexbox töötab?Flexbox on CSS moodul, mis võimaldab paindliku paigutuse struktuuri, mis on lihtsasti kohandatav.
Mis on peamised Flexbox omadused?Peamised omadused on display: flex;, flex-suund, flex-kasv, flex-kahanemine ja flex-alus.
Kuidas muuta oma paigutus reageerivaks?Protsendiliste väärtuste või paindlike ühikute kasutamise ja Flexbox omaduste kohandamise abil saab muuta oma paigutuse reageerivaks.
