Le guide ultime de Flexbox

Aperçu ¶

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

Flexbox est une mise en page unidimensionnelle, ce qui signifie qu’elle dispose les éléments dans une seule dimension à la fois, soit en ligne, soit en colonne, mais pas les deux à la fois. On peut l’opposer au modèle bidimensionnel — CSS Grid Layout, qui dispose les éléments dans deux dimensions simultanément (lignes et colonnes ensemble).

Flexbox a été introduit comme alternative aux flottants CSS pour définir l’apparence générale d’une page web. Flexbox offre de nombreux avantages ; en particulier, elle permet 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 (de gauche à droite) ou inversé (de 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 conservant la taille de l’axe secondaire transversal.
• peuvent être organisés linéairement le long de l’axe principal ou renvoyés sur plusieurs lignes le long ou à travers l’axe transversal.

Flexbox est relativement récent, mais il bénéficie aujourd’hui d’un excellent support des navigateurs.

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

Notions de base de Flexbox ¶

Lorsque vous travaillez avec Flexbox, vous devez penser 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 sur un seul axe ; elle comporte 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 possède les valeurs suivantes :

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

Si la propriété flex-direction est spécifiée avec les valeurs row ou row-reverse, alors votre axe principal sera horizontal, c’est-à-dire qu’il suivra la ligne dans la direction en ligne. Et l’axe transversal suivra les colonnes.

Si la propriété flex-direction est spécifiée avec les valeurs column ou column-reverse, alors l’axe principal sera vertical, c’est-à-dire qu’il ira du haut de la page vers le bas dans la direction de bloc. Quant à l’axe transversal, il suivra les lignes.

Regardez cette figure pour mieux comprendre le concept derrière les axes de Flexbox.

• main axis - L’axe principal d’un conteneur flex est l’axe principal 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 - La largeur ou la hauteur d’un élément flex dans la dimension principale correspond à sa taille principale.
• cross axis - L’axe perpendiculaire à l’axe principal, dont la direction dépend de celle 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 partant du côté cross-start du conteneur flex et en allant vers le côté cross-end.
• cross size - La largeur ou la hauteur d’un élément flex dans la dimension transversale correspond à sa taille transversale.

Source : W3.org

Conteneurs flex et éléments flex ¶

Un conteneur flex est un élément parent qui regroupe plusieurs é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 ; toutefois, 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 les valeurs 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 ligne et en colonne. Elle spécifie la direction de l’axe principal du conteneur flex et définit l’ordre d’apparition des éléments.

La propriété flex-direction possède 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>

Try it Yourself »

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 voir comment l’apparence des éléments change.

INFO

Remarque : row et row-reverse dépendent du mode d’écriture, donc dans un contexte rtl (de droite à gauche), ils seront inversés respectivement.

La propriété flex-wrap ¶

Par défaut, tous les éléments flex tiennent sur une seule ligne, et s’ils sont trop larges pour le conteneur, ils le dépasseront. Pour éviter cela, vous devez utiliser la propriété flex-wrap pour renvoyer 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.

INFO

Remarque : la propriété dépend du mode d’écriture, donc dans un contexte rtl (de droite à gauche), elle sera inversée respectivement.

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 aide à répartir l’espace libre restant 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 (avec de l’espace entre eux) sur la ligne ; le premier élément se trouve sur la ligne de départ, le dernier sur la ligne d’arrivée.
• space-around - les éléments sont affichés avec de l’espace avant, entre et après.
• space-evenly - les éléments sont répartis de sorte que l’espacement entre deux éléments quelconques (et 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>

Try it Yourself »

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. C’est l’inverse 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 alignés au début transversal du conteneur.
• flex-end- les éléments sont alignés à la fin transversale du conteneur.
• center- les éléments sont alignés au centre de l’axe transversal.
• baseline - les éléments sont alignés de sorte que leurs lignes de base coïncident.

INFO

Remarque : si la hauteur du conteneur flex est contrainte, la valeur stretch peut provoquer un débordement du contenu de l’élément flex.

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>

Try it Yourself »

Dans notre exemple, nous avons utilisé la valeur center pour centrer les éléments sur l’axe transversal. Essayez d’autres valeurs et voyez 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 y a un espace supplémentaire sur l’axe transversal, tout comme justify-content aligne les éléments individuels sur l’axe principal.

INFO

Remarque : la propriété d’alignement ne fonctionne pas lorsqu’il n’y a qu’une seule ligne dans le conteneur flex.

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 se trouve au début du conteneur tandis que la dernière se trouve à 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>

Try it Yourself »

La propriété gap

La propriété gap est utilisée pour définir l’espace entre les éléments flex.

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.

INFO

Remarque : les directions de flex-flow sont sensibles au mode d’écriture, donc dans un contexte rtl (de droite à gauche), le contenu sera inversé respectivement.

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>

Try it Yourself »

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 petit et en remontant). 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 assignant à des groupes ordinaux. Elle prend une seule valeur entière, 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 :

ordre de la propriété flexbox order

<!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>

Try it Yourself »

La propriété align-self ¶

La 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.

INFO

Remarque : si l’une des marges de l’axe transversal de l’élément est définie sur auto, alors align-self est ignorée.

La propriété align-self a 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 alignés au début transversal du conteneur.
• flex-end- les éléments sont alignés à la fin transversale du conteneur.
• center - les éléments sont alignés au centre de l’axe transversal.
• baseline - les éléments sont alignés de sorte que leurs lignes de base coïncident.

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>

Try it Yourself »

La propriété flex-grow ¶

La propriété flex-grow définit la capacité d’un élément à grandir si nécessaire. Elle définit le facteur de croissance flex (par rapport aux autres éléments du conteneur), qui précise l’espace que l’élément doit occuper dans le conteneur lors de la répartition de l’espace positif.

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

INFO

Remarque : la valeur ne peut pas être un nombre négatif.

Si tous les éléments du conteneur ont la même valeur de 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>

Try it Yourself »

TIP

Nous recommandons d’utiliser la propriété raccourcie flex plutôt que flex-grow pour contrôler la flexibilité, car elle réinitialise correctement tous les composants non spécifiés afin de s’adapter aux usages courants.

La propriété flex-shrink ¶

La propriété flex-shrink est définie pour permettre à un élément flex de se rétrécir. Elle précise l’espace que l’élément doit occuper dans le conteneur lorsque de l’espace négatif est réparti.

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

INFO

Remarque : la valeur ne peut pas être un nombre négatif.

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

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>

Try it Yourself »

TIP

Nous recommandons d’utiliser la propriété raccourcie flex plutôt que flex-shrink pour contrôler la flexibilité, car elle réinitialise correctement tous les composants non spécifiés afin de s’adapter aux usages courants.

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 réparti selon les facteurs flex. La propriété est spécifiée par le mot-clé content ou width.

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 ne sont pas valides.
• content - détermine un dimensionnement automatique, basé sur le contenu de l’élément flex.
• initial - définit cette propriété à sa valeur par défaut.

INFO

Remarque : la propriété content n’est pas encore bien prise en charge, il n’est donc pas facile de comprendre ce que font ses proches max-content, min-content et fit-content.

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>

Try it Yourself »

La propriété flex ¶

La propriété flex est la forme raccourcie de flex-grow, flex-shrink et flex-basis réunies. flex-shrink et flex-basis sont facultatives.

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

TIP

Nous recommandons fortement d’utiliser la propriété raccourcie flex plutôt que les propriétés individuelles.

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>

Try it Yourself »

INFO

Remarque : les propriétés CSS float, clear et vertical-align n’ont aucun effet sur les éléments flex.

Exemples de Flexbox ¶

Jetons un coup d’œil à quelques exemples de flexbox CSS et voyons quels types de mises en page vous pouvez utiliser pour vos propres projets web.

Centrage vertical et horizontal des éléments

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

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

Centrage vertical et horizontal 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 ¶

En utilisant Flexbox, vous pouvez créer une barre de navigation avec des éléments de menu alignés à gauche et la barre de recherche alignée à droite (ou inversement). La barre de navigation est responsive ; elle s’étend ou se replie selon 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 modèle de mise en page Holy Grail est très populaire sur le web. Il comprend un en-tête, un pied de page, la zone de contenu principal avec une navigation à largeur fixe à gauche, le contenu au centre et une barre latérale à 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

Lesquelles des propriétés suivantes sont des propriétés de Flexbox en CSS ?

flex-directionflex-wrapdisplay-inlinejustify-contentalign-contenttext-align