Flex-direction

La propriété flex-direction est une sous-propriété du module Flexible Box Layout (Flexbox). Elle sert à établir l'axe principal (main axis) et donc à déterminer la direction suivant laquelle les items flex seront placés dans le conteneur flex.

Rappel : l'axe principal d'un conteneur flex est l'axe “primaire” le long duquel les items flex sont alignés. Attention, il n'est pas nécessairement horizontal. Tout dépend justement de la propriété flex-direction.

La propriété flex-direction peut prendre l'une des quatre valeurs suivantes :

  • row (par défaut) : même direction que celle du texte
  • row-reverse : direction inverse de celle du texte
  • column : comme row, mais de haut en bas
  • column-reverse : comme row-reverse mais de bas en haut.

Remarquez que row et row-reverse sont affectés par la directionalité du conteneur flex. Si la direction du texte est ltr (left to right : de gauche à droite), row représente l'axe horizontal orienté de gauche à droite, et row-reverse de droite à gauche. Si la direction est rtl (right to left : de droite à gauche), c'est l'inverse.

Syntaxe

//CSS
flex-direction: row | row-reverse | column | column-reverse

.flex-container {
  flex-direction: row;
}

Démo

Dans la démo suivante, la valeur de de la propriété flex-direction est :

  • pour la liste rouge : row
  • pour la liste jaune : row-reverse
  • pour la liste bleue : column
  • pour la liste verte : column-reverse

Note : la direction du texte n'a pas été indiquée.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

Donc, grosso modo, on utilisera row dans la plupart des cas, et column dans certaines circonstances. Il est assez rare d'avoir à inverser la direction.

Vous pouvez trouver une bonne illustration de l'utilisation de flex-direction dans l'article très clair de Landon Schropp Flexbox, un coup de dés.


À lire également dans La Cascade :

Flexbox, guide complet de Chris Coyier
La liste des articles parus à propos de Flexbox dans La Cascade

Exemples d’utilisation dans La Cascade :

Flexbox, un coup de dés de Landon Schropp

Autres ressources à consulter sur ce sujet :


Cet article est pour l’essentiel tiré de l’almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l’auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d'inspiration pour vos propres designs.