Redécouvrez la mise en page avec Flexbox

flexbox est un nouvel ensemble de propriétés CSS qui nous permet de gérer simplement la mise en page d'une série d'éléments au sein d'un élément parent et plus précisément de :

• mettre en place plusieurs éléments sur une ligne sans avoir à se soucier de la largeur de chacun d'eux ;
• modifier rapidement le sens de lecture vertical/horizontal ;
• aligner les éléments à gauche, à droite ou au centre du parent ;
• modifier l'ordre d'affichage des différents éléments ;
• déployer les éléments dans le parent sans problème pour gérer les marges ou la taille des éléments.

flexbox n'est pour le moment utilisable que sur les versions les plus récentes de nos navigateurs et avec des préfixes pour certains. Vous trouverez plus de précisions sur la compatibilité sur caniuse.

Pourquoi parler des flexbox si celles-ci ne sont pas encore utilisables sur tous les navigateurs ? Parce qu'il est toujours bon d'avoir un peu d'avance sur les technologies montantes, les flexbox sont beaucoup plus rapides à gérer qu'un tableau ou des éléments flottants pour maquetter un site dans le navigateur et parce qu'elles deviendront sans aucun doute un standard de mise en page.

I-A. Créons notre .flexcontainer▲

Tout d'abord il faut créer un conteneur pour nos éléments flex :

 

Sélectionnez

.flexcontainer {
    display: flex;
}

À savoir

Les flexbox utilisent un principe d'axes. Si on veut des éléments alignés verticalement, on utilise une colonne (column), pour des éléments horizontaux (par défaut) on utilise une ligne (row). Nous aurons donc deux axes appelés « Main axis », défini par le sens de lecture, et « Cross Axis » qui est perpendiculaire au premier.

 

Sélectionnez

.flexcontainer {
    display: flex;
    flex-flow: column;
    /* ou */
    flex-flow: row;
    /* flex-flow peut aussi s'écrire flex-direction */
}

Pour définir l'ordre d'affichage des éléments directement depuis CSS, nous pouvons utiliser row-reverse ou column-reverse.

Nous avons la possibilité de placer précisément les éléments dans notre flexbox, c'est ici que le principe d'axe vertical et horizontal prend son importance. Pour aligner les éléments à partir du début du main-axis, nous ajouterons la propriété justify-content: flex-start.

.flexcontainer {
    flex-flow: row;
    align-items: flex-end;
}

Grâce à flexbox, nous avons enfin la possibilité de centrer un élément au sein d'un autre aussi bien horizontalement que verticalement.

.flexcontainer {
    flex-flow: column;
    justify-content: center;
}

Aligner verticalement devient un jeu d'enfant !

Il est aussi possible de mettre des marges entre nos éléments, afin de remplir un espace donné ou simplement de séparer différents éléments. Pour cela, nous utilisons à nouveau la propriété justify-content avec comme valeur space-around. Les éléments de notre .flexcontainer seront séparés d'une marge identique et d'une demi-marge sur les cotés. La valeur space-between aura le même effet sans les marges extérieures aux éléments.

Pour le cross-axis, nous avons la possibilité de définir un alignement flex-end, flex-start, center ou stretch. Les deux premières valeurs positionnent les éléments sur les extrémités de l'axe, center place les éléments au centre du .flexcontainer et strech permet d'étirer les éléments afin qu'ils prennent la largeur ou hauteur du .flexcontainer.

C'est bien pratique toutes ces nouvelles propriétés, mais j'ai souvent besoin d'éléments plus grands les uns que les autres. Voyons comment nous pouvons donner une taille à nos différents éléments dans la flexbox.

#first {
    flex: 1 ;
}
#second {
    flex: 2;
}
#third {
    flex: 1;
}

La première valeur correspond au flex-grow. Il n'y a pas d'unité : nous utilisons des proportions. Si ces trois éléments ont flex: 1;, alors ils feront tous la même taille. Si l'un de ces éléments a pour valeur 2, il prendra deux fois plus de place que les autres.

Il est aussi possible de définir une taille de base grâce à flex-basis. Lorsque le navigateur calculera la taille des éléments dans le .flexcontainer, l'espace restant après l'addition des différentes tailles des éléments sera divisé proportionnellement à la propriété flex-grow.

Il existe enfin la propriété flex-shrink qui fait la même chose que flex-grow mais pour réduire les éléments dans une flexbox trop petite.

.element {
    flex: 1 1 100px;
}

Parmi les points les plus novateurs de l'amélioration du CSS ces dernières années, je retiendrais avant tout les boîtes flexibles. Elles nous permettront de nous passer de la plupart des systèmes de grille existants, qui sont souvent lourds, peu sémantiques et parfois encombrants. Une logique relativement simple, une gestion naturelle du responsive, des possibilités de mise en page bien plus avancées que celles que nous connaissions : les flexbox sont l'outil idéal pour construire vos pages directement dans le navigateur tout en vous laissant une grande flexibilité.

Cet article est publié avec l'aimable autorisation de Synbioz, l'article original peut être lu sur le blog de Synbioz : Redécouvrez la mise en page avec Flexbox.

Nous tenons à remercier Phanloga pour sa relecture attentive de cet article.