Šioje pamokoje sužinosite, kaip sukurti pavyzdinę žiniatinklio projektų struktūrą naudojant " Flexbox" išdėstymą CSS ir HTML. Apžvelgsime "Visual Studio Code" integruotus derinimo įrankius kartu su "Microsoft Edge" ir atliksime pirmuosius "Flexbox" išdėstymo aktyvavimo žingsnius. Flexbox yra galinga išdėstymo sistema, kuri padeda nedidelėmis pastangomis kurti sudėtingus maketus ir lanksčiai išdėstyti elementus.
Pagrindinės išvados
- Flexbox leidžia išdėstyti elementus horizontaliai ir vertikaliai.
- Programuotojo įrankius "Microsoft Edge" galima integruoti tiesiai į "Visual Studio Code".
- Funkcija "Flex-Direction" daro įtaką "Flex" elementų išlyginimui.
Žingsnis po žingsnio instrukcijos
Pirmiausia į "Visual Studio Code" įdiekite "Microsoft Edge" įrankius. Plėtiniuose ieškokite "Microsoft Edge Tools for VS Code" ir jį įdiekite.
Įdiegus plėtinį, reikia pereiti prie derinimo parinkčių. Spustelėkite "Run and Debug" (paleisti ir derinti), tada "create a launch.json file" (sukurti launch.json failą). Tai padės jums sukonfigūruoti nustatymus.
Dabar sukurtame konfigūracijos faile pridėkite naują konfigūraciją "Microsoft Edge Tools". Įsitikinkite, kad kaip vietinį adresą įvedėte localhost:3000, nes šiame prievade paleidžiame serverį mūsų terminale.
Dabar atėjo laikas paleisti projektą. Pereikite į reikiamą pakatalogį ir atlikite komandą npm run dev. Tada naršyklėje atidarykite localhost:3000.
Įkėlę puslapį, galite suaktyvinti "Microsoft Edge" programavimo įrankius, spustelėję atitinkamą mygtuką "Visual Studio Code". Taip programuotojo įrankis atsidarys prie pat jūsų redaktoriaus.
Dabar galite matyti savo programos struktūrą. Turime konteinerį (div), kurio klasė yra "Flex Container". Šiame konteineryje yra keturi DIV elementai, turintys klasę "Flex Child" ir rodantys atitinkamai 1, 2, 3 ir 4 teksto turinį.
Šiuo metu apibrėžtas tik "Flex container", kurio plotis yra 400 pikselių, o aukštis - 200 pikselių, o "Flex children" apibrėžtas 100 pikselių plotis ir 50 pikselių aukštis. Nors nė vienas iš vaikų šiuo metu nėra išdėstytas naudojant Flexbox, jie rodomi vertikaliame sąraše.
Norėdami aktyviai naudoti "Flexbox", turite pridėti ir išsaugoti "Flex" konteinerio CSS atributą display: flex;. Kai tai padarysite, pamatysite, kad vaikų išdėstymas pasikeičia automatiškai ir jie dabar rodomi vienas šalia kito.
Jei norite vėl išdėstyti "Flex" vaikus vertikaliai, galite naudoti savybę flex-direction. Nustatykite flex-direction: column; flex konteineriui, kad vėl pakeistumėte flex vaikų orientaciją į vertikalią.
Pastebėsite, kad lankstūs vaikai dabar vėl išdėstyti vertikaliai. Jei dabar sureguliuosite aukštį ir plotį, atrodys, tarsi jie būtų integruoti į bloką, net jei rodymas nustatytas ne į Block, o į Flex.
Tai jau buvo Flexbox išdėstymo pagrindų apžvalga. Šiame vaizdo įraše aptarėme svarbiausias savybes ir pamatėme jų poveikį. Būsimose pamokose nagrinėsime daugiau "Flexbox" savybių ir pamatysime, ką galima nuveikti naudojant šią galingą išdėstymo sistemą.
Apibendrinimas
Šioje pamokoje sužinojote, kaip sukurti paprastą struktūrą naudojant "Flexbox" CSS. Į "Visual Studio Code" integravote "Microsoft Edge" programavimo įrankius ir atlikote pirmuosius žingsnius, kad suaktyvintumėte "Flex" išdėstymą. Jūsų dar laukia daug galimybių, kurias išsamiau apžvelgsime kituose vaizdo įrašuose.
Dažniausiai užduodami klausimai
Kaip CSS suaktyvinti "Flexbox"? "Flexbox" suaktyvinsite nustatydami konteineriui display: flex;.
Kas yra "flex-direction"? "flex-direction" nustato "flex" vaikų išlyginimą horizontaliai (eilutės) arba vertikaliai (stulpeliai).
Kaip integruoti "Microsoft Edge" įrankius į "Visual Studio Code"?tiesiog ieškokite "Microsoft Edge Tools for VS Code" plėtinių juostoje ir juos įdiekite.
