Flexbox i CSS: Første skridt til at strukturere din hjemmeside

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.