Le guide ultime de Flexbox

Vue d'ensemble

Le modèle de mise en page Flexbox, officiellement reconnu sous le nom de CSS Flexible Box Layout Module, est un modèle de disposition en CSS.

Flexbox est une mise en page unidimensionnelle, ce qui signifie qu'il dispose les éléments selon une seule dimension à la fois — soit en ligne, soit en colonne, mais jamais les deux ensemble. Cela le distingue du modèle bidimensionnel qu'est CSS Grid Layout, qui dispose les éléments selon deux dimensions simultanément (lignes et colonnes à la fois).

Flexbox a été introduit comme alternative aux flottants CSS pour définir l'apparence générale d'une page web. Il présente de nombreux avantages : il permet notamment de contrôler l'alignement, la direction, l'ordre et la taille des éléments.

Les éléments à l'intérieur d'un conteneur flex :

• peuvent être organisés dans n'importe quelle direction (vers la gauche, vers la droite, vers le bas ou même vers le haut) (flex-direction).
• peuvent avoir un ordre direct (gauche à droite) ou inversé (droite à gauche).
• peuvent avoir une largeur et une hauteur « flex » pour remplir l'espace disponible (flex-item).
• peuvent être configurés pour se réduire ou s'étendre dynamiquement le long de l'axe principal, tout en préservant la taille de l'axe secondaire transversal.
• peuvent être organisés linéairement le long de l'axe principal ou répartis sur plusieurs lignes le long ou en travers de l'axe transversal.

Flexbox est relativement récent, mais il bénéficie aujourd'hui d'une excellente prise en charge par les navigateurs.

(En savoir plus sur la compatibilité des navigateurs).

Les bases de Flexbox

Lorsque vous travaillez avec Flexbox, vous devez raisonner en termes de deux axes — l'axe principal et l'axe transversal — et distinguer les conteneurs flex des éléments flex.

Axe principal et axe transversal

Flexbox est une mise en page orientée selon un seul axe ; il possède un axe principal et un axe transversal. Cela signifie que les éléments sont disposés soit le long de l'axe principal, soit le long de l'axe transversal. L'axe transversal est toujours perpendiculaire à l'axe principal.

L'axe principal est défini par la propriété flex-direction, qui accepte les valeurs suivantes :

• row
• row-reverse
• column
• column-reverse

Si la propriété flex-direction est définie avec les valeurs row ou row-reverse, alors l'axe principal sera horizontal, c'est-à-dire qu'il s'étend le long de la ligne dans la direction en ligne. L'axe transversal s'étendra alors vers le bas des colonnes.

Si la propriété flex-direction est définie avec les valeurs column ou column-reverse, alors l'axe principal sera vertical, c'est-à-dire qu'il s'étend du haut vers le bas de la page dans la direction en bloc. Quant à l'axe transversal, il s'étendra le long des lignes.

Regardez cette figure pour mieux comprendre le concept des axes Flexbox.

• main axis (axe principal) — L'axe principal d'un conteneur flex est l'axe le long duquel les éléments flex sont placés.
• main-start | main-end — Les éléments flex sont disposés dans le conteneur en partant de main-start et en allant vers main-end.
• main size (taille principale) — La largeur ou la hauteur d'un élément flex dans la dimension principale constitue sa taille principale.
• cross axis (axe transversal) — L'axe perpendiculaire à l'axe principal, dont la direction dépend de la direction de l'axe principal (horizontale ou verticale).
• cross-start | cross-end — Les lignes flex sont remplies d'éléments et placées dans le conteneur en commençant du côté cross-start du conteneur flex et en allant vers le côté cross-end.
• cross size (taille transversale) — La largeur ou la hauteur d'un élément flex dans la dimension transversale constitue sa taille transversale.

Source : W3.org

Conteneurs flex et éléments flex

Un conteneur flex est un élément parent qui regroupe un ensemble d'éléments enfants, les éléments flex. Dans la plupart des cas, le conteneur définit la mise en page et la position de ses éléments flex ; cependant, les éléments flex peuvent être manipulés individuellement.

Pour transformer un élément HTML en conteneur flex, vous devez utiliser la propriété display avec la valeur flex (conteneur flex de niveau bloc) ou inline-flex (définit un conteneur flex de niveau en ligne). Sinon, le navigateur ignorera toutes les propriétés Flexbox que vous avez utilisées.

Conteneur Flexbox

.container {
  display: flex; /* or inline-flex*/
}

Propriétés du conteneur flex

La propriété flex-direction

