"Flexbox": jūsų reaguojančių maketų CSS vadovas

Sveiki atvykę į paskutinį vaizdo įrašą apie "flexbox" išdėstymą CSS ir HTML. Šioje baigiamojoje pamokoje apibendrinsime pagrindines išmoktas sąvokas ir pateiksiu jums keletą idėjų, ką daryti toliau. Apžvelgėme "Flexbox" išdėstymo principus ir tikiuosi, kad esate pasirengę šias žinias pritaikyti savo projektuose. Dabar apžvelkime pagrindines išmoktas žinias.

Pagrindinės žinios

Dirbdami su "Flexbox" turėtumėte nepamiršti šių dalykų:

• Suaktyvinti "Flexbox" maketą su display: flex
• Pagrindinės ašies apibrėžimas
• Laisvos erdvės paskirstymas pagrindine kryptimi naudojant tokius flexbox parametrus kaip flex-grow, flex-shrink ir flex-basis
• Elementų išlyginimas pagrindine kryptimi ir skersai
• Savybės flex-wrap naudojimas elementams apvynioti, jei nepakanka vietos

Šios sąvokos yra esminės kuriant dinamiškus ir reaguojančius maketus.

Žingsnis po žingsnio vadovas

Pradėkime nuo trumpos atliktų žingsnių santraukos.

1 žingsnis: "Flex" maketo aktyvavimas

Norėdami savo projekte aktyvuoti "Flexbox", pirmiausia turite deklaruoti elementą, kurį norite užpildyti kaip "Flex" konteinerį. Norėdami tai padaryti, naudokite CSS savybę display: flex. Tai pirmas ir svarbiausias žingsnis, nes jis sudaro visų kitų nustatymų pagrindą.

2 žingsnis: pagrindinės ašies apibrėžimas

Kitame žingsnyje apibrėšite "Flex" išdėstymo kryptį naudodami savybę flex-direction. Ši savybė nustato, kaip lankstieji elementai išdėstomi konteineryje - eilutėmis (horizontaliai) arba stulpeliais (vertikaliai).

3 veiksmas: erdvės paskirstymas

Lankstusis langelis taip pat leidžia paskirstyti erdvę tarp elementų ir aplink juos. Čia praverčia savybės flex-grow, flex-shrink ir flex-base. Naudodami flex-grow galite apibrėžti, kiek vietos turėtų užimti lankstusis elementas pagrindine kryptimi. flex-shrink nustato, kaip mažinamas elemento dydis, kai vietos yra nedaug. Ir galiausiai flex-base apibrėžia, kiek vietos iš pradžių turėtų užimti jūsų elementas.

4 veiksmas: elementų derinimas

Kitas svarbus dalykas yra elementų išlyginimas flex konteineryje. Tai atliekama naudojant savybes justify-content pagrindinei krypčiai ir align-items kryžminei krypčiai. Taip galite užtikrinti, kad elementai būtų idealiai centruoti arba bet kurioje kitoje norimoje padėtyje.

5 veiksmas: perpildymo dėl apvyniojimo problemos sprendimas

Jei trūksta vietos, galite naudoti savybę flex-wrap, kad apvyniotumėte elementus į kitą eilutę ar stulpelį. Tai ypač naudinga reaguojančiam dizainui, nes užtikrina, kad jūsų maketai gerai atrodytų visuose ekrano dydžiuose.

6 žingsnis: praktinis flexbox taikymas

Dabar, kai jau turite teorinius pagrindus, metas žinias pritaikyti praktiškai. Pabandykite naudoti "Flexbox" savo projektuose. Jį galite naudoti kurdami puikius formų, galerijų, pokalbių ir daugybės kitų elementų maketus. Yra daugybė būdų, kaip galite naudoti "Flexbox", todėl raginu jus būti kūrybingus ir kurti savo sprendimus.

7 žingsnis: žvelgiant į CSS Grid

Kita technologija, į kurią turėtumėte atkreipti dėmesį, yra CSS Grid. Šis išdėstymo modulis leidžia lengvai kurti tinklelio struktūras jūsų dizaine. Galite naudoti "Grid" kartu su "Flexbox", kad sukurtumėte sudėtingus maketus, kurie būtų lankstūs ir reaguotų. Tai įdomi galimybė, kurią tikrai turėtumėte įtraukti į savo įrankių rinkinį.

8 žingsnis: Išvados ir paskatos tolesniam naudojimui

Galiausiai norėčiau paskatinti jus pritaikyti tai, ko išmokote, savo projektuose. Naudokite "Flexbox" reaguojantiems maketams, eksperimentuokite su įvairiais nustatymais ir išsiaiškinkite, kokie metodai geriausiai atitinka jūsų konkrečius reikalavimus.

Apibendrinimas

Šiame vadove sužinojote pagrindines "Flexbox" sąvokas, sužinojote, kaip jį suaktyvinti ir naudoti, ir susipažinote su "CSS Grid" peržiūra. Tikiuosi, kad čia išmoktus įrankius panaudosite savo projektuose.