Flex-direction - Astuces CSS

Anonim

La flex-directionpropriété est une sous-propriété du module Disposition de boîte flexible.

Il établit l'axe principal, définissant ainsi la direction dans laquelle les éléments flexibles sont placés dans le conteneur flexible.

Rappel: l'axe principal d'un conteneur flexible est l'axe principal le long duquel les éléments flexibles sont disposés. Attention, ce n'est pas forcément horizontal; cela dépend de la flex-directionpropriété.

La flex-directionpropriété accepte 4 valeurs différentes:

  • row( par défaut ): identique à la direction du texte
  • row-reverse: opposé à la direction du texte
  • column: identique rowmais de haut en bas
  • column-reverse: idem de row-reversehaut en bas

Notez que rowet row-reversesont affectés par la directionnalité du conteneur flexible. Si la direction du texte est ltr, rowreprésente l'axe horizontal orienté de gauche à droite et row-reversede droite à gauche; si la direction est rtl, c'est le contraire.

Syntaxe

flex-direction: row | row-reverse | column | column-reverse .flex-container ( flex-direction: row; )

Démo

Dans la démo suivante:

  • La liste rouge est définie sur row
  • La liste jaune est définie sur row-reverse
  • La liste bleue est définie sur column
  • La liste verte est définie sur column-reverse

Remarque: la direction du texte n'a pas été modifiée.

Découvrez ce stylo!

Donc, fondamentalement, vous utiliserez rowdans la plupart des cas, ou columndans certaines circonstances. Sinon, il est assez rare d'inverser l'ordre des directions.

Prise en charge du navigateur

  • (moderne) signifie la syntaxe récente de la spécification (par exemple display: flex;)
  • (hybride) signifie une syntaxe non officielle étrange de 2011 (par exemple display: flexbox;)
  • (ancien) signifie l'ancienne syntaxe de 2009 (par exemple display: box;)
Chrome Safari Firefox Opéra C'EST À DIRE Android iOS
21+ (moderne)
20- (ancien)		 3.1+ (ancien) 2-21 (ancien)
22+ (nouveau)		 12.1+ (moderne) 10+ (hybride) 2.1+ (ancien) 3.2+ (ancien)

Le navigateur Blackberry 10+ prend en charge la nouvelle syntaxe.

Pour plus d'informations sur la façon de mélanger les syntaxes afin d'obtenir le meilleur support du navigateur, veuillez vous référer à cet article (CSS-Tricks) ou à cet article (DevOpera).