Les possibilités de mise en page sur le Web semblaient jusqu’alors limitées. Coincés entre des layouts figés ou le recours à des hacks hasardeux, les développeurs peinaient à déployer leur créativité. C’était sans compter sur l’avènement des flexbox en CSS. Désormais, des interfaces et des effets avant-gardistes sont à portée de main. Adieu grille de mise en page rigide, bonjour liberté de conception inégalée ! Avec les flexbox, osez imaginer, inventer et concrétiser vos pages les plus audacieuses. Prêts à repousser les limites de vos créations digitales ? C’est parti !
Qu’est-ce que le Flexbox en CSS ?
Les flexbox (ou flex container) sont un mode de layout CSS3 qui permet de structurer et d’agencer les éléments d’une page web de façon flexible et adaptative.
Concrètement, les flexbox permettent de :
- Positionner les éléments d’une page facilement, quelle que soit leur taille respective.
- Les réorganiser en fonction de l’espace disponible, notamment sur les différentes tailles d’écrans (responsive design).
- Distribuer l’espace restant entre les éléments.
- Aligner les éléments selon différents axes.
- Inverser l’ordre des éléments facilement.
Auparavant, créer des mises en page complexes ou responsive relevait du casse-tête. Il fallait combiner différentes techniques (float, positioning, media queries…). Les flexbox simplifient grandement la création de layouts modernes et adaptables.
On parle de flexbox car les éléments enfants d’un conteneur flex vont se « flexibiliser » pour s’adapter au mieux à l’espace disponible. Cette souplesse ouvre un champ des possibles infini pour agencer les blocs d’une page.
Quand utiliser Flexbox ?
Les flexbox brillent dans la conception de mises en page responsive. Grâce à eux, il devient un jeu d’enfant de redimensionner et réorganiser des éléments en fonction de l’espace disponible. Peu importe que l’on soit sur desktop, mobile ou tablette. Les flexbox s’adaptent parfaitement à chaque taille d’écran.
Autre point fort : l’alignement vertical. Cet agencement visuel est grandement simplifié avec les propriétés d’alignement des flexbox.
Les changements d’orientation en responsive sont également facilités. Passer d’une disposition verticale des éléments à une disposition horizontale se fait en un clin d’œil. Tout est question d’agencement intelligent.
Ensuite, la gestion des espaces et la distribution de l’espace restant ne sont plus un problème non plus car tout se positionne naturellement.
Les mises en page à colonnes élastiques sont un autre domaine où brillent les flexbox. Les colonnes s’adaptent automatiquement pour occuper l’espace de manière optimale.
Enfin, la souplesse des flexbox les rend parfaites pour réaliser des animations fluides et des transitions élaborées.
Comment utiliser Flexbox en CSS ?
Concepts de base
La compréhension des flexbox repose sur la maîtrise de deux axes structurants :
L‘axe principal (main axis) est l’axe sur lequel les éléments flex vont s’organiser et se répartir. Par défaut, il s’agit de l’axe horizontal orienté de gauche à droite.
Par exemple, si vous définissez un flex container avec flex-direction: row, vos éléments flex (les « flex items ») seront disposés les uns à la suite des autres sur une ligne horizontale. Ils se répartiront le long de cet axe principal horizontal.
L’axe secondaire (cross axis) est perpendiculaire à l’axe principal. Il permet de gérer l’alignement et le dimensionnement des éléments. Par défaut, il s’agit de l’axe vertical orienté de haut en bas.
Ainsi, avec l’exemple précédent en row, si vous utilisez align-items: center vos éléments seront centrés verticalement. Ils s’aligneront selon l’axe secondaire vertical.
Ces deux axes existent quelle que soit l’orientation choisie. Ainsi, avec flex-direction: column l’axe principal devient vertical et l’axe secondaire horizontal.
Selon l’espace disponible, les flex items se répartiront toujours le long de l’axe principal. Et vous pourrez les aligner sur l’axe secondaire grâce aux propriétés dédiées.
La maîtrise des flexbox passe donc par une parfaite compréhension de ce système d’axes principal et secondaire. Une fois ces concepts assimilés, vous pourrez agencer vos éléments à votre guise !
Les propriétés des conteneurs Flexbox
Le conteneur flex (flex container) rassemble les éléments à agencer. C’est sur lui que sont définies les propriétés principales des flexbox. Détaillons ces propriétés incontournables :
Flex-direction
Cette propriété permet de définir l’orientation de l’axe principal, et donc la direction d’affichage des éléments flex. Les valeurs possibles sont :
- row (défaut) : horizontal de gauche à droite ;
- row-reverse : horizontal de droite à gauche ;
- column : vertical de haut en bas ;
- column-reverse : vertical de bas en haut.
Par exemple :
/* Axe horizontal par défaut */
.container {
flex-direction: row; /* defaut */
}
/* Axe horizontal inversé */
.container {
flex-direction: row-reverse;
}
/* Axe vertical haut en bas */
.container {
flex-direction: column;
}
/* Axe vertical bas en haut */
.container {
flex-direction: column-reverse;
}Flex-wrap
Par défaut, les éléments flex essaient de tenir sur une seule ligne. La propriété flex-wrap permet de les répartir sur plusieurs lignes si besoin :
- nowrap (défaut) : pas de retour à la ligne ;
- wrap : retour à la ligne automatique si plus de place ;
- wrap-reverse : retour à la ligne dans le sens inverse.
Ce qui donne :
/* Tout sur une ligne (défaut) */
.container {
flex-wrap: nowrap;
}
/* Retour à la ligne auto */
.container {
flex-wrap: wrap;
}
/* Retour à la ligne inversé */
.container {
flex-wrap: wrap-reverse;
}Flex-flow
Cette propriété regroupe flex-direction et flex-wrap pour définir l’axe principal.
Syntaxe : flex-flow: <flex-direction> <flex-wrap>;
Justify-content
Cette propriété sert à aligner les éléments flex sur l’axe principal. Les valeurs possibles sont :
- flex-start (défaut) : alignés au début ;
- flex-end : alignés à la fin ;
- center : centrés ;
- space-between : répartis avec espacement égal entre eux ;
- space-around : répartis avec espacements égaux autour d’eux.
Align-items
Propriété qui aligne les éléments sur l’axe secondaire. Valeurs possibles :
- stretch (défaut) : éléments étirés sur toute la hauteur ;
- flex-start : alignés en haut ;
- flex-end : alignés en bas ;
- center : centrés verticalement ;
- baseline : alignés sur leur ligne de base.
Par exemple :
/* Éléments étirés sur la hauteur (défaut) */
.container {
align-items: stretch;
}
/* Alignés en haut */
.container {
align-items: flex-start;
}
/* Alignés en bas */
.container {
align-items: flex-end;
}
/* Centrés verticalement */
.container {
align-items: center;
}
/* Alignés sur leur ligne de base */
.container {
align-items: baseline;
}Align-content
La propriété align-content sert à aligner les lignes sur l’axe secondaire (avec wrap). Valeurs possibles :
- stretch (défaut) : lignes étirées ;
- flex-start : en haut ;
- flex-end : en bas ;
- center : centré ;
- space-between : répartition avec espace égal ;
- space-around : répartition avec espacement égaux autour.
En pratique, cela donne :
/* Lignes étirées (défaut) */
.container {
align-content: stretch;
}
/* Lignes en haut */
.container {
align-content: flex-start;
}
/* Lignes en bas */
.container {
align-content: flex-end;
}
/* Lignes centrées */
.container {
align-content: center;
}
/* Répartition avec espacement */
.container {
align-content: space-between;
}
/* Espacement autour des lignes */
.container {
align-content: space-around;
}Voilà les principales propriétés à maîtriser sur le conteneur flex pour commencer à manier les flexbox en CSS !
Pour aller plus loin (développement avancé avec Flexbox)
Les propriétés de base des flexbox permettent déjà de réaliser des mises en page complexes. Cependant, pour pousser encore plus loin la maîtrise de cet outil, il existe des propriétés avancées à découvrir.
Flex grow / shrink / basis
Ces 3 propriétés permettent de contrôler la capacité d’un élément flex à croître ou rétrécir selon l’espace disponible :
- flex-grow : capacité à grandir pour occuper l’espace restant ;
- flex-shrink : capacité à rétrécir si manque de place ;
- flex-basis : taille initiale avant répartition de l’espace.
Exemple :
/* Partage équitable de l'espace */
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}Avec ces propriétés, on peut distribuer l’espace de manière très précise entre les éléments.
order
Cette propriété permet de définir l’ordre d’affichage des éléments, indépendamment de leur position dans le code source :
.item-1 {
order: 2; /* affiché en 2e */
}
.item-2 {
order: 1; /* affiché en 1er */
}Pratique pour inverser des éléments en responsive, par exemple.
flex
Propriété raccourcie pour définir grow, shrink et basis d’un coup :
.item {
flex: 1 1 10rem;
}Un gain de temps (très) appréciable !
align-self
Cette propriété permet d’overrider align-items pour un élément particulier. Utile pour cas exceptionnels.
Il existe encore d’autres propriétés avancées à découvrir, mais celles-ci permettent déjà d’exploiter les flexbox de manière experte !
Quelle compatibilité avec les navigateurs ?
Les flexbox sont maintenant très bien supportés par les navigateurs modernes. Cependant, il reste quelques problèmes de compatibilité à connaître.
Les flexbox sont parfaitement compatibles avec :
– Chrome 29+
– Firefox 28+
– Safari 9+
– Edge 12+
– Opera 17+
Sur ces navigateurs modernes, vous pouvez utiliser les flexbox sans souci.
Attention sur IE10 et IE11
Les vieilles versions d’Internet Explorer sont à surveiller :
- IE10 propose une implémentation incomplète avec des prefixes vendor (-ms).
- IE11 supporte la syntaxe standardisée mais avec encore quelques bugs persistants.
Il faut donc rester vigilant sur ces deux versions d’IE et tester soigneusement son code.
Conclusion
En définitive, les flexbox représentent une véritable révolution dans la création de mises en page pour le Web. Grâce à eux, vous pouvez désormais créer des layouts modernes, flexibles et parfaitement adaptés à tous les supports.
L’approche versatile des flexbox est idéale pour répondre aux enjeux actuels du responsive design et des interfaces épurées. Leur prise en main nécessite néanmoins d’assimiler des concepts clés comme les axes principal et secondaire.
Une fois ces bases acquises, les possibilités deviennent infinies. Vous pouvez littéralement dessiner vos pages comme bon vous semble en distribuant et en alignant les éléments à votre guise.
Combinez les Flexbox malicieusement avec d’autres technologies comme les CSS Grid pour repousser toujours plus loin les frontières du design web !
