Selles õpetuses saad teada, kuidas luua Flexboxi kujundust CSS ja HTML abil oma veebiprojektide jaoks. Tutvume Visual Studio Code'iga integreeritud vigadeotsimisvahenditega, mis on seotud Microsoft Edge'iga, ning võtame esimesed sammud Flexboxi kujunduse aktiveerimise suunas. Flexbox on võimas kujundussüsteem, mis aitab sul luua keerukaid kujundusi väikese vaevaga ja elementide paindliku paigutusega.
Olulisemad järeldused
- Felxis saad elemente paigutada nii horisontaalselt kui ka vertikaalselt.
- Microsoft Edge'i arendajatööriistad saab otse Visual Studio Code'is integreerida.
- Flex-suund mõjutab Flex-elementide paigutust.
Juhend samm-sammult
Esmalt installid Visual Studio Code'is Microsoft Edge'i tööriistad. Otsi laiendustest „Microsoft Edge Tools for VS Code“ ja installeeri see.
Pärast laienduse installimist liigu vigadeotsimisvalikutesse. Vajuta „Run and Debug”, seejärel „create a launch.json file“. See aitab sul oma seadeid konfigureerida.
Avatud konfiguratsioonifailis lisa uus konfiguratsioon „Microsoft Edge Tools“ ja veendu, et sisestad kohaliku aadressi localhost:3000, kuna jooksutame serverit selles pordis oma terminalis.
Nüüd on aeg oma projekt käivitada. Liigu õigesse alamkataloogi ja käivita käsk npm run dev. Seejärel ava brauseris localhost:3000.
Kui leht on laaditud, saad Microsoft Edge'i arendajatööriistad aktiveerida, klõpsates Visual Studio Code'is vastaval nupul. See avab arendajatööriista otse sinu redaktori kõrvale.
Nüüd saad vaadata oma rakenduse struktuuri. Meil on konteiner (div), millel on klass „Flex Container“. Selle konteineri sees on neli DIV-elementi, millel on klass „Flex Child“ ja mis esindavad vastavalt tekstisisu 1, 2, 3 ja 4.
Flex Container on hetkel määratletud vaid 400-pikselise laiuse ja 200-pikselise kõrgusega, samas kui Flex-lapsed on määratletud 100-pikselise laiuse ja 50-pikselise kõrgusega. Kuigi praegu pole ükski laps veel Flexboxiga paigutatud, kuvatakse nad vertikaalses loendis.
Flexboxi aktiveerimiseks pead Flex Containeri jaoks lisama CSS-atribuudi display: flex; ja salvestama. Kui seda teed, märkad, et laste paigutus muutub automaatselt ja nad kuvatakse nüüd kõrvuti.
Kui soovid uuesti paigutada Flex-lapsed vertikaalselt, saad kasutada flex-direction omadust. Määra flex-direction: column; Flex Containeri jaoks, et muuta Flex-laste paigutus tagasi vertikaalsesse suunda.
Märkad, et Flex-lapsed on nüüd taas vertikaalselt paigutatud. Kui kohandad nüüd kõrgust ja laiust, paistab nagu oleksid nad blokki integreeritud, hoolimata sellest, et display pole määratud blokiks, vaid flexiks.
See oli ülevaade Flexboxi kujunduse alustest. Videos arutasime läbi põhilised omadused ja nende mõju. Tulevastes õpetustes uurime veelgi Flexboxi funktsioone ja näeme, mida selle võimsa kujundussüsteemiga saavutada saad.
Kokkuvõte
Selles õpetuses oled õppinud, kuidas luua Flexboxiga lihtsat struktuuri CSS-is. Oled integreerinud Microsoft Edge'i arendajatööriistad Visual Studio Code'is ja teinud esimesed sammud Flex-kujunduse aktiveerimiseks. Ees on palju võimalusi, mida lähemalt uurime järgmistes videotutes.
Sagedased küsimused
Kuidas aktiveerida Flexbox CSS-is?Aktiveerid Flexboxi, lisades konteinerile display: flex;.
Mis on flex-suund?Flex-suund määrab Flex-laste paigutuse, kas horisontaalselt (row) või vertikaalselt (column).
Kuidas integreerida Microsoft Edge'i tööriistad Visual Studio Code'i?Otsi lihtsalt Extensions-ribalt „Microsoft Edge Tools for VS Code“ ja installi see.
