article(s) dans votre panier VOIR

Obtenir une navigation de site internet responsive grâce aux Flexbox CSS

  • Vidéo 7 sur 9
  • 46:24 de formation
  • 9 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Une navigation de site internet responsive gérée par flexbox
00:00 / 06:47
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
14,90€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Détails de la formation

Dans cette formation en ligne sur la mise en page responsive avec les Flexbox CSS, l’expert formateur vous explique la navigation de site internet responsive gérée par Flexbox. Ce cours en ligne a pour objectif de créer une navigation responsive. Pour y parvenir, vous créez tout d’abord un nouveau fichier HTML. Dans ce fichier, vous saisissez une base de code HTML puis vous ajoutez le Viewport. Dans la partie Body, vous allez créer une navigation composée de cinq menus. Ensuite cela, vous créez une feuille de style CSS. En n’oubliant pas évidemment de la relier à votre page HTML. Cela fait, vous saisissez la propriété Display : flex dans ul.navigation. Suite à cette action, vous utilisez la propriété Flex-flow, en lui donnant une valeur Row Wrap. Cette valeur signifie que si les menus dépassent la largeur du container, ils repassent à la ligne. Après cela, il faut ajouter la propriété Justify-content et lui donner une valeur flex-end. Cette propriété permet de gérer les alignements horizontaux de Display : flex. En ce qui concerne le comportement responsif de la page, vous utilisez le code @media all and (max-width : 480px). Ceci étant fait, vous mettez ul.navigation et changez la valeur de flex-direction en Column. Ce qui implique lorsque la taille de votre écran est inférieure à 480px, les menus s’alignent verticalement. Pour conclure, il vous connaissez maintenant les procédés à suivre pour obtenir une navigation responsive.