Attribut flex-direction CSS

Définition et utilisation

L'attribut flex-direction détermine la direction des éléments élastiques.

Remarque :Si l'élément n'est pas un élément élastique, l'attribut flex est invalide.

Voir également :

Tutoriel CSS :Cadre flexible CSS

Manuel CSS :Propriété flex

Manuel CSS :Propriété flex-basis

Manuel CSS :Propriété flex-flow

Manuel CSS :Propriété flex-grow

Manuel CSS :Propriété flex-shrink

Manuel CSS :Propriété flex-wrap

Manuel HTML DOM :Propriété flexDirection

Exemple

Définissez l'orientation des éléments flexibles à l'intérieur de l'élément <div> dans l'ordre inverse :

div {
  display: flex;
  flex-direction: row-reverse; 
}

Essayez-le vous-même

Syntaxe CSS

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Valeur de l'attribut

Valeur Description
row Valeur par défaut. Affiche les éléments flexibles en ligne horizontalement.
row-reverse Équivalent à une rangée, mais dans le sens opposé.
column Affiche les éléments flexibles verticalement en tant que colonnes.
column-reverse Équivalent à une colonne, mais dans le sens opposé.
initial Réinitialisez cette propriété à sa valeur par défaut. Voir initial。
inherit Inherits this property from its parent element. Voir inherit。

Détails techniques

Valeur par défaut : row
Héritage : Non
Création d'animation : Non pris en charge. Voir :Propriétés liées aux animations。
Version : CSS3
Syntaxe JavaScript : object.style.flexDirection="column-reverse"

Plus d'exemples

Utilisez flex-direction et les requêtes media pour créer différentes mises en page pour différentes tailles d'écran / appareils :

.flex-container {
  display: flex;
  flex-direction: row;
}
/* Conception réactive - créez une mise en page en une colonne (100％) plutôt qu'en deux colonnes (50％) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Essayez-le vous-même

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété.

Les nombres avec -webkit- ou -moz- indiquent la première version utilisant le préfixe.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0