article(s) dans votre panier VOIR

Aligner ses éléments horizontalement et verticalement avec les Flexbox CSS

  • Vidéo 3 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
Aligner ses éléments horizontalement et verticalement
00:00 / 06:28
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’auteur Jean Bernard André vous explique comment aligner ses éléments horizontalement et verticalement avec Flex. Ce cours en ligne a pour objectif d’arranger les boîtes à l’intérieur du conteneur. Pour y parvenir, vous devez tout d’abord vérifier que la fonction Flex-wrap est à no-wrap. Cela signifie que les cinq Div se trouvent dans le container sur une seule ligne. Cela fait, vous passez dans votre feuille de style CSS. Afin d’arranger les boîtes horizontalement, vous utilisez la fonction Justify-content. En notant bien que par défaut la valeur de cette fonction est Stretch. Si vous remplacez ce dernier par Flex-end, vous pouvez constater que les boîtes sont empilées du côté du container. Center permet d’empiler les boîtes au milieu du container. Après Center, vous avez Space-between qui vous permet de distribuer également chacune des boîtes de manière horizontale. Pour les arranger verticalement, vous devez changer la valeur de Flex-direction en Column. Une fois fait, vous pouvez également apporter des modifications sur la Justify-content. Cela vous permet aussi de manipuler les Div de votre container. La valeur Space-between, vous aide à garder un espace régulier entre chacune des boîtes. Afin d’organiser votre contenu verticalement, vous utilisez Align-items. En donnant une valeur Flex-start à cette fonction, vous remarquez que les boîtes s’alignent verticalement en haut du container. Pour conclure, Justify-content et Align-items vous permettent d’agencer la position des boîtes dans Flex.