article(s) dans votre panier VOIR

Les outils des Flexbox CSS pour gérer le responsive design : Flew grow et Shrink

  • Vidéo 5 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
Flew grow et shrink des outils pour gérer la responsivité
00:00 / 03:53
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 liée à la mise en page responsive avec les Flexbox CSS, l’auteur vous explique le Flew grow et le shrink des outils pour gérer la responsivité. Ce cours vidéo a pour objectif de découvrir les propriétés CSS relatives au Flexbox. Pour commencer, vous avez en premier lieu la propriété Flex-grow. Afin d’utiliser le Flex-grow, il faut d’abord réduire la valeur de Flex-basis, c’est-à-dire la taille de boite par défaut. Cela, en n’oubliant pas de donner une valeur à Flex-grow. En actualisant la page du navigateur, vous observez que la boite à laquelle vous avez attribué la propriété Flex-grow, a pris beaucoup plus d’espace par rapport aux autres. Si vous souhaitez donc qu’elle soit deux fois plus large que sa voisine, vous indiquez une valeur par défaut de Flex-grow dans Item. En plus de flex-grow, vous avez également Flex-shrink qui consiste à déterminer la façon dont un élément se rétrécit relativement aux autres du contenu. Lorsque vous utilisez Flex-shrink et que vous rétrécissez votre fenêtre, vous observez que les éléments du container se rétrécissent également. Pour conclure, il vous suffit d’appliquer ces étapes et de tester le programme.