Šioje pamokoje parodysiu, kaip sukurti lankstų trijų stulpelių ir trijų eilučių maketą naudojant CSS Flexbox. Šį išdėstymą ne tik lengva įgyvendinti, bet ir jis dinamiškai prisitaiko prie turimos ekrano erdvės. Flexbox labai supaprastina reaguojančių dizainų kūrimą ir leidžia nebenaudoti senesnių maketavimo būdų, tokių kaip floatai ar eilutės blokai.
Pagrindinės išvados
- Flexbox leidžia kurti maketus naudojant vos kelias CSS eilutes.
- Toliau žingsnis po žingsnio parodysiu, kaip sukurti ir pritaikyti 3 stulpelių ir 3 eilučių maketą.
Žingsnis po žingsnio
1 žingsnis: Inicijuokite HTML struktūrą
Pirmiausia sukurkite pagrindinę savo svetainės struktūrą su trimis div elementais. Kiekvienam div priskiriama klasė "Box". Vėliau jie bus išdėstyti "flex" konteineryje.
2 veiksmas: stilizuokite dėžutes
Dabar pridėkite CSS, kad suteiktumėte langeliams lengvesnį dizainą su užpildymu ir apvadu. Naudokite box-sizing: border-box;, kad būtų lengviau tvarkyti matmenis.
3 veiksmas: nustatykite lankstųjį konteinerį
Dabar reikia apibrėžti pagrindinį konteinerį kaip lankstųjį konteinerį. Nustatykite display: flex; ir flex-direction: row;, kad langeliai būtų išdėstyti eilutėmis. Kiekvienam dėžutės elementui reikia nustatyti flex reikšmę 1, kad jie tolygiai užimtų turimą erdvę.
4 veiksmas: sureguliuokite lankstumo vertes
Kadangi visiems langeliams nustatyta vertė flex: 1;, erdvė bus tolygiai paskirstyta visiems trims langeliams. Tai galite patikrinti pakeisdami naršyklės lango dydį.
5 veiksmas: pakeiskite flex savybes
Jei norite dar tiksliau valdyti flex parametrus, galite, pavyzdžiui, tam tikriems langeliams nustatyti flex-grow: 0;. Tai reiškia, kad šie langeliai neužims papildomos vietos, kai konteineris bus išplėstas.
6 veiksmas: sureguliuokite flex-base
Langeliams, kurių bazinį plotį norite nustatyti, galite naudoti flex-base: 50px;. Tai suteiks langelį fiksuoto pločio, o likusią erdvę bus galima lanksčiai paskirstyti kitiems langeliams.
7 veiksmas: Nustatykite dėžučių aukštį
Nustatydami flex-base galite nustatyti konkrečius skirtingų dėžučių aukščius. Pavyzdžiui, viršutiniam langeliui nustatykite flex-basis: 50px;, o apatiniam - flex-basis: 100px;.
8 veiksmas: Sureguliuokite konteinerio aukštį
Norėdami užtikrinti, kad langeliai būtų atitinkamai pritaikyti, taip pat turite apriboti flex konteinerio aukštį. Pavyzdžiui, nustatykite height: 400px;, kad centrinis langelis užimtų likusią vietą.
9 veiksmas: Optimizuokite išdėstymo dizainą
Jei norite dar labiau patobulinti maketą, galite pagal poreikį pakoreguoti flexboxo maketo savybes. Paprastas justify-content arba align-items gali labai pakeisti išdėstymo dizainą.
10 veiksmas: išbandykite reaguojantį dizainą
Patikrinkite, ar jūsų maketas gerai atrodo ir mobiliuosiuose įrenginiuose. Naudodamiesi naršyklės kūrėjo įrankiais išbandykite skirtingus ekrano dydžius ir įsitikinkite, kad jis atitinkamai reaguoja.
Apibendrinimas
Dabar sužinojote, kaip CSS ir HTML priemonėmis sukurti ir pritaikyti lankstųjį išdėstymą su "Flexbox". Reguliuodami flex reikšmes ir nustatydami konkrečius aukščius bei pločius, galite lengvai įgyvendinti reaguojančius dizainus. Flexbox labai supaprastina visą procesą.
Dažniausiai užduodami klausimai
Kaip veikia "Flexbox"? "Flexbox" yra CSS modulis, leidžiantis sukurti lanksčią išdėstymo struktūrą, kurią lengva pritaikyti.
Kokios yra svarbiausios "Flexbox" savybės?Svarbiausios savybės yra display: flex;, flex-direction, flex-grow, flex-shrink ir flex-base.
Kaip padaryti, kad mano maketas reaguotų į poreikius?Naudojant procentines reikšmes arba lanksčius vienetus ir pritaikant "Flexbox" savybes, jūsų maketą galima padaryti reaguojantį į poreikius.
