Flexboks i CSS: Første skritt mot strukturering av nettsiden din

I denne opplæringen vil du lære hvordan du kan bygge en eksempelstruktur for dine webprosjekter med Flexbox-layoutet i CSS og HTML. Vi vil se nærmere på de innebygde feilsøkingsverktøyene i Visual Studio Code i sammenheng med Microsoft Edge og ta de første stegene for å aktivere Flexbox-layoutet. Flexbox er et kraftig layout-system som hjelper deg med å opprette komplekse layouter med minimal innsats og fleksibel plassering av elementer.

Viktigste funn

• Med Flexbox kan du plassere elementer horisontalt og vertikalt.
• Microsoft Edge Developer Tools kan integreres direkte i Visual Studio Code.
• Flex-Direction påvirker justeringen av Flex-elementene.

Trinn-for-trinn veiledning

Først vil du installere Microsoft Edge-verktøy i Visual Studio Code. Søk etter "Microsoft Edge Tools for VS Code" i utvidelsene og installer dem.

Når utvidelsen er installert, må du gå til feilsøkingsalternativene. Klikk på "Run and Debug" og deretter på "create a launch.json file". Dette vil hjelpe deg med å konfigurere innstillingene dine.

I konfigurasjonsfilen som nå er opprettet, legg til en ny konfigurasjon for "Microsoft Edge Tools". Sørg for at du legger til localhost:3000 som lokal adresse, da vi lar serveren kjøre på denne porten i terminalen vår.

Nå er tiden inne for å starte prosjektet ditt. Gå til riktig underkatalog og kjør kommandoen npm run dev. Åpne deretter localhost:3000 i nettleseren din.

Når siden er lastet, kan du aktivere Microsoft Edge Developer Tools ved å klikke på den tilhørende knappen i Visual Studio Code. Dette vil åpne utviklertool direkte ved siden av redigeringsvinduet ditt.

Nå kan du se strukturen til applikasjonen din. Vi har en beholder (div) med klassen "Flex Container". Inne i denne beholderen finner du fire DIV-elementer med klassen "Flex Child" som representerer tekstinnholdet 1, 2, 3 og 4.

Flex Container er for øyeblikket bare definert med en bredde på 400 piksler og en høyde på 200 piksler, mens Flex Child-ene er definert med en bredde på 100 piksler og en høyde på 50 piksler. Selv om ingen av barna er ordnet med Flexbox for øyeblikket, vises de i en vertikal liste.

For å aktivere Flexbox fullt ut, må du legge til CSS-attributtet display: flex; for Flex Container og lagre. Når du gjør dette, vil du se at plasseringen av barna automatisk endres, og de blir nå vist side om side.

Hvis du vil ordne Flex Child-ene vertikalt igjen, kan du bruke flex-direction-eigenskapen. Sett flex-direction: column; for Flex Container for å endre plasseringen av Flex Child-ene tilbake til vertikal retning.

Du vil legge merke til at Flex Child-ene nå er ordnet vertikalt igjen. Hvis du justerer høyden og bredden, vil det se ut som om de er integrert i en blokk, selv om displayet ikke er satt til Block, men til Flex.

Dette var en oversikt over grunnleggende av Flexbox-layoutet. I videoen har vi diskutert de viktigste egenskapene og sett deres virkning. I fremtidige opplæringer vil vi utforske flere funksjoner i Flexbox og se hva du kan oppnå med dette kraftige layout-systemet.

Oppsummering

I denne opplæringen har du lært hvordan du bygger en enkel struktur med Flexbox i CSS. Du integrerte Microsoft Edge Developer Tools i Visual Studio Code og tok de første skrittene for å aktivere Flex-layoutet. Det er mange muligheter fremover som vi vil se nærmere på i kommende videoer.