article(s) dans votre panier VOIR

Intérêt de la propriété Flex Flow avec les Flexbox CSS

  • Vidéo 2 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
Flex flow
00:00 / 09:39
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 concernant la mise en page responsive avec les Flexbox CSS, l’auteurJean Bernard André vous explique le Flex flow. Ce cours en ligne a pour objectif de positionner un élément à l’aide de directions. Pour y parvenir, il faut savoir que pour représenter les Flexbox, vous avez besoin d’une page HTML 5. Pour cela, il vous suffit de saisir html : 5 dans votre Sublime Text et appuyez ensuite sur la touche Tab. En notant bien que vous avez également besoin de l’option meta : vp. En appuyant à nouveau Tab, Emmet affiche immédiatement la ligne de code. Cela fait, vous créez un conteneur en utilisant le code .container. Dans ce dernier, vous insérez une série Div. Pour faire cela rapidement, vous utilisez le .item.item$*5. Ainsi, vous obtenez 5 Div ayant la même classe item. Suite à cette action, vous saisissez du texte à l’intérieur de votre Div. Une fois fait, vous passez dans votre feuille de style CSS. Pour commencer, vous créez quelques styles de base pour le Container tels que la couleur de fond. Vous effectuez le même procédé pour les Item. Afin de définir un contenu flex pour ces éléments, vous ajoutez le code display : flex. Si vous souhaitez changer la position des Div, vous ajoutez le code flex-direction : row. Vous avez la possibilité de remplacer Row par Row-reverse, Column et Column-reverse. Pour conclure, il ne faut oublier de lier votre feuille de style CSS à votre page HTML.