"Flexbox" CSS ir HTML: lengvai kurkite įterptus išdėstymus

Šioje pamokoje sužinosite, kaip HTML ir CSS priemonėmis sukurti sudėtingą įterptinį išdėstymą naudojant "Flexbox". Reguliariai susiduriame su iššūkiu, kaip valdyti kelis konteinerius ir sukurti patrauklų išdėstymą, kuris būtų ir funkcionalus, ir estetiškas. Flexbox leidžia gana lengvai realizuoti išdėstymus, nesivarginant su sudėtingomis CSS pozicionavimo taisyklėmis. Pradėkime ir sukurkime įterpto maketo pavyzdį, kuriame panaudoti "Flexbox" pagrindai.

Pagrindinės išvados

• Kuriant lanksčius maketus labai svarbu suprasti "Flexbox" savybes, ypač "flex-grow", "flex-shrink" ir "flex-base".
• Protingai naudodami šias savybes galite užtikrinti, kad jūsų maketas prisitaikytų prie skirtingų ekrano dydžių ir skirtingo turinio.

Žingsnis po žingsnio vadovas

1 žingsnis: sukurkite pagrindinę struktūrą

Pradedame nuo pagrindinės HTML struktūros. Sukurkite viso konteinerio elementą, kurį vadiname šaknimi. Po juo įterpkite header (antraštė), main (pagrindinis) ir footer (apačia) kaip tiesioginius vaikus. Tada pagrindinėje srityje bus tolesni subelementai, įskaitant šonines juostas ir turinį.

2 žingsnis: konteinerio CSS stilius

Dabar pridėkime CSS savybių šakniniam konteineriui. Nustatykite display: flex ir flex-direction: column, kad užtikrintumėte, jog tiesioginiai vaikai (header, main, footer) būtų išdėstyti vertikaliai. Taip pat galite reguliuoti užpildą ir maržą, kad optimizuotumėte vizualinį efektą.

3 žingsnis: Pagrindinės srities stilius

Kad pagrindinė sritis būtų lankstesnė, šiam konteineriui taip pat nustatykite display: flex. Tai leidžia jo subelementus (šoninę juostą kairėje, turinį, šoninę juostą dešinėje) išdėstyti horizontaliai. Įsitikinkite, kad naudojate flex-direction: row (numatytoji reikšmė).

4 veiksmas: šoninių juostų ir turinio flex savybės

Dabar pridėsime šoninių juostų ir turinio srities flex savybes. Šoninei juostai kairėje galite nustatyti flex: 0 0 120px, kad užtikrintumėte, jog ši šoninė juosta visada būtų fiksuoto pločio. Turinio sričiai nustatykite flex: 1, kad ji lanksčiai užimtų likusį plotą.

5 veiksmas: pritaikykite poraštę

Pėda taip pat pritaikoma prie šakninio konteinerio flexbox savybių. Paprastai poraštė išlieka statiška apačioje. Būtinai atitinkamai pritaikykite plotį ir aukštį, kad užtikrintumėte aiškų skirtingų sričių atskyrimą.

6 veiksmas: šoninių juostų derinimas

Sukūrę išdėstymo struktūrą, galite toliau keisti šoninių juostų stilių. Žaiskite su lankstumo reikšmėmis, kad sureguliuotumėte šoninių juostų plotį, ir naudokite reaguojančio dizaino nuostatas, kad įsitikintumėte, jog jūsų išdėstymas gerai atrodo skirtingo dydžio ekranuose.

7 veiksmas: išbandykite ir pritaikykite

Įdiegę pagrindinius stilius, išbandykite maketą skirtinguose įrenginiuose ir skirtingo dydžio ekranuose. Atkreipkite dėmesį į tai, kaip turinio sritis elgiasi skirtingais scenarijais, ir atitinkamai pakoreguokite lankstumo savybes, kad užtikrintumėte optimalią naudotojo sąsają.

8 žingsnis: Įterpkite tolesnį dėliojimą

Kai būsite patenkinti išdėstymu, galite gilintis į struktūrą ir kurti papildomus įterptus "flexbox" konteinerius antraštėse, šoninėse juostose ar net turinio srityje. Taip galėsite lanksčiai kurti sudėtingesnius išdėstymus.

Apibendrinimas

Flexbox suteikia jums galimybę kurti sudėtingus, įterptinius maketus, kuriuos galima pritaikyti ir kurie yra vizualiai patrauklūs. Sėkmės raktas - suprasti ir taikyti flex savybes, kad galėtumėte efektyviai valdyti išdėstymą. Tai leidžia kurti lanksčiai prie skirtingo turinio ir ekrano dydžio prisitaikančias naudotojo sąsajas.