I denne vejledning vil du lære, hvordan du kan opbygge en eksempelstruktur til dine webprojekter i CSS og HTML ved hjælp af Flexbox-layout. Vi vil undersøge de integrerede Debugging-værktøjer i Visual Studio Code i forbindelse med Microsoft Edge og tage de første skridt til at aktivere Flexbox-layoutet. Flexbox er et kraftfuldt layoutsystem, der hjælper dig med at oprette komplekse layouts med minimal indsats og fleksibel placering af elementer.
Vigtigste erkendelser
- Med Flexbox kan du placere elementer vandret og lodret.
- Microsoft Edge Developer Tools kan integreres direkte i Visual Studio Code.
- Flex-Direction påvirker Flex-elementernes placering.
Trin-for-trin vejledning
Først vil du installere Microsoft Edge-værktøjerne i Visual Studio Code. Søg efter "Microsoft Edge-tools til VS Code" i udvidelserne og installér dem.

Efter installation af udvidelsen skal du gå til fejlfindingsoptionerne. Klik på "Kør og debug" og derefter på "opret en launch.json-fil". Dette vil hjælpe dig med at konfigurere dine indstillinger.
I den konfigurationsfil, der nu er oprettet, tilføj en ny konfiguration for "Microsoft Edge Tools". Sørg for at angive localhost:3000 som lokal adresse, da vi kører serveren på denne port i vores terminal.

Nu er det tid til at starte dit projekt. Gå til den korrekte undermappe og kør kommandoen npm run dev. Åbn derefter localhost:3000 i din browser.

Når siden er indlæst, kan du aktivere Microsoft Edge Developer Tools ved at klikke på den tilsvarende knap i Visual Studio Code. Dette åbner værktøjet til udvikling direkte ved siden af din editor.
Nu kan du se strukturen af din ansøgning. Vi har en beholder (div) med klassen "Flex-container". Inden i denne beholder findes fire DIV-elementer, der har klassen "Flex Child" og repræsenterer hver teksten 1, 2, 3 og 4.

Flex-containeren er i øjeblikket kun defineret med en bredde på 400 pixels og en højde på 200 pixels, mens Flex-børnene er defineret med en bredde på 100 pixels og en højde på 50 pixels. Selvom ingen af børnene i øjeblikket er placeret med Flexbox, vises de i en vertikal liste.
For at udnytte Flexbox skal du tilføje CSS-attributtet display: flex; til Flex-containeren og gemme. Når du har gjort dette, vil du se, at børnenes placering automatisk ændrer sig, og de vises nu side om side.

Hvis du vil placere Flex-børnene vertikalt igen, kan du bruge flex-direction-ejendommen. Angiv flex-direction: column; for Flex-containeren for at ændre Flex-børnenes placering tilbage til den vertikale retning.

Du vil se, at Flex-børnene nu er placeret vertikalt igen. Hvis du nu tilpasser højden og bredden, vil det se ud, som om de er integreret i en blok, selvom displayet ikke er indstillet til Blok, men Flex.
Dette var allerede en oversigt over grundprincipperne for Flexbox-layoutet. I videoen har vi diskuteret de vigtigste egenskaber og set deres virkninger. I fremtidige vejledninger vil vi udforske flere funktioner af Flexbox og se, hvad du alt kan gøre med dette kraftfulde layoutsystem.
Opsamling
I denne vejledning har du lært, hvordan du opbygger en simpel struktur med Flexbox i CSS. Du har integreret Microsoft Edge Developer Tools i Visual Studio Code og taget de første skridt til at aktivere Flex-layoutet. Der er mange muligheder foran dig, som vi vil se nærmere på i de kommende videoer.
Ofte stillede spørgsmål
Hvordan aktiverer jeg Flexbox i CSS?Du aktiverer Flexbox ved at angive display: flex; for containeren.
Hvad er flex-direction?Flex-direction bestemmer placeringen af Flex-børnene, enten vandret (row) eller lodret (column).
Hvordan integrerer jeg Microsoft Edge Tools i Visual Studio Code?Søg blot efter "Microsoft Edge Tools for VS Code" i extensions-ruden og installer dem.