Flexbox en CSS: Premiers pas pour structurer votre site web

Dans ce tutoriel, vous apprendrez comment construire une structure d'exemple pour vos projets web avec le layout Flexbox en CSS et HTML. Nous explorerons les outils de debugging intégrés de Visual Studio Code en association avec Microsoft Edge et ferons les premiers pas pour activer le layout Flexbox. Flexbox est un système de layout puissant qui vous permet de créer des mises en page complexes avec un effort minimal et un arrangement flexible des éléments.

Principales conclusions

• Avec Flexbox, vous pouvez disposer les éléments horizontalement et verticalement.
• Les outils de développement de Microsoft Edge peuvent être intégrés directement dans Visual Studio Code.
• La direction Flex influence l'alignement des éléments Flex.

Guide étape par étape

Tout d'abord, dans Visual Studio Code, vous installerez les outils Microsoft Edge. Recherchez "Outils Microsoft Edge pour VS Code" dans les extensions et installez-les.

Une fois l'extension installée, vous devez accéder aux options de débogage. Cliquez sur "Exécuter et déboguer" puis sur "créer un fichier launch.json". Cela vous aidera à configurer vos paramètres.

Dans le fichier de configuration nouvellement créé, ajoutez une nouvelle configuration pour "Outils Microsoft Edge". Assurez-vous d'entrer en tant qu'adresse locale localhost:3000, car nous exécutons le serveur sur ce port dans notre terminal.

Il est maintenant temps de démarrer votre projet. Naviguez vers le bon sous-répertoire et exécutez la commande npm run dev. Ensuite, ouvrez localhost:3000 dans votre navigateur.

Une fois la page chargée, vous pouvez activer les outils de développement de Microsoft Edge en cliquant sur le bouton correspondant dans Visual Studio Code. Cela ouvrira l'outil de développement directement à côté de votre éditeur.

Maintenant, vous pouvez voir la structure de votre application. Nous avons un conteneur (div) portant la classe "Flex Container". À l'intérieur de ce conteneur, il y a quatre éléments DIV ayant la classe "Flex Child" et représentant respectivement les contenus textuels 1, 2, 3 et 4.

Actuellement, le Conteneur Flex n'est défini qu'avec une largeur de 400 pixels et une hauteur de 200 pixels, tandis que les éléments Flex enfants sont définis avec une largeur de 100 pixels et une hauteur de 50 pixels. Bien que aucun des enfants ne soit actuellement disposé avec Flexbox, ils sont affichés dans une liste verticale.

Pour utiliser Flexbox, vous devez ajouter l'attribut CSS display: flex; au Conteneur Flex et enregistrer les modifications. En le faisant, vous verrez que l'agencement des enfants change automatiquement et qu'ils sont maintenant affichés côte à côte.

Si vous souhaitez à nouveau disposer verticalement les éléments Flex, vous pouvez utiliser la propriété flex-direction. Définissez flex-direction: column; pour le Conteneur Flex afin de rétablir l'alignement des éléments Flex dans la direction verticale.

Vous remarquerez que les éléments Flex sont à nouveau disposés verticalement. Si vous ajustez ensuite la hauteur et la largeur, ils semblent être intégrés dans un bloc, même si l'affichage n'est pas défini en bloc mais en Flex.

C'était déjà une vue d'ensemble des bases du layout Flexbox. Dans la vidéo, nous avons discuté des caractéristiques principales et en avons vu les effets. Dans les prochains tutoriels, nous explorerons d'autres fonctionnalités de Flexbox et verrons ce que vous pouvez réaliser avec ce puissant système de layout.

Résumé

Dans ce tutoriel, vous avez appris à construire une structure simple avec Flexbox en CSS. Vous avez intégré les outils de développement de Microsoft Edge dans Visual Studio Code et effectué les premiers pas pour activer le layout Flex. De nombreuses possibilités s'offrent à vous que nous étudierons de plus près dans les vidéos suivantes.