manuel de référence CSS

règle CSS (RULES)

大全 des attributs CSS

CSS3 flex-Attribut flow CSS3 flex-Attribut basis

CSS3 flex-Méthode et exemple d'utilisation de l'attribut direction

En définissant la direction de l'axe principal du conteneur flex, flex-L'attribut CSS direction spécifie comment placer les éléments flex dans le conteneur flex.

Le tableau suivant présente les instructions d'utilisation et l'historique des versions de cet attribut, ainsi que la syntaxe d'utilisation de cet attribut dans les scripts JavaScript.

Valeur par défaut :	row
Applicable à :	Conteneur élastique
Héritage :	Non
Animable :	Non.Voir également Attributs d'animation.
Version :	CSS3nouvelle fonctionnalité
JavaScript syntaxe :	object.style.flexDirection="row-reverse"

flex-Syntaxe d'utilisation de direction

La syntaxe de cet attribut est la suivante :

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

Les exemples suivants montrent comment utiliser flex-Attribut direction.

Exemple

.flex-container　{
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction:　row-reverse;
　　　　
　　　　display:　flex;
　　　　flex-direction:　row-reverse;　　　　
}

Vérifiez voir‹/›

Valeur de l'attribut

Le tableau suivant décrit les valeurs de cet attribut.

Valeur	Description
row	L'axe principal du conteneur flex est dans la même direction que l'axe inline du mode d'écriture actuel, c'est-à-dire l'orientation du texte.
row-reverse	Comme pour row, mais avec un point de départ et une fin de l'axe opposés.
column	L'axe principal du conteneur flex est dans la même direction que l'axe de bloc de l'orientation actuelle du texte (l'axe vertical sous le mode d'écriture horizontal et l'axe horizontal sous le mode d'écriture vertical).
column-reverse	Comme pour les colonnes, mais avec un point de départ et une fin de l'axe opposés.
initial	Réinitialisez cet attribut à sa valeur par défaut.
inherit	Si spécifié, les éléments associés utilisent le flex de leur élément parent-Valeurs de l'attribut direction.

Compatibilité du navigateur

flex-La compatibilité du navigateur de l'attribut direction, les numéros dans le tableau suivant représentent la version minimale du navigateur prenant en charge cet attribut ; tous les navigateurs populaires prennent en charge cet attribut.

	Firefox 18+ ^-moz-,28 Google Chrome 21+ ^-webkit-,29 Internet Explorer 10+ ^-ms-,11 Apple Safari 6.1+ ^-webkit- Opera 12.1+

Pour en savoir plus

Veuillez consulter les tutoriels suivants :CSS3Agencement en colonnes.

Autres attributs associés :align-content,align-items,align-self,display,flex,flex-basis,flex-flow,flex-grow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.

CSS3 flex-Attribut flow CSS3 flex-Attribut basis