Flexbox est un module de mise en page CSS qui vous permet de créer des dispositions flexibles et adaptatives pour vos éléments HTML. Il est particulièrement utile lorsque vous avez besoin de gérer des dispositions qui doivent s’adapter à différentes tailles d’écran ou de dispositifs.
Avec Flexbox, vous pouvez facilement aligner les éléments horizontalement ou verticalement, gérer l’espace entre les éléments et définir l’ordre de présentation des éléments. Il offre également des moyens de gérer les dimensions des éléments de manière flexible, ce qui est très utile pour créer des dispositions responsives.
Pour utiliser Flexbox dans votre projet, vous devez d’abord définir un conteneur Flexbox en utilisant la propriété CSS display: flex ou display: inline-flex sur un élément HTML. Ensuite, vous pouvez utiliser les propriétés de Flexbox pour gérer les dispositions de ses enfants.
.container-flex {
display: flex;
}Comment aligner les éléments avec Flexbox
Une des fonctionnalités les plus utiles de Flexbox est sa capacité à aligner les éléments de manière flexible. Il existe plusieurs propriétés qui vous permettent de contrôler l’alignement des éléments à l’intérieur d’un conteneur Flexbox.
Alignement horizontal des éléments avec justify-content
La propriété justify-content permet de contrôler l’alignement horizontal des éléments.
justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
/*aligne les éléments sur le bord gauche*/
.container {
justify-content: flex-start;
}
/*centre les éléments*/
.container {
justify-content: center;
}
/*aligne les éléments sur le bord droit*/
.container {
justify-content: flex-end;
}
/*répartit les éléments uniformément entre le bord gauche et droit avec aucun espace sur les bords*/
.container {
justify-content: space-between;
}
/*répartit les éléments uniformément entre le bord gauche et droit avec de l'espace équivalent sur les deux bords*/
.container {
justify-content: space-around;
}
/* répartit les éléments uniformément entre le bord gauche et droit avec de l'espace équivalent sur les deux bords et entre chaque élément */
.container {
justify-content: space-evenly;
}Alignement vertical des éléments avec align-items
La propriété align-items permet de contrôler l’alignement vertical des éléments.
align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: stretch;
/* Aligner tous les éléments en haut */
.container {
align-items: flex-start;
}
/* Aligner tous les éléments au milieu */
.container {
align-items: center;
}
/* Aligner tous les éléments en bas */
.container {
align-items: flex-end;
}
/*fait en sorte que les éléments s'adaptent à leur hauteur de contenu*/
.container {
align-items: stretch;
}Comment gérer l'espace entre les éléments avec Flexbox
Flexbox vous permet également de gérer l’espace entre les éléments de manière flexible. Il existe plusieurs propriétés qui vous permettent de contrôler l’espacement entre les éléments à l’intérieur d’un conteneur Flexbox.
Ajouter de l'espacement entre les éléments avec margin
La propriété margin définit l’espace entre l’élément et les autres éléments. Cette propriété peut être utilisée pour définir de l’espacement entre les éléments de manière individualisée.
/* Ajouter de l'espacement de 20px entre chaque élément */
.item {
margin: 0 20px;
}Ajouter de l'espacement autour d'un élément avec padding
La propriété padding définit l’espace entre les bords d’un élément et son contenu. Cette propriété peut être utilisée pour ajouter de l’espacement autour d’un élément de manière individualisée.
/* Ajouter de l'espacement de 20px autour d'un élément */
.item {
padding: 20px;
}Utiliser gap pour ajouter de l'espacement entre les éléments
Depuis la version CSS Grid Layout, Flexbox peut utiliser gap pour ajouter un espace entre les éléments. Cette propriété permet de définir un espace uniforme entre tous les éléments d’un conteneur flex.
/* Ajouter de l'espacement de 20px entre tous les éléments */
.container {
gap: 20px;
}Cette propriété peut être utilisée conjointement avec les propriétés row-gap et column-gap pour définir des espacements différents entre les éléments sur les lignes et les colonnes. Il est important de noter qu’il est pris en compte uniquement pour les balises enfant directe du conteneur flex, et qu’il est nécessaire de vérifier la compatibilité des navigateurs pour son utilisation.
Les propriétés de Flexbox
Flexbox offre de nombreuses propriétés pour créer des dispositions flexibles et adaptatives pour vos éléments HTML. Dans cette partie, nous allons explorer les propriétés les plus couramment utilisées.
flex-direction
La propriété flex-direction définit la direction dans laquelle les éléments sont disposés dans un conteneur flex. Il existe quatre valeurs possibles : row, row-reverse, column et column-reverse. La valeur par défaut est row.
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
/* Disposition des éléments en ligne (par défaut) */
.container {
flex-direction: row;
}
/* Disposition des éléments en ligne inversé */
.container {
flex-direction: row-reverse;
}
/* Disposition des éléments en colonne */
.container {
flex-direction: column;
}
/* Disposition des éléments en colonne inversé */
.container {
flex-direction: column-reverse;
}
flex-wrap
La propriété flex-wrap définit si les éléments d’un conteneur flex doivent être disposés sur une seule ligne ou sur plusieurs lignes. Il existe deux valeurs possibles : nowrap (par défaut) et wrap.
flex-wrap: nowrap;
flex-wrap: wrap;
/* Disposition des éléments sur une seule ligne (par défaut) */
.container {
flex-wrap: nowrap;
}
/* Disposition des éléments sur plusieurs lignes */
.container {
flex-wrap: wrap;
}flex-flow
La propriété flex-flow est un raccourci pour les propriétés flex-direction et flex-wrap :
/* Disposition des éléments en ligne et sur plusieurs lignes */
.container {
flex-flow: row wrap;
}justify-content
La propriété justify-content définit comment les éléments sont alignés sur l’axe horizontal (x) dans un conteneur flex. Il existe plusieurs valeurs possibles : flex-start, center, flex-end, space-between, space-around et space-evenly. La valeur par défaut est flex-start.
/*aligne les éléments sur le bord gauche*/
.container {
justify-content: flex-start;
}
/*centre les éléments*/
.container {
justify-content: center;
}
/*aligne les éléments sur le bord droit*/
.container {
justify-content: flex-end;
}
/*répartit les éléments uniformément entre
le bord gauche et droit avec aucun espace sur les bords*/
.container {
justify-content: space-between;
}
/*répartit les éléments uniformément entre le bord gauche
et droit avec de l'espace équivalent sur les deux bords*/
.container {
justify-content: space-around;
}
/* répartit les éléments uniformément entre le bord gauche
et droit avec de l'espace équivalent sur les deux bords et
entre chaque élément */
.container {
justify-content: space-evenly;
}align-items
La propriété align-items définit comment les éléments sont alignés sur l’axe vertical (y) dans un conteneur flex. Il existe plusieurs valeurs possibles : flex-start, center, flex-end, baseline et stretch. La valeur par défaut est stretch.
/* Aligner tous les éléments en haut */
.container {
align-items: flex-start;
}
/* Aligner tous les éléments au milieu */
.container {
align-items: center;
}
/* Aligner tous les éléments en bas */
.container {
align-items: flex-end;
}
/*fait en sorte que les éléments s'adaptent à leur hauteur de contenu*/
.container {
align-items: stretch;
}align-content
La propriété align-content est similaire à align-items, mais elle agit sur les lignes d’un conteneur flex à plusieurs lignes. Il existe les même valeurs que align-items.
align-content: flex-start;
align-content: center;
align-content: flex-end;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
/*aligne les éléments sur le bord gauche*/
.container {
justify-content: flex-start;
}
/*centre les éléments*/
.container {
justify-content: center;
}
/*aligne les éléments sur le bord droit*/
.container {
justify-content: flex-end;
}
/*répartit les éléments uniformément entre le
bord gauche et droit avec aucun espace sur les
bords*/
.container {
justify-content: space-between;
}
/*répartit les éléments uniformément entre le bord
gauche et droit avec de l'espace équivalent sur
les deux bords*/
.container {
justify-content: space-around;
}
/* répartit les éléments uniformément entre le bord
gauche et droit avec de l'espace équivalent sur les
deux bords et entre chaque élément */
.container {
justify-content: space-evenly;
}order
La propriété order permet de définir l’ordre d’affichage des éléments d’un conteneur flex. Cette propriété prend un nombre entier en valeur, avec 0 étant la valeur par défaut.
<div class="container">
<div class="item first">1</div>
<div class="item second">2</div>
<div class="item third">3</div>
<div class="item fourth">4</div>
<div class="item fifth">5</div>
</div>.container {
display: flex;
}
/*définit l'élément 1 en premier*/
.first {
order: -1;
}
/*définit l'élément 3 en deuxième*/
.third {
order: 2;
}
/*définit l'élément 5 en dernier*/
.fifth {
order: 3;
}
Avec ce code, l’ordre d’affichage des éléments sera : 1, 3, 2, 4, 5
Tous les éléments ayant une valeur d’ordre définie seront triés par cette valeur, et les éléments qui n’ont pas de valeur définie auront la valeur 0 par défaut. Les éléments ayant des valeurs négatives seront affichés avant ceux ayant des valeurs positives.
Il est possible de jouer avec ces valeurs pour obtenir l’affichage désiré. Il est important de noter que l’ordre de définition des propriétés CSS dans le fichier n’a pas d’influence sur l’ordre d’affichage des éléments, il faut utiliser order pour gérer cela.
flex-grow, flex-shrink et flex-basis
Les propriétés flex-grow, flex-shrink et flex-basis permettent de définir la taille des éléments d’un conteneur flex.
flex-growdéfinit la proportion d’espace disponible que chaque élément doit prendre.flex-shrinkdéfinit la proportion d’espace qu’un élément doit réduire pour s’adapter à un conteneur plus petit.flex-basisdéfinit la taille de base d’un élément avant de prendre en compte les propriétésflex-growetflex-shrink.
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
/* faire en sorte que l'élément prenne
tout l'espace disponible */
.item {
flex-grow: 1;
}
/* faire en sorte que l'élément se réduise
pour s'adapter à un conteneur plus petit */
.item {
flex-shrink: 1;
}
/* définir une base de 200px pour un élément */
.item {
flex-basis: 200px;
}Il est possible de combiner ces propriétés en utilisant la propriété flex
/* flex: flex-grow | flex-shrink | flex-basi */
.item {
flex: 1 1 200px;
}Exemples
Exemple 1 : Une grille en Flexbox
<div class="container-flex">
<div class="item-flex item1">1</div>
<div class="item-flex item2">2</div>
<div class="item-flex item3">3</div>
<div class="item-flex item4">4</div>
<div class="item-flex item5">5</div>
<div class="item-flex item6">6</div>
<div class="item-flex item7">7</div>
<div class="item-flex item8">8</div>
<div class="item-flex item9">9</div>
</div>.container-flex {
display: flex;
flex-wrap: wrap;
/* permet à l'élément d'être répartis sur
plusieurs lignes s'il n'y a pas assez de place */
justify-content: space-between;
/* permet de répartir les éléments uniformément
entre le bord gauche et droit avec aucun espace
sur les bords */
align-content: space-between;
/* permet de répartir les lignes uniformément entre
le haut et le bas avec aucun espace sur les bords */
}
.item-flex {
text-align: center;
flex: 1 0 calc(33.33% - 20px);
/* utilise flex-grow et flex-basis pour répartir les
éléments sur une grille de 3 colonnes en utilisant
33.33% de la largeur disponible et en
réduisant l'espace entre chaque élément de 20px */
}
En utilisant la propriété flex, on peut définir comment les éléments s’adaptent à l’espace disponible dans le conteneur flex. Dans cet exemple, nous utilisons flex: 1 0 calc(33.33% - 20px); pour répartir les éléments sur une grille de 3 colonnes en utilisant 33.33% de la largeur disponible et en réduisant l’espace entre chaque élément de 20px. Cela permet de créer une grille réactive qui s’adapte automatiquement à la taille de la fenêtre.
En combinant les propriétés justify-content, align-content et flex, vous pouvez créer des dispositions flexibles et adaptatives pour répondre à vos besoins de mise en page. Il est important de noter que ces propriétés peuvent être combinées de différentes manières pour créer des dispositions uniques et personnalisées. N’hésitez pas à expérimenter avec les différentes propriétés pour trouver les meilleures combinaisons pour votre projet.
Exemple 2 : Menu responsive
<nav class="menu-container">
<a href="#" class="menu-item">Home</a>
<a href="#" class="menu-item">About</a>
<a href="#" class="menu-item">Services</a>
<a href="#" class="menu-item">Contact</a>
</nav>.menu-container {
display: flex; /* active la disposition flex */
justify-content: space-between; /* aligne les éléments de menu à droite et à gauche */
align-items: center; /* aligne les éléments de menu au centre verticalement */
}
/* Ajoute un bouton de menu pour les petits écrans */
.menu-container::before {
content: "Menu"; /* Texte affiché sur le bouton */
display: none; /* masque le bouton par défaut */
}
/* Quand la résolution de l'écran est inférieure à 600px */
@media (max-width: 600px) {
.menu-container {
flex-wrap: wrap; /* Permet aux éléments de s'enrouler sur plusieurs lignes */
justify-content: center; /* Centre les éléments horizontalement */
}
.menu-item {
flex-basis: 100%; /* Prend toute la largeur disponible */
text-align: center; /* Centre le texte */
}
.menu-container::before {
display: block; /* Affiche le bouton de menu */
}
}Avec cet exemple, le menu est disposé horizontalement et aligné à droite et à gauche sur des écrans plus larges (par défaut). Pour les petits écrans (inférieurs à 600px de large), les éléments sont centrés et enroulés sur plusieurs lignes, et un bouton « Menu » est ajouté pour ouvrir et fermer le menu en utilisant JavaScript ou un autre outil de votre choix. Si vous voulez un exemple plus détailler d’un menu sous flexbox, j’ai fais un article sur le sujet.
Conclusion
Avec la propriété CSS Flexbox, vous pouvez facilement créer des dispositions flexibles et adaptatives pour vos éléments HTML. En utilisant des propriétés telles que display, justify-content, align-items et flex, vous pouvez aligner et organiser les éléments dans un conteneur flex de manière efficace.
Flexbox est particulièrement utile pour la création de grilles de contenu, de menus et de formulaires réactifs, car il permet de répartir efficacement l’espace disponible en fonction des besoins de votre mise en page. Il est important de noter que Flexbox n’est pas une panacée pour tous les problèmes de mise en page, mais il peut s’avérer très pratique pour résoudre certains problèmes courants. Il est souvent utilisé en conjonction avec d’autres technologies de mise en page telles que Grid Layout ou des frameworks de mise en page tels que Bootstrap.
En conclusion, Flexbox est un outil puissant pour les développeurs Web pour créer des mises en page flexibles et adaptatives pour les sites web et les applications. Il est important de comprendre les propriétés et les utilisations de base de Flexbox pour en tirer le meilleur parti. N’oubliez pas de vérifier les limites de compatibilité de navigateur avant de l’utiliser pour vos projets.
