Tom Marx

Simplifiez le design web avec Flexbox

Le 27/12/2018 par Tom Marx

Simplifiez le design web avec Flexbox

Temps de lecture : environ 15 minutes

Depuis CSS3, les développeurs web peuvent utiliser la propriété 'Flexbox' dans leur CSS. Aujourd'hui, selon le site Can I Use ?, 95,5% des navigateurs supportent Flexbox. Ce module, couplé avec les grilles CSS, dont nous verrons l'utilité dans un prochain article, parraît tellement simple d'utilisation qu'on imagine difficilement qu'il ne devienne pas la norme d'ici quelques années dans la création de layouts web.

Comprendre Flexbox

Si vous comprenez Flexbox à la perfection, vous serez capables de concrétiser vos idées et maquettes de design web très facilement.
Pour rappel, en CSS, un container est un élément qui contient d'autres éléments, dits enfants.
Avec Flexbox, le container va aligner tous les éléments dans une seule direction, pour former une rangée ou une colonne selon l'orientation du container. L'orientation de Flexbox peut être contrôlée via la propriété 'flex-direction'.

Un container flexbox horizontal

Ici le container est orienté horizontalement, grâce à la propriété 'flex-direction: row;'


Un container flexbox vertical

Ici le container est orienté verticalement, grâce à la propriété 'flex-direction: column;'

Sur l'image ci-dessus, on voit en fond gris le container, et 3 enfants à l'intérieur. Voici la structure HTML :

<div id="container">
  <div class="child">
    <span>Un premier enfant</span>
  </div>

  <div class="child">
    <span>Un second enfant</span>
  </div>

  <div class="child">
    <span>Un troisième enfant</span>
  </div>
</div>

Et en CSS :

  #container {
  background-color: #adadad;
  padding: 10px;
  display: flex;
  /* Pour un alignement horizontal */
  flex-direction: row;
  /* Pour un alignement vertical */
  flex-direction: column;
}

Pour résumer, 'display: flex' s'applique sur l'élément contenant, et va aligner tous les enfants de cet élément dans une seule direction.

L'alignement horizontal

Un container Flexbox permet d'aligner les éléments sur le plan horizontal et vertical de plusieurs manières différentes. Pour définir l'orientation horizontale, on utilise la propriété 'justify-content' sur le container pour définir les marges et la position des enfants.

La propriété justify-content: center;

Au centre, avec justify-content: center;


La propriété justify-content: center;

Au début du container, avec justify-content: flex-start;


La propriété justify-content: center;

A la fin du container, avec justify-content: flex-end;


La propriété justify-content: center;

En maximisant les marges au centre, avec justify-content: space-between;


La propriété justify-content: center;

En maximisant les marges sur les côtés, avec justify-content: space-around;


La propriété justify-content: center;

En ayant des marges égales entre les bords et les éléments, avec justify-content: space-evenly;

L'alignement vertical

Flexbox permet également de gérer l'alignement vertical, grâce à la propriété 'align-items'. Il devient enfin facile de centrer verticalement des éléments de tailles variables en CSS :

La propriété justify-content: center;

'align-items: center' centre les éléments


La propriété justify-content: center;

'align-items: flex-start' colle les éléments en haut du container


La propriété justify-content: center;

'align-items: flex-end' colle les éléments en bas du container


La propriété justify-content: center;

'align-items: flex-stretch' aligne la hauteur des éléments sur la hauteur du plus grand élément


Les propriétés enfants

Les enfants d'un container Flexbox peuvent également avoir des propriétés.

La force de Flexbox

La principale force de Flexbox, c'est de découper un layout complexe en lignes d'éléments simples à manipuler. Il facilite la gestion des espaces et des alignements, notamment verticaux. On peut s'amuser à découper des maquettes en différents containers Flexbox, comme avec ce blog :

Le header du blog découpé en layouts Flexbox

Le header peut facilement être recréé grâce à deux containers Flexbox. Les deux sont orientés horizontalement. Le premier, celui qui structure le header maximise les marges au centre, donc il possède la propriété 'justify-content: space-between'. Tous deux centrent leurs éléments verticalement, ils ont donc la propriété 'align-items: center'.

<header>
  <h2>Tom Marx</h2>
  <img src="..." alt="..." />
  <div id="main_menu">
    <a href="...">Blog</a>
    <a href="...">Mon CV</a>
    <a href="...">Contact</a>
  </div>
</header>

<style>
  header {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  #main_menu {
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
</style>
Un article du blog découpé en layouts Flexbox

Pour le corps du site, on voit que la page est découpée en deux, avec l'article qui prend environ 2/3 de la largeur, l'aside environ 1/3. L'aside est une suite d'éléments alignés verticalement, on peut également utiliser Flexbox pour contrôler les marges et les espaces.

<div id="post_page">

  <!-- Article, 2/3 de la largeur -->
  <div id="article">
    <h1>...</h1>
    <span class="post_infos">...</span>
    <div id="post_header">
      <img src="..." alt="..." />
      <ul class="summary">
        ...
      </ul>
    </div>
  </div>

  <!-- Aside, 1/3 de la largeur -->
  <aside>
    <div class="categories">
      ...
    </div>
    <div class="last_posts">
      ...
    </div>
  </aside>

</div>

<style>
  #post_page {
    width: 100%;
    display: flex;
    flex-direction: row;
  }
  #article {
    flex: 3;
  }
  aside {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
</style>

Flexbox permet de facilement construire vos pages web. De plus, avec les medias queries, il est facile de rendre vos pages responsives. On peut imaginer par exemple que sur mobile vous changiez simplement l'orientation du container pour aligner vos éléments verticalement. Ce module permet enfin de centrer verticalement des éléments de hauteur variable sans se prendre la tête.