Redécouvrez la mise en page avec Flexbox

Image non disponible Image non disponible

Cet article va vous présenter les bases de l'utilisation des propriétés CSS3 flex.

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.

1 commentaire Donner une note à l'article (4.5)

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Qu'est qu'une boîte flexible ?

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.

Image non disponible
 
Sélectionnez
.flexcontainer {
    display: flex;
    flex-flow: column;
    /* ou */
    flex-flow: row;
    /* flex-flow peut aussi s'écrire flex-direction */
}
Image non disponible
Column
Image non disponible
Row

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

II. Utilisons les axes

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.

À retenir :

  • justify-content : main-axis ;
  • align-items : cross-axis.
 
Sélectionnez
.flexcontainer {
    flex-flow: row;
    align-items: flex-end;
}
Image non disponible

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

 
Sélectionnez
.flexcontainer {
    flex-flow: column;
    justify-content: center;
}
Image non disponible

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.

III. Définir une taille

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.

 
Sélectionnez
#first {
    flex: 1 ;
}
#second {
    flex: 2;
}
#third {
    flex: 1;
}
Image non disponible

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.

À retenir

La propriété flex est un raccourci pour les propriétés :

  • flex-grow ;
  • flex-shrink ;
  • flex-basis.

Soit flex: (grow) (shrink) (basis).

 
Sélectionnez
.element {
    flex: 1 1 100px;
}

IV. Conclusion

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

V. Remerciements

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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2014 Synbioz. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.