Le guide ultime de Flexbox

1. La vue d’ensemble de Flexbox

2.Les Bases de Flexbox

L’axe principal et l’axe transversal

Conteneurs Flex et Objets

3. Les propriétés de Conteneur Flex

flex-direction

flex-wrap

justify-content

align-items

align-content

flex-flow

5. Les exemples de Flexbox

Centrer des éléments verticalement et horizontalement

Barre de Navigation réactive avec recherche

The Holy Grail Layout (La disposition du Saint Graal)

6. Autres ressources

La vue d’ensemble

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

La mise en page Flexbox est une mise en page à une seule dimension, ce qui signifie qu’elle dépose des éléments dans une dimension à la fois, soit en tant que ligne ou colonne, mais pas les deux ensembles. Cela peut être opposé au modèle à deux dimensions - CSS Grid Layout, qui place les éléments en deux dimensions simultanément (lignes et colonnes ensemble).

Flexbox a été introduit comme alternative à CSS Floats pour définir l’apparence générale d’une page Web. Flexbox a beaucoup d’avantages. En particulier, on peut contrôler l’alignement, la direction, l’ordre et la taille des objets.

Les objets dans le conteneur Flex:

• peuvent être organisés dans toutes les directions (à gauche, à droit, en bas ou même en 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 définis pour réduire ou agrandir dynamiquement le long de l’axe principal, tout en préservant la taille de l’axe transversal secondaire.
• peuvent être organisés linéairement le long de l’axe principal ou enroulés en plusieurs lignes le long ou en travers de l’axe transversal.

Flexbox est relativement nouvelle, mais elle bénéficie d'une excellente prise en charge du navigateur aujourd'hui (près de 83% des navigateurs le prennent en charge).

(En savoir plus sur la prise en charge et la compatibilité du navigateur).

Les Bases de Flexbox

Lorsque vous travaillez avec Flexbox, vous devez penser en deux axes — l’axe principal et l’axe transversal, et différencier les conteneurs flex et les éléments flex.

L’axe principal et l’axe transversal

Flexbox est orientée sur un seul axe, elle a un axe principal et un axe transversal. Cela signifie que les objets sont disposés sur l’axe principal ou sur l’axe transversal. L’axe transversal est toujours perpendiculaire au principal.

L’axe principal est défini par le propriété flex-direction, qui a 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", votre axe principal sera horizontal, c’est-à-dire qu’il s’exécutera le long de la ligne dans la direction en ligne. Et l’axe transversal descendra les colonnes.

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

Regardez cette figure pour mieux comprendre le concept de l'axe Flexbox.

• main axis- L'axe principal d'un conteneur flex (flex container) est l'axe principal le long duquel les éléments flex (flex items) sont disposés.
• main-start | main-end - Les éléments flex sont placés dedans le conteneur à partir de main-start et de main-end.
• main size - La largeur ou la hauteur des éléments flex, quelle que soit la dimension principale, est la taille principal de l'élément.
• cross axis - Cet axe est perpendiculaire à l’axe principal. Sa direction dépend de la direction de l'axe principal (horizontale ou verticale).
• cross-start | cross-end - Les lignes flex sont remplies d'objets et placées dans le conteneur en commençant par le cross-start croisé du conteneur de flex et en allant vers le cross-end.
• cross size - La largeur ou la hauteur de l'élément flex, quelle que soit la dimension en croix, correspond à la taille de l’élément.

Les conteneurs et les éléments flex

Le conteneur flex est un élément parent, qui regroupe un tas d'éléments d'enfants, les éléments flex. Dans la plupart des cas, le conteneur définit la disposition 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 les valeurs "flex" (zone de conteneur flexible au niveau des blocs) ou "inline-flex" (définissant la zone de conteneur flexible au niveau intégré). Sinon, le navigateur ignore toutes les propriétés Flexbox que vous avez utilisées.

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

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;	/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER */
display: -webkit-flex; 	/* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+

Les propriétés de conteneurs flex

La propriété flex-direction

La propriété flex-direction est utilisée pour créer des dispositions de lignes et de colonnes. Elle spécifie les directions de l’axe principal du conteneur flex et définit l’ordre dans lequel les éléments apparaissent.

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

• "row" -les éléments sont affichés le long de la rangée de gauche à droite.
• "row-reverse" -les éléments sont affichés de droite à gauche.
• "column" -les éléments sont affichés verticalement du haut jusqu'en bas.
• "column-reverse" - les éléments sont affichés verticalement du bas jusqu’en haut.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
      display: flex;
      flex-direction: row-reverse;
      background-color: #1c87c9;
      }
      .flex-container > div {
      width: 120px;
      padding: 5px 0;
      margin: 5px;
      background-color: lightgrey;
      text-align: center;
      font-size: 35px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

La propriété flex-wrap

Par défaut, tous les éléments flex tiennent sur une seule ligne et, si les éléments flex sont trop larges pour le conteneur, ils débordent. Pour éviter cela, utilisez la propriété flex-wrap pour envelopper les éléments.

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 correspondent à la largeur du conteneur.
• "wrap" -les éléments flex sont affichées en plusieurs rangées si nécessaire de gauche à droite et de haut en bas.
• "wrap-reverse" - les éléments flex sont affichés en plusieurs rangées 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 horizontale des éléments le long de l’axe principal.

Il aide à répartir l'espace libre entre les éléments flexibles sur l'axe principal.

Les valeurs pour justify-content sont les suivantes:

• "flex-start" (valeur par défaut) – les éléments sont placés au début du conteneur.
• "flex-end" – les éléments sont placés à la fin du conteneur.
• "center"– les éléments sont placés au cantre du conteneur.
• "space-between" - les éléments sont uniformément (avec un espace entre eux) répartis dans la ligne; Le premier élément est sur la ligne de départ, le dernier élément sur la ligne de fin.
• "space-around"– les éléments sont affichés avec un espace avant, entre et après.
• "space-evenly" - les éléments sont distribués de sorte que l'espacement entre deux éléments (et l'espace aux bords) soit égal.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
      display: flex;
      justify-content: space-around;
      background-color: #1c87c9;
      }
      .flex-container > div {
      width: 120px;
      padding: 5px 0;
      margin: 5px;
      background-color: lightgrey;
      text-align: center;
      font-size: 35px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Résultat

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 l’axe transversal. C'est juste l'inverse de la propriété justify-content , qui aligne les éléments le long de l'axe principal.

Les valeurs pour 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 du conteneur (cross start).
• "flex-end"- les éléments sont empilés au centre de l’axe transversal.
• "center"- les éléments sont empilés au centre de l’axe transversal.
• "baseline" – les éléments sont alignés tout comme leurs lignes de base sont alignées.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
      display: flex;
      align-items: center; /* Utiliser une autre valeur pour voir le résultat */
      height: 300px;
      background-color: #1c87c9;
      }
      .flex-container > div {
      width: 25%;
      padding: 5px 0;
      margin: 5px;
      background-color: lightgrey;
      text-align: center;
      font-size: 35px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Résultat

Dans notre exemple, nous avons utilisée la valeur "center" pour centrer les éléments dans l’axe transversal. Essayez les autres valeurs et voyez votre résultat.

La propriété align-content

La propriété align-content est utilisée pour aligner les lignes du conteneur flex dans le conteneur lorsqu’il y a un espace supplémentaire dans l’axe transversal, tout comme la propriété justify-content aligne les éléments individuels dans l’axe principal.

Les valeurs pour align-content et ses définitions 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 placées à la fin du conteneur.
• "center" - les lignes sont emballées au centre du conteneur.
• "space-between" – les lignes sont uniformément répartis; la première ligne est au début du conteneur tandis que la dernière est à la fin.
• "space-around" - les lignes sont réparties uniformément avec un espace égal autour de chaque ligne.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
      display: flex;
      flex-wrap: wrap;
      align-content: space-between /* Utilisez une autre valeur pour voir le résultat */;
      min-height: 300px;
      background-color: #1c87c9;
      }
      .flex-container > div {
      width: 120px;
      padding: 5px 0;
      margin: 8px;
      background-color: lightgrey;
      text-align: center;
      font-size: 35px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
  </body>
</html>

Résultat

La propriété flex-flow

Il s’agit d’une propriété raccourcie pour les propriétés individuelles de 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

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
      display: flex;
      flex-flow: column-reverse wrap; /* Utilisez une autre valeur pour voir le résultat */
      background-color: #1c87c9;
      }
      .flex-container > div {
      width: 120px;
      padding: 5px 0;
      margin: 5px;
      background-color: lightgrey;
      text-align: center;
      font-size: 35px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

Résultat

Vous pouvez sélecter des autres valeurs pour voir comment la position des éléments change.

Les propriétés de l'élément 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 partant du groupe ordinal numéroté le plus bas et en remontant). Pour modifier l'ordre des objets dans le conteneur flex, la propriété order est utilisée.

La propriété order définit l'ordre des éléments flex en les affectant à des groupes ordinaux. Il 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

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main {
      display: flex;
      width: 90%;
      height: 150px;
      background: #c3c3c3;
      }
      .main div { width: 20%; height: 90px; }
      div.item-blue { order: 2; }
      div.item-yellow { order: 4; }
      div.item-red { order: 3; }
      div.item-green { order: 1; }
      /* Changez les nombres pour voir comment les éléments sont enregistrés*/
    </style>
  </head>
  <body>
    <h1>La propriété order</h1>
    <div class="main">
      <div style="background-color:#1c87c9;" class="item-blue"></div>
      <div style="background-color:yellow;" class="item-yellow"></div>
      <div style="background-color:red;" class="item-red"></div>
      <div style="background-color:#8ebf42;" class="item-green"></div>
    </div>
  </body>
</html>

La propriété align-self

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

La propriété align-self a les mêmes valeurs que align-items. Ils sont énumérés 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 (cross start) du conteneur.
• "flex-end"- les éléments sont empilés jusqu’à l’extrémité transversale (cross end) du conteneur.
• "center" – les éléments sont empilés au centre de l’axe transversal.
• "baseline" – les éléments sont alignés comme leurs lignes de base sont alignées.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main {
      display: flex;
      align-items: flex-start;
      width: 80%;
      height: 300px;
      padding: 5px;
      background: #1c87c9;
      }
      .main div {
      flex: 1;
      padding: 15px 0;
      background: lightgray;
      text-align: center;
      font-size: 28px;
      color: #666666;
      }
      .two {
      align-self: center;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div>1</div>
      <div class="two">2</div>
      <div>3</div>
    </div>
  </body>
</html>

Résultat

La propriété flex-grow

La propriété flex-grow définit la capacité d'un élément à croître si nécessaire. Il définit le facteur de croissance flex (relativement au reste des objets dans le conteneur), qui spécifie l'espace que l'élément doit occuper dans le conteneur lors de la distribution d'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), 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), cet élément occupera deux fois plus d'espace par rapport à la taille d'autres éléments (dont la taille est définie sur 1).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main {
      display: flex;
      width: 90%;
      height: 150px;
      background: #c3c3c3;
      }
      .main div { width: 15%; height: 50px; }
      div.item-blue { flex-grow: 2; }
      div.item-yellow { flex-grow: 1; }
      div.item-red { flex-grow: 4; }
      div.item-green { flex-grow: 1; }
      /* Changez les chiffres pour voir comment les éléments grandissent */
    </style>
  </head>
  <body>
    <h1>La propriété flex-grow</h1>
    <div class="main">
      <div style="background-color:#1c87c9;" class="item-blue"></div>
      <div style="background-color:yellow;" class="item-yellow"></div>
      <div style="background-color:red;" class="item-red"></div>
      <div style="background-color:#8ebf42;" class="item-green"></div>
    </div>
  </body>
