Flexbox v CSS: Prvi koraki za oblikovanje vaše spletne strani

V tem vodniku se boste naučili, kako z uporabo Flexbox-postavitve v CSS in HTML ustvariti strukturo primera za vaše spletno projektovanje. Ukvarjali se bomo z vgrajenimi orodji za odpravljanje napak v Visual Studio Code, povezane s Microsoft Edge in izvedli prve korake za aktivacijo postavitve Flexbox. Flexbox je zmogljiv sistem postavitve, ki vam pomaga ustvarjati kompleksne postavitve z minimalnim trudom in prilagodljivim razporeditvam elementov.

Najpomembnejša spoznanja

• Z Flexboxom lahko elemente razporedite vodoravno in navpično.
• Orodja za odpravljanje napak v Microsoft Edge se lahko neposredno integrirajo v Visual Studio Code.
• Flex-Direction vpliva na usmerjenost fleksibilnih elementov.

Korak po korak vodnik

Najprej boste v programu Visual Studio Code namestili orodja za Microsoft Edge. Poiščite "Microsoft Edge Tools for VS Code" v razširitvah in jih namestite.

Po namestitvi razširitve morate oditi na možnosti za odpravljanje napak. Kliknite »Zaženi in odpravi napake« in nato »ustvari datoteko launch.json«. To vam bo pomagalo konfigurirati vaše nastavitve.

V konfiguracijski datoteki, ki je bila zdaj ustvarjena, dodajte novo konfiguracijo za "Microsoft Edge Tools". Poskrbite, da boste vnesli lokalni naslov localhost:3000, saj bomo v našem terminalu strežnik pognali na tem vratu.

Zdaj je čas, da zaženete svoj projekt. Preklopite v pravilno podmapo in izvedite ukaz npm run dev. Nato odprite localhost:3000 v svojem brskalniku.

Ko se je stran naložila, lahko orodja za odpravljanje napak v Microsoft Edge aktivirate tako, da kliknete ustrezni gumb v programu Visual Studio Code. S tem se odpre orodje za razvijalce neposredno ob vašem urejevalniku.

Zdaj lahko vidite strukturo svoje aplikacije. Imamo kontejner (div), ki ima razred "Flex Container". V tem kontejnerju je štiri DIV elemente, ki imajo razred "Flex Child" in vsak prikazuje besedilno vsebino 1, 2, 3 in 4.

Trenutno je Flex Container definiran le s širino 400 slikovnih točk in višino 200 slikovnih točk, medtem ko so Flex Child z določeno širino 100 slikovnih točk in višino 50 slikovnih točk. Čeprav nobeden od otrok trenutno ni razporejen s Flexboxom, so prikazani v vertikalni listi.

Za aktivacijo Flexboxa morate za Flex Container dodati CSS lastnost display: flex; in jo shraniti. Ko to storite, boste opazili, da se razporeditev otrok avtomatično spremeni in so zdaj prikazani eden ob drugem.

Če želite Flex Child ponovno razporediti v navpično smer, lahko uporabite lastnost flex-direction. Postavite flex-direction: column; za Flex Container, da spremenite usmerjenost Flex Child nazaj v navpično smer.

Opazili boste, da so Flex Child sedaj ponovno razporejeni navpično. Če prilagodite višino in širino, se zdi, da so vključeni v blok, čeprav ni nastavljeno prikazno polje na blok, temveč na Flex.

To je bil pregled osnov postavitve Flexbox. V videoposnetku smo razpravljali o glavnih lastnostih in njihovih učinkih. V prihodnjih vodnikih bomo raziskali še več funkcij Flexboxa in videli, kaj vse lahko dosežete s tem močnim sistemom postavitve.

Povzetek

V tem vodniku ste se naučili, kako zgraditi preprosto strukturo s Flexboxom v CSS. Integrirali ste orodja za odpravljanje napak v Microsoft Edge v Visual Studio Code in izvedli prve korake za aktivacijo postavitve Flex. Pred vami je še veliko možnosti, ki jih bomo natančneje preučili v prihodnjih videoposnetkih.