Dans le monde du développement web, la mise en page des sites peut représenter un défi majeur pour de nombreux développeurs. Heureusement, CSS Flexbox offre une solution simple et puissante pour structurer et aligner les éléments d'une page web de manière flexible.
Flexbox, qui signifie "Flexible Box" en anglais, est une technique de mise en page intégrée dans CSS3**. Elle permet aux développeurs de créer des mises en page flexibles qui s'adaptent facilement à différents écrans et tailles d'appareils.
Pour l'applicabilité de la propriété Flexbox en CSS, nous devront savoir que l'on doit nécessaire avec un élément parent et d'autres éléments enfants et chacun de ces deux parties à des propriétés qui lui sont propres et uniques c'est-à-dire une propriété qui est affectée au parent ne peut l'être à l'enfant et vice versa.
- - Fonctionnement du CSS
Tout d'abord, on considère un conteneur parent, appelé "f*lex container*", qui contiendra les éléments que vous souhaitez disposer sur votre page. Ensuite, les éléments contenus dans ce conteneur, appelés "flex items", seront alignés et ajustés en fonction des règles définies dans le CSS.
2. Utilisation de Flexbox
Pour utiliser Flexbox, il faut tout d'abord déclarer le conteneur parent en utilisant la propriété "display: flex". Ensuite, vous pourrez utiliser différentes propriétés CSS pour manipuler la mise en page selon vos besoins.
Voici quelques-unes des propriétés les plus couramment utilisées avec Flexbox qui sont applicables seulement à l'élément parent:
A) flex-direction :
Cette propriété permet de spécifier la direction des éléments dans le conteneur. Les valeurs possibles sont :
_a)le row_ _(en Français ligne):cette valeur fait en sorte que les éléments soient placés horizontalement, il y en a deux types avec les rows qui sont:
"row" : constituant la valeur par défaut de cette propriété flex-direction;
"row-reverse":comme son nom l'indique c'est-à-dire les éléments sont placés en ligne mais dans un ordre inverser;
Le column(en Français colonne):cette valeur fait en sorte que les éléments soient placés verticalement, comme avec les rows il y en a deux types aussi avec les colonnes qui sont:
"column":les éléments seront placés en colonnes
"column-reverse":c'est-à-dire les éléments sont placés en colonne mais dans un ordre inverser .
EXEMLPE DE LA PREMIERE PROPRIETE QUI EST LE FLEX DIRECTION
<body>
<div class="contenaire">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
</body>
LE CSS
.contenaire{
background-color: aliceblue;
display: flex;
flex-direction : row ; /*mettre à la ligne qui est la valeur par defaut*/
flex-direction :row-revser;/* mettre à la ligne mais dans un ordre inverser*/
flex-direction :column ;/* mettre en colonne*/
flex-direction : column-reverse;
}
B) justify-content
Cette propriété permet d'aligner les éléments horizontalement dans le conteneur. Les valeurs possibles incluent sont:
"_a)flex-start": constituant la valeur par défaut de la propriété justify-content;
"b)flex-end_": comme son nom l'indique il place l'élément à gauche dépendamment de la propriété Flex-direction qui a été définie;
"c)center": cette valeur alligne les éléménts au centre du conteneur
"d)space-between":cette valeur permet de créer des espaces entre les lignes;
"e)space-around" cette valeur permet de mettre l'espace au début, au milieu et à la fin de ligne.
EXEMPLE SUR LE JUSTIFIER CONTENT
Notons que notre code html reste le même;
LE CSS
.contenaire{
background-color: aliceblue;
display: flex;
justify-content:flex-start;/*constituant la valeur par défaut*/
justify-content:flex-end;/*alignement à gauche de la ligne*/
justify-content:center; /*alignement au centre de la ligne*/
justify-content:space-between; /*alignement avec création de l'espace au début, au milieu et à la fin de la ligne*/
justify-content:space-between; /*alignement avec création de l'espace entre la ligne*/
}
C) align-items
Contrairement à Justify-content cette propriété permet d'aligner les éléments verticalement dans le conteneur. Les valeurs possibles sont:
"a)flex-start": considéré comme la valeur par défaut de cette propriété;
"b)flex-end": la valeur alignant des éléments à la fin de la colonne ;
"c)center": alignant les éléments au centre du conteneur;
"d)baseline":cette valeur aligne les éléments flexibles tels que leurs lignes de base s'alignent;
"f)stretch": cette valeur étire les éléments pour remplir tout l'espace vertical.
EXEMPLE SUR LE JUSTIFIER CONTENT
Avec toujours notre code html;
LE CSS
.contenaire{
background-color: aliceblue;
display: flex;
flex-direction: column;
align-items: flex-start;/* la valeur par défaut*/
align-items: flex-end;/*alignant les élément à gauche de la colonne*/
align-items: center;/*alignant les éléments au centre de la colonne*/
align-items: baseline;/*alignant les éléments en tenant compte de la ligne soit celle de haut ou celle de bas*/
align-items: strech;/*étire tous les éléments vérticlement*/
}
D) flex-wrap
Cette propriété permet de gérer le comportement des éléments lorsque la largeur du conteneur parent est insuffisante pour les contenir tous sur une seule ligne (ou colonne). il y en a deux valeurs possibles qui sont:
"a)nowrap_": la valeur par défaut de cette propriété;
"b)wrap" : la valeur spécifiant si les éléments vont s'enrouler ou s'envelopper entre eux ;
"c) wrap-reverse": s'exécute comme wrap à la différence ou le reverse inverse l'ordre.
EXEMPLE SUR LE JUSTIFIER CONTENT
Notons que notre code html reste le même;
LE CSS
.contenaire{
background-color: aliceblue;
display: flex;
flex-wrap: nowwrap;/*la valeur par défaut*/
flex-wrap: wrap;/*cette valeur enroule les éléments entre eux*/
flex-wrap: noww-reverse;/*cette valeur enroule les éléments entre eux mais dans un ordre inversé*/
}
Ces propriétés ne représentent qu'un aperçu des nombreuses fonctionnalités proposées par Flexbox. Il est important d'explorer davantage pour découvrir toutes ses possibilités.
En plus des propriétés de mise en page, Flexbox propose également des propriétés pour ajuster et modifier la taille des éléments, tels que "flex-grow", "flex-shrink" et*_ "flex-basis"_*. Ces propriétés permettent d'optimiser l'espace disponible et de contrôler les ajustements automatiques en cas de redimensionnement de l'écran ou du conteneur.
Notons que ces propriétés ci-haut sont uniquement applicables au conteur qui constitue l'élément parent, nous allons alors essayer de parler des quelques propriétés applicables uniquement sur les items ou les enfants.
** "1.Order" **: Cette propriété spécifie l'ordre des éléments flexibles c'est-à-dire l'ordre des enfants dans le parents;
_2.Le flex-grow _: cette propriété spécifie la croissance d'un élément enfant par rapport au reste des ces éléments enfants toute en lui attribuant une croissance par rapport à la valeur donnée;
*"3.Le flex-shrink" *: elle spécifie de combien un élément flexible rétrécira par rapport au reste des éléments flexibles;
4.Le flex-basis :cette propriété spécifie la longueur initiale d'un élément flexible.
"5.Align-self": la propriété spécifie l'alignement de l'élément sélectionné à l'intérieur du conteneur flexible.
EXEMPLE SUR LES PROPRIETES APPLIQUEES AUX ENFANTS
<body>
<div class="contenaire">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
</div>
</body>
LE CSS
.contenaire{
background-color: aliceblue;
display: flex;
flex-wrap: wrap;
}
.contenaire>div
{
background-color: gainsboro;
font-size: 50px
}
.item1{
order: 2;
}/* ici notre premier div sera placé à la première positon*/
.item2{
flex-grow: 1;
}/*ici notre deuxième div va grandir en prenant toute l'espace restante du conteneur*/
.item3{
flex-shrink: 2;
}/* le div 3 aura un volume de plus que les autres*/
En conclusion, CSS Flexbox est une technique puissante et efficace pour créer des mises en page flexibles et adaptables. Elle permet aux développeurs d'aligner et de structurer les éléments d'une page web de manière intuitive, réduisant ainsi le besoin de calculer des dimensions spécifiques ou d'utiliser des hacks complexes.
Si vous êtes intéressé par l'utilisation de Flexbox, il existe de nombreux tutoriels et ressources en ligne pour vous aider à approfondir vos connaissances. Alors, n'hésitez pas à vous plonger dans le monde flexible et pratique de CSS Flexbox et à commencer à créer des mises en page modernes et dynamiques pour vos sites web !
Top comments (0)