Propriété CSS flex-direction
Exemple
Définissez la direction des éléments flexibles à l'intérieur de l'élément <div> dans l'ordre inverse :
div
{
display: flex;
flex-direction: row-reverse;
}
Conseil : Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La flex-direction
propriété spécifie la direction des éléments flexibles.
Remarque : Si l'élément n'est pas un élément flexible, la flex-direction
propriété n'a aucun effet.
Valeur par défaut: | ligne |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.flexDirection="colonne-inverse" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit- ou -moz- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
flex-direction | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
Syntaxe CSS
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
Valeurs de propriété
Value | Description | Play it |
---|---|---|
row | Default value. The flexible items are displayed horizontally, as a row | |
row-reverse | Same as row, but in reverse order | |
column | The flexible items are displayed vertically, as a column | |
column-reverse | Same as column, but in reverse order | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Utilisation flex-direction
avec des requêtes multimédias pour créer une mise en page différente pour différentes tailles d'écran/appareils :
.flex-container {
display: flex;
flex-direction: row;
}
/*
Responsive layout - makes a one column layout instead of a two-column layout
*/
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
Pages connexes
Tutoriel CSS : Boîte flexible CSS
Référence CSS : propriété flex-flow
Référence CSS : propriété flex-wrap
Référence CSS : propriété flex
Référence CSS : propriété flex-grow
Référence CSS : propriété flex-shrink
Référence CSS : propriété flex-basis
Référence HTML DOM : propriété flexDirection