Scribd
Importer
156 vues2 pages

Présentation de Flexbox en CSS 1

Ce document introduit Flexbox, une technique de mise en page CSS qui permet de concevoir des mises en page complexes de manière plus efficace et flexible. Il explique les principes fondamentaux de Flexbox comme les conteneurs flex, les axes principaux et transversaux, et les propriétés d'alignement. Le document souligne également les avantages de Flexbox comme la simplicité et la réactivité.

Transféré par

Mehdi sk
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
156 vues2 pages

Présentation de Flexbox en CSS 1

Ce document introduit Flexbox, une technique de mise en page CSS qui permet de concevoir des mises en page complexes de manière plus efficace et flexible. Il explique les principes fondamentaux de Flexbox comme les conteneurs flex, les axes principaux et transversaux, et les propriétés d'alignement. Le document souligne également les avantages de Flexbox comme la simplicité et la réactivité.

Transféré par

Mehdi sk
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

Flexbox

Introduction
Bonjour à tous,
Aujourd'hui, nous allons plonger dans l'univers de Flexbox, une technique de mise en page qui
révolutionne la manière dont nous structurons nos pages web en utilisant CSS. Flexbox, ou "Flexible
Box", est un modèle de disposition qui permet de concevoir des mises en page complexes de manière
plus efficace et flexible.
Qu'est-ce que Flexbox ?
Flexbox est un module de mise en page CSS qui offre un moyen plus efficace de concevoir, aligner et
distribuer l'espace entre les éléments d'un conteneur, même lorsqu'ils ont une taille dynamique ou
inconnue. Il est particulièrement utile pour créer des interfaces utilisateur responsives et des designs
adaptables à différentes tailles d'écrans.
Principes fondamentaux
1. Conteneur Flex
Pour utiliser Flexbox, il faut déclarer un conteneur comme un conteneur flex en utilisant la propriété
display: flex;. Cela transforme automatiquement tous les enfants directs de ce conteneur en éléments
flexibles.
cssCopy code
.container {
display: flex;
}

2. Axes principaux et transversaux


Flexbox fonctionne avec deux axes : l'axe principal et l'axe transversal. Par défaut, l'axe principal est
horizontal, mais cela peut être modifié avec la propriété flex-direction.
cssCopy code
.container {
flex-direction: row | row-reverse | column | column-reverse;
}

3. Alignement et justification
Les propriétés comme justify-content et align-items permettent de contrôler l'alignement des éléments
le long de l'axe principal et transversal.
cssCopy code
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
align-items: stretch | flex-start | flex-end | center | baseline;
}
4. Ordre des éléments
Flexbox permet de réorganiser l'ordre des éléments visuels sans changer l'ordre dans le code source avec
la propriété order.
cssCopy code
.item {
order: <nombre>;
}

Avantages de Flexbox
Simplicité: Flexbox simplifie la création de mises en page complexes qui étaient autrefois difficiles à
réaliser avec d'autres méthodes.
Réactivité: Il facilite la création de mises en page réactives sans avoir besoin de recourir à des outils
complexes.
Conclusion
En conclusion, Flexbox est un outil puissant qui offre un contrôle précis sur la disposition des éléments
dans une page web. En l'adoptant, vous pouvez simplifier votre code, rendre votre mise en page plus
réactive et améliorer l'expérience utilisateur de vos sites web.
Merci de votre attention, et n'hésitez pas à explorer les nombreuses autres fonctionnalités que Flexbox a
à offrir !

Vous aimerez peut-être aussi