formations / css / css3-le-flex
CSS3 : le flex
"flex" est une propriété CSS qui permet de créer des boîtes flexibles et d'organiser les éléments à l'intérieur selon des axes flexibles. Cette propriété permet de créer des mises en page plus dynamiques et adaptables en fonction de la taille de l'écran."
Faire un container flex :
Pour déclarer un conteneur flex en CSS, vous devez utiliser la propriété CSS "display" et la valeur "flex". Voici un exemple :
<div class="flex-container">
<div class="square">A</div>
<div class="square">B</div>
<div class="square">C</div>
</div>
.flex-container {
display: flex;
padding: 10px;
border: 1px solid #000;
}
.square {
width: 100px;
min-height: 100px;
background-color: #7636E5;
margin: 10px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
Dans cet exemple, nous avons un élément div avec la classe "flex-container" qui contient trois éléments div à l'intérieur. La propriété "display: flex" est appliquée à la classe "flex-container", ce qui la transforme en un conteneur flex. Les éléments à l'intérieur de la boîte flex seront alors organisés selon les axes flexibles, par défaut en ligne (horizontalement).
Il est important de noter que les éléments enfants directs du conteneur flex seront considérés comme des éléments flexibles. Vous pouvez également personnaliser l'organisation des éléments en utilisant d'autres propriétés flexibles, telles que "flex-direction", "justify-content" et "align-items".
Alignement :
Horizontal
"justify-content" définit l'alignement horizontal des éléments à l'intérieur d'un conteneur flex. Cette propriété peut être utilisée pour centrer les éléments horizontalement, les aligner à gauche ou à droite, ou les espacer de manière égale sur l'axe horizontal.
La propriété "justify-content" peut prendre les valeurs suivantes :
- "flex-start" : les éléments sont alignés sur le bord de départ du conteneur (le bord gauche pour une direction de flexion horizontale).
- "flex-end" : les éléments sont alignés sur le bord de fin du conteneur (le bord droit pour une direction de flexion horizontale).
- "center" : les éléments sont centrés horizontalement dans le conteneur.
- "space-between" : les éléments sont espacés également les uns des autres, avec le premier élément collé au bord de départ et le dernier élément collé au bord de fin.
- "space-around" : les éléments sont espacés également les uns des autres et ont un espace égal autour d'eux.
- "space-evenly" : les éléments sont espacés uniformément avec un espace égal entre eux, y compris à l'extérieur du premier et du dernier élément.
On ajoute la propriété "justify-content" au container parent et on lui ajoute une des valeurs listées ci-dessus
.flex-container {
display: flex;
padding: 10px;
border: 1px solid #000;
justify-content: flex-start;
}
A l'aide des propriétés listées ci-dessous nous obtenons les résultats suivants :
flex-start
flex-end
center
space-between
space-around
space-evenly
Vertical
"align-items" définit l'alignement vertical des éléments à l'intérieur d'un conteneur flex. Cette propriété peut être utilisée pour centrer les éléments verticalement, les aligner en haut ou en bas du conteneur, ou les étirer pour remplir le conteneur.
Les valeurs possibles de "align-items" sont les suivantes :
- "flex-start" : les éléments sont alignés sur le bord de départ du conteneur (le bord supérieur pour une direction de flexion verticale).
- "flex-end" : les éléments sont alignés sur le bord de fin du conteneur (le bord inférieur pour une direction de flexion verticale).
- "center" : les éléments sont centrés verticalement dans le conteneur.
- "baseline" : les éléments sont alignés sur leur ligne de base commune.
- "stretch" : les éléments sont étirés pour remplir le conteneur verticalement.
On ajoute une hauteur à la classe "flex-container" ainsi que la prorpiété "align-items" et avec les propriétés listées ci-dessus on obtient les résulats suivants :
.flex-container {
display: flex;
padding: 10px;
border: 1px solid #000;
justify-content: flex-start;
height: 250px;
align-items: flex-start;
}
flex-start
flex-end
center
baseline
stretch
Align self
"align-self" définit l'alignement vertical d'un élément individuel à l'intérieur d'un conteneur flex. Cette propriété peut être utilisée pour remplacer l'alignement vertical défini pour tous les éléments du conteneur avec la propriété "align-items", et permet de personnaliser l'alignement vertical d'un élément spécifique.
Les valeurs possibles de "align-self" sont les mêmes que celles de "align-items" :
- flex-start : l'élément est aligné sur le bord de départ du conteneur (le bord supérieur pour une direction verticale).
- flex-end : l'élément est aligné sur le bord de fin du conteneur (le bord inférieur pour une direction verticale).
- center : l'élément est centré verticalement dans le conteneur.
- baseline : l'élément est aligné sur sa ligne de base commune.
- stretch : l'élément est étiré pour remplir le conteneur verticalement.
La propriété "align-self" s'applique uniquement à l'élément individuel sur lequel elle est définie. Si cette propriété n'est pas définie pour un élément spécifique, l'alignement vertical sera déterminé par la propriété "align-items" définie sur le conteneur.
Order :
"order" définit l'ordre de disposition des éléments flex à l'intérieur d'un conteneur flex. Cette propriété peut être utilisée pour changer l'ordre de l'affichage des éléments en fonction de la disposition de la page ou de l'écran.
La propriété "order" prend une valeur numérique, qui détermine l'ordre de l'élément dans le conteneur flex. Par défaut, tous les éléments ont une valeur de "0" pour "order", ce qui signifie qu'ils sont disposés dans l'ordre dans lequel ils sont présents dans le code HTML. En utilisant la propriété "order", vous pouvez changer l'ordre de l'affichage des éléments sans avoir à modifier le code HTML.
Par exemple, si vous souhaitez déplacer un élément en haut du conteneur, vous pouvez lui donner une valeur de "-1" pour "order", et il sera affiché avant tous les autres éléments ayant une valeur de "0". Si vous donnez une valeur de "1" à un autre élément, il sera affiché après tous les éléments ayant une valeur de "0".
Il est important de noter que la propriété "order" affecte uniquement l'ordre de disposition des éléments, et ne modifie pas leur position sur l'axe horizontal ou vertical du conteneur flex.
Un exemple :
Avec le code html et le code css ci dessous, la div "A" va se positionner à la fin de container malgré l'ordre du code html.
<div class="flex-container">
<div class="square">A</div>
<div class="square">B</div>
<div class="square">C</div>
</div>
.flex-container {
display: flex;
padding: 10px;
border: 1px solid #000;
}
.square {
width: 100px;
min-height: 100px;
background-color: #7636E5;
margin: 10px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.flex-container div:first-child{
order: 1;
}
Avec order il est possible de changer l'ordre d'affichage du code html, ce qui peut être utile avec l'utilisation des "media query" pour mettre en place le rendu "responsive" du site.
Direction :
"flex-direction" définit la direction principale de disposition des éléments d'un conteneur flex. Cette propriété peut être utilisée pour contrôler la direction de lecture des éléments, ce qui peut être utile pour les langues qui s'écrivent de droite à gauche.
Les valeurs possibles de "flex-direction" sont :
- "row" : les éléments sont disposés horizontalement de gauche à droite.
- "row-reverse" : les éléments sont disposés horizontalement de droite à gauche.
- "column" : les éléments sont disposés verticalement de haut en bas.
- "column-reverse" : les éléments sont disposés verticalement de bas en haut.
La direction principale détermine l'axe principal du conteneur flex. Si la direction est "row" ou "row-reverse", l'axe principal est horizontal, tandis que si la direction est "column" ou "column-reverse", l'axe principal est vertical.
Il est important de noter que la direction principale affecte également la direction des propriétés de placement "justify-content" et "align-items". Par exemple, si la direction principale est "row", "justify-content" contrôle l'alignement horizontal et "align-items" contrôle l'alignement vertical.
Voilà, c'est tout, en espérant que ce tuto vous aura permis de démystifier le flex et son utilisation qui s'avère très utile pour des mises en page fluide et responsive.
Tutos du jour
PhpMyAdmin - Les bases de données
phpMyAdmin est un outil d'administration de base de données pour MySQL et MariaDB.
Voir le tuto
Le CRUD avec PHP & MySQLi
Le CRUD est un acronyme pour Create, Read, Update, Delete. Ces quatre opérations correspondent aux quatre actions de base.
Voir le tuto