</html>

La propriété flex-shrink

La propriété flex-shrink est définie pour permettre à un élément flex de rétrécir. Il spécifie l'espace que l'élément doit prendre dans le conteneur lorsque l'espace négatif est distribué.

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

Par défaut, tous les éléments flex peuvent être réduits, mais si nous définissons la valeur sur 0 (ne pas réduire), ils conserveront la taille d'origine.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main {
      display: flex;
      height: 150px;
      background: #c3c3c3;
      }
      .main div { width: 10%; height: 50px; }
      div.item-blue { flex-grow: 1; }
      div.item-yellow { flex-grow: 1; }
      div.item-red { flex-shrink: 3; }
      div.item-green { flex-grow: 1; }
      /* Changez les nombres pour voir comment les articles se réduisent */
    </style>
  </head>
  <body>
    <h1>La propriété flex-grow</h1>
    <div class="main">
      <div style="background-color:#1c87c9;" class="item-blue"></div>
      <div style="background-color:yellow;" class="item-yellow"></div>
      <div style="background-color:red;" class="item-red"></div>
      <div style="background-color:#8ebf42;" class="item-green"></div>
    </div>
  </body>
</html>

La propriété flex-basis

La propriété flex-basis définit la taille initiale d'un article flexible, avant que l'espace restant ne soit distribué en fonction des facteurs de flexibilité. 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 du mot-clé "auto". Les valeurs négatives ne sont pas valides.
• "content" - détermine le dimensionnement automatique en fonction du contenu de l’objet flexible.
• "initial" - définit cette propriété sur sa valeur par défaut.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main {
      display: flex;
      height: 100px;
      border: 1px solid #c3c3c3;
      }
      .main div { flex-grow: 0; flex-shrink: 0; flex-basis: 40px; }
      .main div:nth-of-type(2) { flex-basis: 80px; }
      .main div:nth-of-type(4) { flex-basis: 60px; }
    </style>
  </head>
  <body>
    <h1>La propriété flex-basis</h1>
    <p>Définissez la longueur initiale des éléments flexibles à 40 pixels, avec une exception; définissez la longueur initiale du deuxième élément flexible à:</p>
    <div class="main">
      <div style="background-color:red;">40px</div>
      <div style="background-color:#1c87c9;">80px</div>
      <div style="background-color:yellow;">40px</div>
      <div style="background-color:#8ebf42;">60px</div>
      <div style="background-color:lightgrey;">40px</div>
    </div>
  </body>