La propriété flex-direction est utilisée pour créer des mises en page en lignes et en colonnes. Elle spécifie la direction de l'axe principal du conteneur flex et détermine l'ordre dans lequel les éléments apparaissent.

La propriété flex-direction accepte les valeurs suivantes :

• row — les éléments sont affichés le long de la ligne de gauche à droite.
• row-reverse — les éléments sont affichés de droite à gauche.
• column — les éléments sont affichés verticalement de haut en bas.
• column-reverse — les éléments sont affichés verticalement de bas en haut.

Exemple de la propriété flex-direction :

Exemple de la propriété flex-direction

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h3 {
        color: #8ebf42;
      }
      .flex-container {
        display: flex;
        flex-direction: row-reverse;
        padding: 30px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 80px;
        height: 70px;
        margin: 5px;     
        border-radius: 3px;
        background-color: #1faadb;
      }
    </style>
  </head>
  <body>
    <h3>row-reverse</h3>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

Dans notre exemple, les éléments sont organisés dans un ordre inversé. Modifiez les valeurs de la propriété flex-direction (row, column, column-reverse) pour observer comment l'apparence des éléments change.

La propriété flex-wrap

Par défaut, tous les éléments flex tiennent sur une seule ligne ; si les éléments flex sont trop larges pour le conteneur, ils le dépasseront. Pour éviter cela, vous devez utiliser la propriété flex-wrap pour faire passer les éléments à la ligne.

La propriété peut accepter les valeurs suivantes :

• nowrap (par défaut) — les éléments flex sont affichés sur une seule ligne ; par défaut, ils s'adaptent à la largeur du conteneur flex.
• wrap — les éléments flex sont affichés sur plusieurs lignes si nécessaire, de gauche à droite et de haut en bas.
• wrap-reverse — les éléments flex sont affichés sur plusieurs lignes si nécessaire, de gauche à droite et de bas en haut.

La propriété justify-content

La propriété justify-content est utilisée pour définir l'alignement horizontal des éléments le long de l'axe principal. Elle permet de distribuer l'espace libre entre les éléments flex sur l'axe principal.

Les valeurs de justify-content sont les suivantes :

