Flexbox in CSS: Eerste stappen naar het structureren van jouw website

In deze handleiding leer je hoe je met het Flexbox-layout in CSS en HTML een voorbeeldstructuur voor je webprojecten kunt opzetten. We zullen kijken naar de ingebouwde Debugging-tools van Visual Studio Code in combinatie met Microsoft Edge en de eerste stappen ondernemen om het Flexbox-layout te activeren. Flexbox is een krachtig lay-outsysteem waarmee je complexe lay-outs met minimale inspanning en flexibele ordening van elementen kunt maken.

Belangrijkste inzichten

• Met Flexbox kun je elementen horizontaal en verticaal ordenen.
• De Microsoft Edge Developer Tools kunnen rechtstreeks geïntegreerd worden in Visual Studio Code.
• Flex-direction beïnvloedt de uitlijning van de Flex-elementen.

Stapsgewijze handleiding

Allereerst ga je in Visual Studio Code de Microsoft Edge Tools installeren. Zoek naar "Microsoft Edge Tools for VS Code" in de extensies en installeer deze.

Nadat de extensie is geïnstalleerd, moet je naar de Debugging-opties gaan. Klik op "Run and Debug" en vervolgens op "create a launch.json file". Dit zal je helpen om je instellingen te configureren.

In het configuratiebestand dat zojuist is aangemaakt, voeg je een nieuwe configuratie toe voor "Microsoft Edge Tools". Zorg ervoor dat je localhost:3000 als lokale adres invoert, omdat we de server in ons terminalvenster op deze poort laten draaien.

Het is nu tijd om je project te starten. Ga naar de juiste submap en voer het commando npm run dev uit. Open vervolgens localhost:3000 in je browser.

Zodra de pagina is geladen, kun je de Microsoft Edge Developer Tools activeren door op de juiste knop in Visual Studio Code te klikken. Hiermee opent de Developer Tool zich direct naast je editor.

Je kunt nu de structuur van je applicatie zien. We hebben een container (div) met de class "Flex Container". Binnen deze container bevinden zich vier DIV-elementen met de class "Flex Child" die respectievelijk de tekstinhoud 1, 2, 3 en 4 vertegenwoordigen.

De Flex Container is momenteel slechts gedefinieerd met een breedte van 400 pixels en een hoogte van 200 pixels, terwijl de Flex Children zijn gedefinieerd met een breedte van 100 pixels en een hoogte van 50 pixels. Hoewel geen van de kinderen momenteel met Flexbox is geordend, worden ze weergegeven in een verticale lijst.

Om Flexbox actief te gebruiken, moet je voor de Flex Container de CSS-eigenschap display: flex; toevoegen en opslaan. Als je dat doet, zul je zien dat de ordening van de kinderen automatisch wijzigt en ze nu naast elkaar worden weergegeven.

Als je de Flex Children weer verticaal wilt ordenen, kun je de flex-direction-eigenschap gebruiken. Zet flex-direction: column; voor de Flex Container om de uitlijning van de Flex Children weer in de verticale richting te veranderen.

Je zult zien dat de Flex Children nu weer verticaal zijn gerangschikt. Als je nu de hoogte en breedte aanpast, lijkt het alsof ze in een blok zijn geïntegreerd, zelfs als de display niet is ingesteld op Block, maar op Flex.

Dit was al een overzicht van de basisprincipes van het Flexbox-layout. In de video hebben we de belangrijkste eigenschappen besproken en hun effecten gezien. In toekomstige handleidingen zullen we meer functies van Flexbox verkennen en ontdekken wat je allemaal met dit krachtige lay-outsysteem kunt doen.

Samenvatting

In deze handleiding heb je geleerd hoe je een eenvoudige structuur met Flexbox in CSS maakt. Je hebt de Microsoft Edge Developer Tools geïntegreerd in Visual Studio Code en de eerste stappen genomen om het Flex-layout te activeren. Er liggen nog vele mogelijkheden voor je open die we in de volgende video's nader zullen bekijken.