oujood.com

La propriété CSS flex-direction

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.

chercher |

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éfautrow
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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion29
21 -webkit-
1128
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>




Voir aussi nos tutoriel :

fonction ltrim, ltrim

Supprime les espaces (ou d'autres caractères) de d but de chaîne

PHP Upload de fichier

PHP Upload de fichier

Balise abbr abréviation

Définit une abréviation