• flex-start (valeur par défaut) — les éléments sont disposés au début du conteneur.
• flex-end — les éléments sont disposés à la fin du conteneur.
• center — les éléments sont disposés au centre du conteneur.
• space-between — les éléments sont répartis uniformément dans la ligne (avec de l'espace entre eux) ; le premier élément se trouve au début, le dernier à la fin.
• space-around — les éléments sont affichés avec de l'espace avant, entre et après eux.
• space-evenly — les éléments sont distribués de sorte que l'espacement entre deux éléments quelconques (ainsi que l'espace jusqu'aux bords) soit égal.

Exemple de la propriété justify-content :

Propriété justify-content, exemples

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        padding: 10px;
        margin-bottom: 20px;
        background-color: #1faadb;
      }
      .flex-start {
        justify-content: flex-start;
      }
      .flex-end {
        justify-content: flex-end;
      }
      .center {
        justify-content: center;
      }
      .space-between {
        justify-content: space-between;
      }
      .space-around {
        justify-content: space-around;
      }
      .flex-container > div {
        width: 28%;
        height: 45px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .flex-container > div.item-two {
        width: 18%;
      }
    </style>
  </head>
  <body>
    <p>flex-start</p>
    <div class="flex-container flex-start">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>flex-end</p>
    <div class="flex-container flex-end">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>center</p>
    <div class="flex-container center">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>space-between</p>
    <div class="flex-container space-between">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>space-around</p>
    <div class="flex-container space-around">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
  </body>
</html>

Modifiez la valeur de la propriété justify-content pour voir comment les éléments sont alignés.

La propriété align-items

La propriété align-items est utilisée pour aligner les éléments le long de l'axe transversal. Elle est l'opposé de la propriété justify-content, qui aligne les éléments le long de l'axe principal.

Les valeurs de align-items sont les suivantes :

• stretch (par défaut) — les éléments sont étirés pour remplir le conteneur.
• flex-start — les éléments sont empilés au début de l'axe transversal du conteneur.
• flex-end — les éléments sont empilés à la fin de l'axe transversal du conteneur.
• center — les éléments sont empilés au centre de l'axe transversal.
• baseline — les éléments sont alignés de sorte que leurs lignes de base soient alignées.

Exemple de la propriété align-items :

Propriété align-items, exemple de code

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        justify-content: space-between;
        align-items: center; /* Use another value to see the result */
        height: 250px;
        padding: 15px;
        background-color: #1faadb;
      }
      .flex-container > div {
        width: 15%;
        height: 100%;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .flex-container .one {
        height: 60%;
      }
      .flex-container .three {
        height: 40%;
      }
      .flex-container .four {
        height: 70%;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="four"></div>
    </div>
  </body>
</html>

Dans notre exemple, nous avons utilisé la valeur center pour centrer les éléments sur l'axe transversal. Essayez d'autres valeurs pour voir le résultat.

La propriété align-content

La propriété align-content est utilisée pour aligner les lignes d'un conteneur flex à l'intérieur du conteneur lorsqu'il reste de l'espace supplémentaire sur l'axe transversal, de la même façon que justify-content aligne les éléments individuels sur l'axe principal.

Les valeurs de align-content et leur signification sont les suivantes :

• stretch (par défaut) — les lignes s'étirent pour occuper l'espace disponible.
• flex-start — les lignes sont regroupées au début du conteneur.
• flex-end — les lignes sont regroupées à la fin du conteneur.
• center — les lignes sont regroupées au centre du conteneur.
• space-between — les lignes sont réparties uniformément ; la première ligne est au début du conteneur et la dernière est à la fin.
• space-around — les lignes sont réparties uniformément avec un espace égal autour de chaque ligne.

Exemple de la propriété align-content :

Exemple de la propriété align-content

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-end/* Use another value to see the result */;
        min-height: 250px;
        padding: 10px;
        background-color: #1faadb;
      }
      .flex-container>div {
        width: 45%;
        height: 45px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .flex-container .one,
      .flex-container .nine {
        width: 23%;
      }
      .flex-container .two,
      .flex-container .six {
        width: 9%;
      }
      .flex-container .three {
        width: 25%;
      }
      .flex-container .four {
        width: 35%;
      }
      .flex-container .five,
      .flex-container .eleven {
        width: 32%;
      }
      .flex-container .seven,
      .flex-container .ten {
        width: 6%;
      }
    </style>
  </head>
  <body>
    <p>flex-end</p>
    <div class="flex-container">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="four"></div>
      <div class="five"></div>
      <div class="six"></div>
      <div class="seven"></div>
      <div class="eight"></div>
      <div class="nine"></div>
      <div class="ten"></div>
      <div class="eleven"></div>
    </div>
  </body>
</html>

La propriété gap

La propriété gap définit l'espace entre les éléments flex (les gouttières), sans ajouter d'espace sur les bords extérieurs du conteneur. C'est une alternative plus propre à la définition de margin sur des éléments individuels, car elle ne crée jamais d'espace indésirable avant le premier élément ou après le dernier. Vous pouvez passer une seule valeur pour un espacement égal en ligne et en colonne, ou deux valeurs (row-gap column-gap).

Propriété gap, exemple de code

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 20px; /* row-gap column-gap */
        padding: 10px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 80px;
        height: 70px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

La propriété flex-flow

Il s'agit d'une propriété raccourcie pour les propriétés individuelles flex-direction et flex-wrap, qui définissent ensemble les axes principal et transversal du conteneur flex. La valeur par défaut est row nowrap.

Exemple de la propriété flex-flow :

Propriété flex-flow, exemple de code

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title> 
    <style>
      .flex-container {
        display: flex;
        flex-flow: row-reverse wrap; /* Use another value to see the result */
        padding: 30px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 30%;
        height: 70px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
        text-align: center;
        font-size: 28px;
        font-weight: 700;
        line-height: 70px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

Vous pouvez choisir une autre valeur pour voir comment la position des éléments change.

Propriétés des éléments flex

La propriété order

Par défaut, les éléments sont disposés dans l'ordre dans lequel ils apparaissent dans le code source (en commençant par le groupe ordinal le plus bas et en montant). Pour modifier l'ordre des éléments dans le conteneur flex, on utilise la propriété order.

La propriété order définit l'ordre des éléments flex en les affectant à des groupes ordinaux. Elle prend une valeur entière unique, qui définit le groupe ordinal auquel appartient l'élément flex. La valeur par défaut est 0.

Exemple de la propriété order :

Propriété order de Flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        flex-flow: row wrap;
        padding: 30px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 30%;
        height: 70px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
        text-align: center;
        font-size: 28px;
        font-weight: 700;
        line-height: 70px;
        color: #fff;
      }
      .item-one { 
        order: 1;
      }
      .item-four {
        order: -1;
      }
      .item-five { 
        order: 0;
      }
      .item-three { 
        order: 2;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="item-one">1</div>
      <div class="item-two">2</div>
      <div class="item-three">3</div>
      <div class="item-four">4</div>
      <div class="item-five">5</div>
    </div>
  </body>
</html>

La propriété align-self

Cette propriété est utilisée pour aligner individuellement les éléments à l'intérieur du conteneur flex. Les éléments flex sont alignés sur l'axe transversal de la ligne du conteneur flex (tout comme justify-content, mais dans la direction perpendiculaire). Lorsqu'elle est définie, la propriété align-self remplace l'alignement spécifié par align-items.

La propriété align-self possède les mêmes valeurs que align-items. Elles sont listées ci-dessous pour votre commodité.

• stretch (par défaut) — les éléments sont étirés pour remplir le conteneur.
• flex-start — les éléments sont empilés au début de l'axe transversal du conteneur.
• flex-end — les éléments sont empilés à la fin de l'axe transversal du conteneur.
• center — les éléments sont empilés au centre de l'axe transversal.
• baseline — les éléments sont alignés de sorte que leurs lignes de base soient alignées.

Exemple de la propriété align-self :

Exemple de la propriété align-self

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        justify-content: space-between;
        height: 300px;
        padding: 10px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 15%;
        height: 80%;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      div.item-two {
        width: 20%; 
      }
      div.item-three {
        align-self: flex-end;
        height: 80px; 
        margin: 0 10%;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="item-one"></div>
      <div class="item-two"></div>
      <div class="item-three"></div>
      <div class="item-four"></div>
    </div>
  </body>
</html>

La propriété flex-grow

La propriété flex-grow définit la capacité d'un élément à s'agrandir si nécessaire. Elle définit le facteur de croissance flex (relativement au reste des éléments dans un conteneur), qui spécifie l'espace que l'élément doit occuper dans le conteneur lors de la distribution de l'espace positif.

La propriété prend une valeur sans unité qui sert de proportion.

Si tous les éléments du conteneur ont la même valeur pour flex-grow (par exemple, 1), alors tous les éléments ont la même taille dans le conteneur.

Si la taille de l'un des éléments flex est différente (par exemple, 2), alors cet élément occupera deux fois plus d'espace par rapport à la taille des autres éléments (dont la taille est définie à 1).

Exemple de la propriété flex-grow :

Propriété flex-grow, exemple de code

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        margin-bottom: 20px;
      }
      .flex-container div {
        flex-grow: 0.2;
        padding: 30px 5px;
        margin-right: -2px;
        border: 2px solid #8ebf42;
      }
      .flex-container div.two {
        flex-grow: 5;
      }
      .flex-container span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        margin: auto;
        border-radius: 50%;
        background-color: #8ebf42;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div>
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div>
        <span>4</span>
      </div>
      <div><span>5</span>
      </div>
    </div>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div class="two">
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div>
        <span>4</span>
      </div>
      <div>
        <span>5</span>
      </div>
    </div>
  </body>
</html>

La propriété flex-shrink

La propriété flex-shrink permet à un élément flex de se rétrécir. Elle spécifie l'espace que l'élément doit occuper dans le conteneur lors de la distribution de l'espace négatif.

La propriété prend une valeur sans unité.

Par défaut, tous les éléments flex peuvent se rétrécir, mais si nous définissons la valeur à 0 (ne pas rétrécir), ils conserveront leur taille originale.

Exemple de la propriété flex-shrink :

Exemple de la propriété flex-shrink

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
      }
      .flex-container div {
        width: 120px;
        padding: 30px 10px;
        margin-right: -2px;
        border: 2px solid #8ebf42;
      }
      .flex-container div.two {
        flex-shrink: 0;
      }
      .flex-container span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        margin: auto;
        border-radius: 50%;
        background-color: #8ebf42;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div class="two">
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div>
        <span>4</span>
      </div>
      <div>
        <span>5</span>
      </div>
      <div>
        <span>6</span>
      </div>
    </div>
  </body>
</html>

La propriété flex-basis

La propriété flex-basis définit la taille initiale d'un élément flex, avant que l'espace restant ne soit distribué selon les facteurs flex. La propriété est spécifiée par le mot-clé content ou par une largeur.

Les valeurs de flex-basis sont les suivantes :

• auto (par défaut) — la longueur est égale à la longueur de l'élément flexible.
• width — une longueur absolue, ou un pourcentage de la propriété de taille principale du conteneur flex parent, ou le mot-clé auto. Les valeurs négatives sont invalides.
• content — détermine le dimensionnement automatique, basé sur le contenu de l'élément flex.
• initial — définit cette propriété à sa valeur par défaut.

Exemple de la propriété flex-basis :

Propriété flex-basis, exemple de code

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        background-color: #8ebf42;
      }
      .flex-container div {
        padding: 30px 10px;
        margin-right: -2px;
        border: 2px solid #8ebf42;
        background-color: #fff;
      }
      .flex-container div.four {
        flex-basis: 25%;
      }
      .flex-container span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        margin: auto;
        border-radius: 50%;
        background-color: #8ebf42;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div>
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div class="four">
        <span>4</span>
      </div>
      <div>
        <span>5</span>
      </div>
    </div>
  </body>
</html>

La propriété flex

La propriété flex est le raccourci pour flex-grow, flex-shrink et flex-basis réunis. flex-shrink et flex-basis sont facultatifs.

Parmi ses autres valeurs, cette propriété peut accepter auto (1 1 auto) ou none (0 0 auto).

Exemple de la propriété flex :

flex à la place de flex-shrink, exemple de code

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        height: 150px;
        padding: 10px;
        margin-bottom: 20px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 15%;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .second > div {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="flex-container second">
      <div></div>
      <div></div>
      <div></div>
    </div> 
  </body>
</html>

Exemples Flexbox

Voyons quelques exemples de CSS Flexbox et découvrons quels types de mises en page vous pouvez utiliser pour vos propres projets web.

Centrer des éléments verticalement et horizontalement

Centrer des éléments par tous les moyens disponibles en CSS a toujours été un problème. Avec l'avènement de Flexbox, ce problème est facilement résolu. Grâce aux propriétés align-items, align-self et justify-content, vous pouvez aligner des éléments à la fois verticalement et horizontalement.

Exemple des propriétés align-items, align-self et justify-content pour centrer des éléments verticalement et horizontalement :

Centrage d'éléments verticalement et horizontalement avec Flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 70px;
        height: 70px;
        margin: 5px;
        border-radius: 3px;
        background-color: #1faadb;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

Barre de navigation responsive avec recherche

Grâce à Flexbox, vous pouvez créer une barre de navigation avec les éléments de menu alignés à gauche et la barre de recherche alignée à droite (ou vice versa). La barre de navigation est responsive ; elle s'étend ou se réduit en fonction de la taille de l'écran.

Exemple de la barre de navigation responsive :

Exemple de barre de navigation avec Flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .main-nav {
        display: flex;
        padding: 15px;
        border-radius: 5px;
        background: #1c87c9;
        color: #fff;
        font-weight: 500;
      }
      .main-nav > ul {
        display: flex;
        flex: 2;
        padding: 0;
        margin: 0;
        list-style-type: none;
      }
      .main-nav li {
        margin-right: 20px;
      }
      .main-nav > form {
        display: flex;
        justify-content: flex-end;
        flex: 1;
      }
      .main-nav input {
        flex: 1;
        padding: 5px;
      }
      .main-nav button {
        padding: 0 20px;
        margin-left: 10px;
        border: 0;
        border-radius: 20px;
        background: #fff;
        color: #666;
      }
      @media screen and (max-width: 575px) {
        .main-nav {
          flex-direction: column;
        }
        .main-nav ul {
          margin-bottom: 10px;
        }
      }
    </style>
  </head>
  <body>
    <nav class="main-nav">
      <ul>
        <li>Home</li>
        <li>About us</li>
        <li>Services</li>
        <li>Contact us</li>
      </ul>
      <form>
        <input type="search" placeholder="Search" />
        <button type="button">Go</button>
      </form>
    </nav>
  </body>
</html>

La mise en page Holy Grail

Le motif de mise en page Holy Grail est très populaire sur le web. Il comprend un en-tête, un pied de page, une zone de contenu principale avec une navigation de largeur fixe à gauche, le contenu au milieu et une barre latérale de largeur fixe à droite.

Exemple de la mise en page Holy Grail :

Mise en page Holy Grail avec Flexbox, exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        box-sizing: border-box;
        font-size: 18px;
      }
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
      }
      .main {
        display: flex;
        flex: 1;
      }
      .main > article {
        flex: 1;
      }
      .main > nav,
      .main > aside {
        flex: 0 0 20vw;
        background: #d5dce8;
      }
      .main > nav {
        order: -1;
      }
      header,
      footer {
        background: #1c87c9;
        height: 15vh;
      }
      header,
      footer,
      article,
      nav,
      aside {
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <header>Header</header>
    <div class="main">
      <article>Article</article>
      <nav>Nav</nav>
      <aside>Aside</aside>
    </div>
    <footer>Footer</footer>
  </body>
</html>

Pratique