Flexbox est une nouvelle propriété 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 :
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écision sur la compatibilité sur caniuse.
Pourquoi parler des flexbox si celles-çi ne sont pas encore utilisable 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 ‘float’ pour maquetter un site dans le navigateur et parce qu’elles deviendront sans aucun doute un standard de mise en page.
Tout d’abord il faut créer un conteneur pour nos éléments flex :
.flexcontainer {
display: flex;
}
À savoir : Les flexbox utilisent un principe d’axes. Si on veux 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 2 axes appelés “Main axis”, définis par le sens de lecture, et “Cross Axis” qui est perpendiculaire au premier.
.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.
À retenir :
.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 pour argument 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. L’argument space-between aura le même effet sans les marges exterieures aux éléments.
Pour le cross-axis nous avons la possibilité de définir un alignement flex-end, flex-start, center et stretch. Ces 2 premiers arguments positionnent les éléments sur les extrémités de l’axe. “Center” place les éléments au centre du .flexcontainer et l’argument strech nous 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;
}
Le premier argument correspond au flex-grow. Il n’y a pas d’unité, nous utilisons des proportions. Si ces 3 éléments ont flex: 1; alors ils feront tous la même taille. Si l’un des ces éléments avait pour valeur 2, il prendrait 2 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érents 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 :
soit flex: (grow) (shrink) (basis)
.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 flexbox. Elles nous permettrons de nous passer de la plupart des système de grille existant, qui sont souvent lourds, peu sémantique 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 designer vos pages directement dans le navigateur tout en vous laissant une grande flexibilité.
À voir aussi :
L’équipe Synbioz.
Libres d’être ensemble.