Leçons
Démarrer
Démarrer la formation
CodeGym /Cours /Frontend SELF FR /Orientation des axes

Orientation des axes

Frontend SELF FR
Niveau 17 , Leçon 2
Disponible

6.1 Propriété flex-direction

Flexbox offre des outils flexibles et puissants pour créer des mises en page adaptatives. Une partie essentielle de ce système sont les axes de mise en page, qui définissent comment les éléments Flex seront disposés à l'intérieur du conteneur Flex. Ci-dessous, nous examinerons en détail les propriétés flex-direction et flex-wrap, qui contrôlent la direction des axes et le comportement des éléments Flex en cas de débordement.

La propriété flex-direction définit la direction de l'axe principal le long duquel les éléments Flex seront disposés. Cette direction peut être horizontale ou verticale, ainsi que directe ou inverse.

Valeurs :

  • row : l'axe principal est horizontal de gauche à droite (valeur par défaut)
  • row-reverse : l'axe principal est horizontal de droite à gauche
  • column : l'axe principal est vertical de haut en bas
  • column-reverse : l'axe principal est vertical de bas en haut

Exemple d'utilisation

1. Les éléments sont disposés horizontalement :

CSS 
    
      .container-row {
        display: flex;
        flex-direction: row;
        border: 2px solid #000;
        padding: 10px;
      }

      .container-row-reverse {
        display: flex;
        flex-direction: row-reverse;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-row">
        <div class="item">Élément 1</div>
        <div class="item">Élément 2</div>
        <div class="item">Élément 3</div>
      </div>
      <div class="container-row-reverse">
        <div class="item">Élément 1</div>
        <div class="item">Élément 2</div>
        <div class="item">Élément 3</div>
      </div>

2. Les éléments sont disposés verticalement :

CSS 
    
      .container-column {
        display: flex;
        flex-direction: column;
        border: 2px solid #000;
        padding: 10px;
      }

      .container-column-reverse {
        display: flex;
        flex-direction: column-reverse;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-column">
        <div class="item">Élément 1</div>
        <div class="item">Élément 2</div>
        <div class="item">Élément 3</div>
      </div>

      <div class="container-column-reverse">
        <div class="item">Élément 1</div>
        <div class="item">Élément 2</div>
        <div class="item">Élément 3</div>
      </div>

Explication du code :

  • .container-row : les éléments sont disposés horizontalement de gauche à droite
  • .container-row-reverse : les éléments sont disposés horizontalement de droite à gauche
  • .container-column : les éléments sont disposés verticalement de haut en bas
  • .container-column-reverse : les éléments sont disposés verticalement de bas en haut

6.2 Propriété flex-wrap

La propriété flex-wrap détermine si les éléments Flex doivent être déplacés vers une nouvelle ligne/colonne s'ils ne rentrent pas dans une seule ligne. Cela est particulièrement utile pour créer des mises en page adaptatives, où la taille du conteneur peut changer en fonction de l'appareil ou de l'écran.

Valeurs

  • nowrap : les éléments ne se déplacent pas et restent sur une ligne/colonne (valeur par défaut)
  • wrap : les éléments se déplacent sur une nouvelle ligne/colonne si nécessaire
  • wrap-reverse : les éléments se déplacent sur une nouvelle ligne/colonne dans l'ordre inverse

Exemples d'utilisation

Valeur nowrap :

Les éléments ne se déplacent pas et restent sur une ligne/colonne (valeur par défaut).

CSS 
    
      .container-nowrap {
        display: flex;
        flex-wrap: nowrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-nowrap">
        <div class="item">Élément 1</div>
        <div class="item">Élément 2</div>
        <div class="item">Élément 3</div>
        <div class="item">Élément 4</div>
      </div>

Valeur wrap :

Les éléments se déplacent sur une nouvelle ligne/colonne si nécessaire.

CSS 
    
      .container-wrap {
        display: flex;
        flex-wrap: wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap">
        <div class="item">Élément 1</div>
        <div class="item">Élément 2</div>
        <div class="item">Élément 3</div>
        <div class="item">Élément 4</div>
      </div>

Valeur wrap-reverse :

Les éléments se déplacent sur une nouvelle ligne/colonne dans l'ordre inverse.

CSS 
    
      .container-wrap-reverse {
        display: flex;
        flex-wrap: wrap-reverse;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap-reverse">
        <div class="item">Élément 1</div>
        <div class="item">Élément 2</div>
        <div class="item">Élément 3</div>
        <div class="item">Élément 4</div>
      </div>

Explication du code :

  • .container-nowrap : les éléments Flex restent sur une seule ligne, même s'ils dépassent les limites du conteneur
  • .container-wrap : les éléments Flex se déplacent sur une nouvelle ligne s'ils ne rentrent pas sur une ligne
  • .container-wrap-reverse : les éléments Flex se déplacent sur une nouvelle ligne dans l'ordre inverse

6.3 Utilisation de flex-direction et flex-wrap

Les propriétés flex-direction et flex-wrap peuvent être combinées à l'aide de la propriété raccourcie flex-flow. Cette propriété permet de définir à la fois la direction de l'axe et le déplacement des éléments en même temps.

Syntaxe :

    
      .container {
        flex-flow: [flex-direction] [flex-wrap];
      }

Exemple d'utilisation :

CSS 
    
      .container {
        display: flex;
        flex-flow: row wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container">
        <div class="item">Élément 1</div>
        <div class="item">Élément 2</div>
        <div class="item">Élément 3</div>
        <div class="item">Élément 4</div>
        <div class="item">Élément 5</div>
      </div>

Explication du code :

  • .container : conteneur Flex avec utilisation combinée de flex-direction: row; et flex-wrap: wrap;, ce qui signifie que les éléments sont disposés horizontalement et se déplacent sur une nouvelle ligne si nécessaire
Commentaires
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION