Tous les cours > L'informatique > Programmation web ::

FlexBox en CSS

Page 28 | Écouter en audio

Flexbox est une technique de mise en page CSS qui vous permet de créer des conceptions réactives et flexibles pour les sites Web et les applications. Avec Flexbox, vous pouvez positionner des éléments sur une page plus facilement et plus efficacement, sans avoir à recourir à des hacks ou astuces CSS.

L'un des principaux avantages de Flexbox est sa capacité à adapter la mise en page en fonction de la taille de l'écran. Avec Flexbox, vous pouvez créer des conceptions optimisées pour les mobiles, les tablettes et les ordinateurs de bureau sans avoir à créer des mises en page distinctes pour chaque taille d'écran.

Pour utiliser Flexbox sur un site Web ou une application, vous devez comprendre certains concepts de base. Le premier est le concept de conteneur et d'articles. Le conteneur est l'élément qui contient les éléments qui seront positionnés à l'aide de la Flexbox. Les éléments sont les éléments qui seront positionnés à l'intérieur du conteneur.

Pour définir un conteneur comme conteneur Flexbox, il est nécessaire d'utiliser la propriété display avec la valeur flex. Par exemple :

<div class="container">
  <div class="item">Élément 1</div>
  <div class="item">Élément 2</div>
  <div class="item">Élément 3</div>
</div>

.récipient {
  affichage : flexible ;
}

Dans cet exemple, le div avec la classe de conteneur est défini comme un conteneur Flexbox à l'aide de la propriété display avec la valeur flex. À l'intérieur de ce conteneur, il y a trois divs avec un élément de classe, qui seront positionnés à l'aide de Flexbox.

Une fois le conteneur défini comme conteneur Flexbox, il est possible d'utiliser d'autres propriétés CSS pour positionner les éléments dans le conteneur. Certaines des propriétés les plus courantes sont :

justify-content : définit comment les éléments seront alignés horizontalement dans le conteneur ;
align-items : définit comment les éléments seront alignés verticalement dans le conteneur ;
flex-direction : définit la direction dans laquelle les éléments seront positionnés à l'intérieur du conteneur ;
flex-wrap : définit si les éléments doivent être enveloppés dans des lignes lorsqu'il n'y a plus d'espace disponible dans le conteneur ;
flex-grow : définit le taux de croissance des éléments par rapport aux autres éléments du conteneur.

Par exemple, pour aligner les éléments horizontalement au centre du conteneur, vous pouvez utiliser la propriété justifier-content avec le centre de valeur :

.container {
  affichage : flexible ;
  justifier-contenu : centrer ;
}

Avec Flexbox, vous pouvez également définir la taille des éléments de manière plus flexible. Par exemple, vous pouvez définir la taille d'un élément sous forme de pourcentage de la taille du conteneur à l'aide de la propriété flex-basis. Il est également possible de définir la taille de l'élément en tant que rapport aux autres éléments à l'aide de la propriété flex-grow.

En résumé, Flexbox est une technique puissante pour créer des mises en page CSS réactives et flexibles. Avec Flexbox, vous pouvez positionner des éléments sur une page plus facilement et plus efficacement, sans avoir à recourir à des hacks ou astuces CSS. Pour utiliser Flexbox sur un site Web ou une application, vous devez comprendre certains concepts de base et utiliser les bonnes propriétés CSS pour positionner les éléments dans le conteneur.

Répondez maintenant à l’exercice sur le contenu :