Définition et utilisation da la propriété css flex-direction
La propriété flex-direction spécifie la direction des éléments flexibles.Remarque : Si l'élément n'est pas un élément flexible, la propriété flex-direction n'a aucun effet.
La propriété flex-direction est une sous-propriété du module de mise en page des boîtes flexibles. Elle établit l'axe principal de l'élément flexible. L'axe principal de l'élément flexible est l'axe primaire. Il n'est pas nécessairement horizontal tout le temps, il dépend essentiellement de la propriété flex-direction.
Exemple : element { flex-direction : column-reverse;}
La Syntaxe CSS flex-direction
flex-direction: row | row-reverse | column | column-reverse
| Valeurs par défaut | row |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.flexDirection="column-reverse" |
Prise en charge de la propriété css flex-direction dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 29 21 -webkit- | 11 | 28 18 -moz- | 9 6.1 -webkit- | 17 |
Valeurs de la propriété flex-direction
row : Par défaut identique à la direction du texte, les éléments flexibles sont affichés horizontalement, sous forme de rangée.row-reverse : Opposé à la direction du texte
column : Les éléments flexibles sont affichés verticalement, sous forme de colonne de haut en bas.
column-reverse : Identique à column, mais dans l'ordre inverse de bas en haut
initial : Définit cette propriété à sa valeur par défaut.
inherit : Hérite cette propriété de son élément parent.
Notez que les valeurs row et row-reverse sont affectées par la direction du conteneur flex. Si la direction du texte est ltr, row représente l'axe horizontal orienté de gauche à droite, et row-reverse de droite à gauche ; si la direction est rtl, c'est l'inverse.
Exemple Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> La propriété CSS flex-direction </title>
<style>
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.row {
-webkit-flex-direction: row;
flex-direction: row;
}
.row-reverse {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.row-reverse li {
background: gold;
}
.column {
-webkit-flex-direction: column;
flex-direction: column;
float: left;
}
.column li {
background: deepskyblue;
}
.column-reverse {
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
float: right;
}
.column-reverse li {
background: lightgreen;
}
.flex-item {
background: tomato;
padding: 5px;
width: 50px;
height: 50px;
margin: 5px;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<h1>La propriété CSS flex-direction </h1>
<ul class="flex-container row">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container row-reverse">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container column">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container column-reverse">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
</body>
</html>
Modifier la propriété CSS flex-direction avec javascript
Exemple Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> La propriété CSS flex-direction en javascript </title>
<style>
#main {
width: 350px;
height: 350px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: row;
}
#main div {
width: 50px;
height: 50px;
text-align:center;
padding:10px;
}
</style>
</head>
<body>
<h1>Changer flex-direction avec JavaScript</h1>
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
<p>Cliquez sur le bouton "CHANGER" pour définir la valeur de la propriété flexDirection sur "column-reverse".</p>
<button onclick="FonctionChanger()"> CHANGER </button>
<button onclick="location.reload();"> REUNITIALISER </button>
<script>
function FonctionChanger() {
document.getElementById("main").style.flexDirection = "column-reverse";
}
</script>
</body>
</html>
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
