Cours IT Bases CSS 032_Mise en page flexible Flex

Mise en page flexible Flex

Pendant longtemps, les seuls outils fiables et compatibles entre navigateurs pour créer des mises en page CSS étaient float et position. Ces deux outils fonctionnent très bien dans la plupart des cas, mais dans certains aspects, ils ont certaines limitations qui rendent difficile l’accomplissement des tâches.

Les exigences de mise en page simples suivantes sont difficiles ou impossibles à mettre en œuvre de manière pratique et flexible avec de tels outils (float et position) :

• Centrer verticalement un bloc de contenu à l’intérieur du contenu parent.
• Faire en sorte que tous les éléments enfants d’un conteneur occupent la même quantité de largeur/hauteur disponible, quelle que soit la largeur/hauteur disponible.
• Faire en sorte que toutes les colonnes d’une mise en page à plusieurs colonnes adoptent la même hauteur, même si elles contiennent des quantités de contenu différentes.

La mise en page Flex de CSS est un outil de mise en page puissant dans CSS qui peut être utilisé pour créer diverses mises en page flexibles. Pour maîtriser la mise en page Flex de CSS, il faut maîtriser les connaissances suivantes :

• Conteneur flex (flex container) : La mise en page Flex se compose de conteneurs flex et d’éléments flex. Le conteneur flex est le conteneur qui place les éléments flex dans la mise en page Flex. Le conteneur flex peut être n’importe quel élément, mais on utilise généralement l’élément div.
• Élément flex (flex item) : Les éléments flex sont les éléments placés dans le conteneur flex. Les éléments flex peuvent être n’importe quel élément, mais on utilise généralement l’élément div.
• Axe principal (main axis) : L’axe principal est la direction horizontale ou verticale des éléments dans la mise en page Flex.
• Axe transversal (cross axis) : L’axe transversal est la direction verticale ou horizontale des éléments dans la mise en page Flex.

Propriétés du conteneur flex

Le conteneur flex possède les propriétés suivantes pour contrôler la mise en page Flex :

• display : Définit le mode d’affichage du conteneur flex. Le conteneur flex doit être défini sur display: flex ou display: inline-flex pour utiliser la mise en page Flex.
• flex-direction : Définit la direction de l’axe principal de la mise en page Flex. Les valeurs peuvent être : flex-start alignement au début de l’axe principal, flex-end alignement à la fin de l’axe principal, row axe principal disposé horizontalement, row-reverse axe principal disposé horizontalement en sens inverse, column axe principal disposé verticalement, column-reverse axe principal disposé verticalement en sens inverse.
• flex-wrap : Contrôle si les éléments à l’intérieur du conteneur flex passent à la ligne. nowrap valeur par défaut, pas de retour à la ligne, wrap retour à la ligne, wrap-reverse retour à la ligne inversé.
• flex-flow : Raccourci pour flex-direction et flex-wrap, deux valeurs correspondant respectivement à flex-direction et flex-wrap.
• justify-content : Définit l’alignement des éléments flex sur l’axe principal dans le conteneur flex. Les valeurs peuvent être : flex-start alignement au début de l’axe principal, flex-end alignement à la fin de l’axe principal, center centrage de l’axe principal, space-between alignement uniforme de l’axe principal (conteneur aligné au début et à la fin), space-around alignement uniforme de l’axe principal (espaces égaux entre les éléments) ou space-evenly alignement uniforme de l’axe principal (y compris des espaces égaux des deux côtés).
• align-items : Définit l’alignement des éléments flex sur l’axe transversal dans le conteneur flex. Les valeurs peuvent être : flex-start alignement au début de l’axe transversal, flex-end alignement à la fin de l’axe transversal, center centrage de l’axe transversal, stretch valeur par défaut ou baseline alignement de la ligne de base du texte de la première ligne de l’axe transversal. Agit uniquement sur les éléments enfants du conteneur flex.
• align-content : Comme align-items, c’est une propriété pour contrôler l’alignement des éléments enfants sur l’axe transversal, qui ne prend effet que lorsque le conteneur flex possède plusieurs axes (plusieurs lignes ou colonnes).

Propriétés de l’élément flex

Les éléments flex possèdent les propriétés suivantes pour contrôler la mise en page des éléments flex dans la mise en page Flex :

• flex-grow : Définit le rapport d’expansion de l’élément flex sur l’axe principal. La valeur peut être un nombre à virgule flottante entre 0 et 1.
• flex-shrink : Définit le rapport de réduction de l’élément flex sur l’axe principal. La valeur peut être un nombre à virgule flottante entre 0 et 1.
• flex-basis : Définit la largeur ou la hauteur par défaut de l’élément flex sur l’axe principal. La valeur peut être une valeur de longueur, une valeur de pourcentage ou auto.
• order : Définit l’ordre de l’élément flex sur l’axe principal. La valeur peut être un entier entre 1 et 65535.

Exemple :

1
/* Style du conteneur flex */
2
.flex-container {
3
    display: flex;
4
    flex-direction: row; /* Direction de l'axe principal horizontale */
5
    justify-content: space-around; /* Alignement sur l'axe principal */
6
    align-items: center; /* Alignement sur l'axe transversal */
7
    height: 200px; /* Définir la hauteur du conteneur */
8
    border: 2px solid #333; /* Ajouter une bordure pour une meilleure visualisation */
9
}
10
/* Style de l'élément flex */
11
.flex-item {
12
    flex: 1; /* Diviser l'espace de l'axe principal en parties égales */
13
    text-align: center;
14
    padding: 20px;
15
    background-color: #f2f2f2;
16
}

1
<!-- Conteneur flex -->
2
<div class="flex-container">
3
    <!-- Élément flex 1 -->
4
    <div class="flex-item">Item 1</div>
5
    <!-- Élément flex 2 -->
6
    <div class="flex-item">Item 2</div>
7
    <!-- Élément flex 3 -->
8
    <div class="flex-item">Item 3</div>
9
</div>

Effet :