</html>

La propriété flex

La propriété flex est la propriété raccourcie pour flex-grow,flex-shrink et flex-basis. Le flex-shrink et la flex-shrink sont facultatives.

Entre autres valeurs, cette propriété peut accepter automatiquement (1 1 auto) ou aucune (0 0 auto).

Exemple

<!DOCTYPE html>
<html>
  <head>
	<style>
  	.main {
  	display: flex;
  	width: 280px;
  	height: 300px;
  	border: 1px solid black;
  	}
  	.main div {
  	flex: 1;
  	}
	</style>
  </head>
  <body>
	<h1>La propriété flex</h1>
	<div class="main">
      <div style="background-color:red;">RED</div>
      <div style="background-color:#1c87c9;">BLUE</div>
      <div style="background-color:#8ebf42;">Green div with more content.</div>
	</div>
  </body>
</html>

Exemples de Flexbox

Examinons quelques exemples de flexbox CSS et voyons quel type de disposition vous pouvez utiliser pour vos propres projets Web.

Centerer les Eléments Verticalement et Horizontalement

Le centrage des éléments par tous les moyens disponibles en CSS a toujours posé 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 verticalement ou horizontalement.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 300px;
      border: 2px solid #666666;
      } 
      .flex-item {
      padding: 20px;
      margin: 5px;
      background: #8ebf42;
      color: white;
      font-weight: bold;
      font-size: 3em;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">1</div>
      <div class="flex-item">2</div>
      <div class="flex-item">3</div>
      <div class="flex-item">4</div>
    </div>
  </body>
</html>

Barre de Navigation réactive avec recherche

En utilisant 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 réactive, elle s’étend ou se réduit en fonction de la taille de l’écran.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main-nav {
      display: flex;
      padding: 1em;
      border-radius: 5px;
      background: #1c87c9;
      color: white;
      }
      .main-nav > ul {
      display: flex;
      flex: 2;
      padding: 0;
      margin: 0;
      list-style-type: none;
      }
      .main-nav li { margin-right: 1em; }
      .main-nav > form {
      display: flex;
      justify-content: flex-end;
      flex: 1;
      }
      .main-nav input { flex: 1; }
      .main-nav button {
      padding: 0 1em;
      margin-left: .3em;
      border: 0;
      border-radius: 1em;
      background: white;
      color: #666666;
      }
      @media screen and (max-width: 575px) {
      .main-nav { flex-direction: column; }
      .main-nav ul { margin-bottom: 1em; }
      }
    </style>
  <body>
    <nav class="main-nav">
      <ul>
        <li>Accueil</li>
        <li>A propos</li>
        <li>Services</li>
        <li>Contactez-nous</li>
      </ul>
      <form>
        <input type="search" placeholder="Search">
        <button>Go</button>
      </form>
    </nav>
  </body>
</html>

The Holy Grail Layout (La disposition Saint Graal)

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <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: 1em; }
    </style>
  <body>
    <header>Titre</header>
    <div class="main">
      <article>Article</article>
      <nav>Nav</nav>
      <aside>Aside</aside>
    </div>
    <footer>Footer</footer>
  </body>
</html>