article(s) dans votre panier VOIR

Déterminer l'ordre des éléments avec les Flexbox CSS

  • Vidéo 4 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
L'ordre des éléments
00:00 / 03:12
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 ce tutoriel en ligne à propos de la mise en page responsive avec les Flexbox CSS, l’expert vous apprend l'ordre des éléments avec Flex. L’objectif de cette formation consiste à savoir les propriétés utilisées pour manipuler les div. Pour y parvenir, il faut savoir tout d’abord que vous avez la possibilité de créer une taille d’élément par défaut contenu dans la boite. A ce sujet, il faut noter également que les div ont la même classe Item. Afin de définir la taille par défaut, vous utilisez le code Flex-basis : 12em. 12em représente donc la valeur par défaut. D’autre part, Flexbox vous offre également la possibilité de placer les div dans un ordre souhaité. Pour effectuer cela, vous devez créer des propriétés pour les items de chaque div. Dans ces items, vous ajoutez la fonction Order. En n’oubliant pas évidemment de lui donner une valeur. Par ailleurs, afin que la deuxième boite soit par exemple placé en première place, vous utilisez le code item2 {order : 1}. Une fois que vous actualisez votre navigateur, vous pouvez observer que l’ordre des boites change. Vous refaites le même procédé pour appliquer cela au reste de la boite. Pour conclure, pour gérer l’ordre des éléments de votre container, vous savez dorénavant utiliser la fonction Order.