Utiliser les boîtes flexibles pour les applications web

Les boîtes flexibles permettent de concevoir des dispositions qui s'appliquent mieux à des environnements mobiles et de bureau et qui peuvent servir aux applications web. Fini d'utiliser des éléments <div> flottants, le positionnement absolu et des bidouilles JavaScript. Quelques lignes CSS permettent de construire des dispositions verticales et horizontales, flexibles. Voici quelques exemples de cas d'utilisation :

• Centrer un élément au milieu d'une page
• Définir des conteneurs qui s'organisent verticalement, l'un après l'autre
• Créer une ligne de boutons ou d'autres éléments qui se condensent verticalement sur les écrans de petite taille.

Cet article ne couvre que l'utilisation des propriétés relatives aux boîtes flexibles non préfixées et standard. Pour plus d'informations sur les préfixes et les anciens navigateurs, se référer au guide plus générique sur la manipulation des boîtes flexibles en CSS.

Les bases

Pour qu'un élément flotte dans une boîte flexible, on peut utiliser la propriété display avec la valeur flex puis définir flex-flow avec la valeur row (si on souhaite que les éléments s'organisent horizontalement) ou avec la valeur column (si on souhaite que les éléments s'empilent verticalement). Si on veut avoir une boîte flexible horizontale et que les éléments « passent à la ligne » verticalement, on pourra définir la propriété wrap.

Ensuite, pour chaque élément qui s'inscrit dans le conteneur flexible, on pourra définir la propriété flex. Généralement, on utilisera les valeurs suivantes :

• Si on veut qu'un élément n'occupe que la place qui lui est allouée (ex. un bouton), on pourra utiliser flex: none that expands to 0 0 auto.
• Si on veut définir la taille explicite d'un élément, on pourra utiliser flex: 0 0 taille. Par exemple : flex 0 0 60px.
• Si on veut qu'un élément occupe tout l'espace disponible de façon équitable avec ses voisins, on pourra utiliser flex: auto. It expands to 1 1 auto.

Il existe bien entendu d'autres possibilités en dehors de cas d'usage simples. Voici quelques exemples d'application.

Centrer un élément

Pour ce cas, le plus simple consiste à créer deux boîtes flexibles, l'une dans l'autre. Chaque boîte flexible aura trois élément, deux autour de l'élément centré ainsi que l'élément en question.

CSS

.vertical-box {
  display: flex;
  height: 400px;
  width: 400px;
  flex-flow: column;
}
.horizontal-box {
  display: flex;
  flex-flow: row;
}
.spacer {
  flex: auto;
  background-color: black;
}
.centered-element {
  flex: none;
  background-color: white;
}

HTML

<div class="vertical-box">
  <div class="spacer"></div>
  <div class="centered-element horizontal-box">
    <div class="spacer"></div>
    <div class="centered-element">Centered content</div>
     <div class="spacer"></div>
  </div>
  <div class="spacer"></div>
</div>

Resultat

Répartir des conteneurs verticalement

Prenons une page qui se compose d'un en-tête, d'une zone de contenu et d'un pied de page. On souhaite que l'en-tête et le pied de page aient la même taille mais que le contenu s'adapte selon l'espace disponible. Pour cela, on peut utiliser la propriété flex avec la valeur auto pour le contenu et la valeur none pour l'en-tête et le pied de page.

CSS

.vertical-box {
  display: flex;
  height: 400px;
  width: 400px;
  flex-flow: column;
}
.fixed-size {
  flex: none;
  height: 30px;
  background-color: black;
  text-align: center;
}
.flexible-size {
  flex: auto;
  background-color: white;
}

HTML

<div id="document" class="vertical-box">
  <div class="fixed-size"><button id="increase-size">Augmenter la taille du conteneur</button></div>
  <div id="flexible-content" class="flexible-size"></div>
  <div class="fixed-size"><button id="decrease-size">Réduire la taille du conteneur</button></div>
</div>

JavaScript

var height = 400;
document.getElementById('increase-size').onclick=function() {
  height += 10;
  if (height > 500) height = 500; 
  document.getElementById('document').style.height = (height + "px");
}

document.getElementById('decrease-size').onclick=function() {
  height -= 10;
  if (height < 300) height = 300; 
  document.getElementById('document').style.height = (height + "px");
}

Résultat

Créer un conteneur horizontal qui se replie

Dans certains cas, on veut pouvoir afficher des informations horizontalement lorsque l'écran le permet et les replier horizontalement lorsque la taille est trop réduire. On peut obtenir cet effet simplement avec les boîtes flexibles en utilisant la valeur wrap sur la propriété flex-flow.

CSS

.horizontal-container {
  display: flex;
  width: 300px;
  flex-flow: row wrap;
}
.fixed-size {
  flex: none;
  width: 100px;
  background-color: black;
  color: white;
  text-align: center;
}

HTML

<div id="container" class="horizontal-container">
  <div class="fixed-size">Élément 1</div>
  <div class="fixed-size">Élément 2</div>
  <div class="fixed-size">Élément 3</div>
</div>
<button id="increase-size">Augmenter la taille du conteneur</button>
<button id="decrease-size">Réduire la taille du conteneur</button>

JavaScript

var width = 300;

document.getElementById('increase-size').onclick=function() {
  width += 100;
  if (width > 300) width = 300; 
  document.getElementById('container').style.width = (width + "px");
}

document.getElementById('decrease-size').onclick=function() {
  width -= 100;
  if (width < 100) width = 100; 
  document.getElementById('container').style.width = (width + "px");
}

Résultat

Voir aussi

• Manipuler les boîtes flexibles