Flexbox i CSS: Första stegen för att strukturera din webbplats

I den här handledningen kommer du att lära dig hur du kan bygga upp en exempelstruktur för dina webbprojekt med Flexbox-layout i CSS och HTML . Vi kommer att titta på de inbyggda Debugging-tools i Visual Studio Code tillsammans med Microsoft Edge och ta de första stegen för att aktivera Flexbox-layouten. Flexbox är ett kraftfullt layoutsystem som hjälper dig att skapa komplexa layouter med minimal ansträngning och flexibel placering av element.

Viktigaste insikter

• Med Flexbox kan du placera element horisontellt och vertikalt.
• Microsoft Edge Developer Tools kan integreras direkt i Visual Studio Code.
• Flex-direction påverkar Flex-elementens placering.

Steg-för-steg-guide

Först kommer du att installera Microsoft Edge Tools i Visual Studio Code. Sök efter "Microsoft Edge Tools for VS Code" i tilläggen och installera dem.

När tillägget är installerat måste du gå till Debugging-alternativen. Klicka på "Run and Debug" och sedan på "create a launch.json file". Detta kommer att hjälpa dig att konfigurera dina inställningar.

I den konfigurationsfil som nu har skapats, lägg till en ny konfiguration för "Microsoft Edge Tools". Se till att du anger localhost:3000 som lokal adress eftersom vi kör servern på den här porten i vårt terminalfönster.

Nu är det dags att köra ditt projekt. Navigera till rätt undermapp och kör kommandot npm run dev. Öppna sedan localhost:3000 i din webbläsare.

När sidan har laddats kan du aktivera Microsoft Edge Developer Tools genom att klicka på motsvarande knapp i Visual Studio Code. Detta öppnar utvecklarverktyget direkt bredvid din redigerare.

Nu kan du se strukturen för din applikation. Vi har en behållare (div) som har klassen "Flex Container". Inuti denna behållare finns fyra DIV-element som har klassen "Flex Child" och representerar textinnehållet 1, 2, 3 och 4.

Flexbehållaren är för närvarande endast definierad med en bredd på 400 pixlar och en höjd på 200 pixlar, medan Flex-barnen är definierade med en bredd på 100 pixlar och en höjd på 50 pixlar. Även om ingen av barnen för närvarande är placerad med Flexbox, visas de i en vertikal lista.

För att använda Flexbox fullt ut måste du lägga till CSS-attributet display: flex; för Flexbehållaren och spara. När du gör detta kommer du att se att placeringen av barnen ändras automatiskt och de visas nu bredvid varandra.

Om du vill placera Flex-barnen vertikalt igen kan du använda egenskapen flex-direction. Ange flex-direction: column; för Flexbehållaren för att ändra Flex-barnens placering till vertikal riktning igen.

Du kommer att märka att Flex-barnen nu återigen är placerade vertikalt. Om du nu justerar höjden och bredden kommer det att se ut som om de är integrerade i en block, även om display inte är inställd på Block utan på Flex.

Det var en översikt över grunderna i Flexbox-layouten. I videon diskuterade vi de viktigaste egenskaperna och såg deras effekter. I framtida handledningar kommer vi att utforska ytterligare funktioner i Flexbox och se vad du kan åstadkomma med detta kraftfulla layoutsystem.

Sammanfattning

I den här handledningen har du lärt dig hur du bygger en enkel struktur med Flexbox i CSS. Du har integrerat Microsoft Edge Developer Tools i Visual Studio Code och tagit de första stegen för att aktivera Flex-layoutet. Det finns många möjligheter framför dig som vi kommer att utforska närmare i de kommande videorna.