Retourne l'heure actuelle
La propriété flex-direction définit la direction dans laquelle les éléments flexibles sont placés dans le conteneur flex en suvant l'axe principal.
Rappel : l'axe principal d'un conteneur flex est l'axe primaire selon lequel les éléments flex sont disposés. Attention, il n'est pas forcément horizontal, cela dépend de la propriété 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" |
Explorateur | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
Verssion | 29 21 -webkit- | 11 | 28 18 -moz- | 9 6.1 -webkit- | 17 |
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>
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>
PROMO ! CLUB AFFILIATION FACILE : lien publicitaire affiché pendant 1 semaine sur plusieurs sites à fort trafic, partage des commissions 1TPE et SystemeIO, plus de 20000 produits.
Ces sites web "pépites" vous payent entre 500 et 1000 euros par mois pour effectuer de petites tâches simples !