"Flexbox" CSS - paprastas pavaldžiųjų elementų išlyginimas

Šioje pamokoje sužinosite, kaip išlyginti lanksčiojo konteinerio antrinius elementus pagal kryžminę ašį. CSS flexbox metodas leidžia lanksčiai ir dinamiškai išdėstyti elementus, o tai labai svarbu kuriant reaguojančius dizainus. Žingsnis po žingsnio sužinosite apie įvairias išlyginimo parinktis, kad optimizuotumėte savo maketus ir padarytumėte juos patrauklesnius.

Pagrindinės žinios

• Flexbox siūlo skirtingus pavaldžiųjų elementų išlyginimo būdus.
• Savybės align-items ir justify-content atlieka svarbų vaidmenį išdėstant flexbox elementus.
• Galite sulygiuoti antrinius elementus tiek centruotai, tiek prie dešiniojo arba kairiojo krašto.

Žingsnis po žingsnio

1 veiksmas: sukurkite flex išdėstymą

Pradėkite nuo flex išdėstymo sukūrimo. Nustatykite konteinerio rodymą į flex ir apibrėžkite elementų kryptį naudodami flex-direction: column. Konteinerio plotis turėtų būti 100 %, o aukštis - 600 pikselių, kad jis užimtų visą naršyklės plotą.

2 veiksmas: Iš naujo nustatykite kraštinę

Kad naršyklės nustatymai netrukdytų nepageidaujamoms paraštėms, nustatykite kūno paraštę į 0. Tai padeda užtikrinti vienodą išdėstymą.

3 veiksmas: Taikykite langelio stilius

Į konteinerį pridėkite dar vieną langelį, kad atskirsite antrinius elementus ir patikslintumėte išdėstymo struktūrą. Kiekvieno langelio plotis turėtų būti 200 pikselių.

4 veiksmas: pradinis antrinių elementų išlyginimas

Pagal numatytuosius nustatymus antriniai elementai yra išlyginti į kairę, nes plotis nustatytas 200 pikselių. Matote, kad visi antriniai elementai rodomi kairėje konteinerio pusėje.

5 veiksmas: centruokite antrinius elementus

Norėdami sulygiuoti antrininkus konteinerio centre, naudokite savybę align-items: centre. Taip užtikrinama, kad lankstieji elementai būtų centruoti, o tai dažnai sukuria patrauklesnę svetainių dizaino estetiką.

6 veiksmas: išlyginkite elementus į dešinę

Jei norite išlyginti elementus į dešinę, naudokite savybę align-items: flex-end. Įsitikinkite, kad čia naudojate flex-end, o ne right, nes Flexbox veikia pagal kitą logiką.

7 veiksmas: Flex krypties keitimas

Jei flex kryptį pakeisite į eilutę, pamatysite, kad antriniai elementai dabar yra horizontalūs. Jei dabar vėl naudosite align-items: flex-end, elementai bus išlyginti konteinerio apačioje.

8 veiksmas: grįžkite prie pradinio išlyginimo

Eksperimentavę su skirtingais išlyginimais, galite grįžti prie flex-direction: column ir dar kartą pakoreguoti išlyginimus, kad pasiektumėte norimą išdėstymą.

9 veiksmas: nustatykite didžiausią plotį

Jei reikia, taip pat galite nustatyti didžiausią konteinerio plotį, kad jis išsiplėstų iki šio pločio centre. Dėl to išdėstymas tampa lankstesnis ir atrodo patraukliau esant skirtingiems langų dydžiams.

10 veiksmas: praktinis taikymas

Galiausiai galite patys išbandyti, kaip galima sulygiuoti visus antrinius elementus, naudodami savybes align-items ir justify-content. Eksperimentuokite su įvairiais maketais ir atraskite daugybę "Flexbox" teikiamų galimybių.

Apibendrinimas

Šioje pamokoje sužinojote, kaip išlyginti "Flexbox" konteinerio antrinius elementus išilgai skersinės ašies. Įvairios parinktys, pavyzdžiui, centruotas arba lygiuotas į dešinę, suteikia jums lanksčias tinklalapio dizaino galimybes.