Maison >interface Web >tutoriel CSS >Examen approfondi de CSS Flexbox
Dans cette conférence, nous approfondirons CSS Flexbox, un outil de mise en page puissant qui vous aide à concevoir des mises en page réactives et flexibles. Vous apprendrez à utiliser Flexbox pour aligner, distribuer et ordonner efficacement les éléments, rendant ainsi votre conception plus adaptative sur tous les appareils.
Flexbox, abréviation de « Flexible Box Layout », est un module de mise en page CSS qui facilite la conception de mises en page pouvant s'adapter à différentes tailles d'écran. Il permet d'organiser de manière flexible les éléments dans un conteneur, en les alignant dynamiquement en fonction de l'espace disponible.
Avant de commencer à utiliser Flexbox, comprenons ses principaux composants :
Vous activez Flexbox en définissant display: flex sur le conteneur.
.flex-container { display: flex; }
Maintenant, les éléments enfants à l'intérieur de .flex-container se comporteront conformément aux règles Flexbox.
flex-direction contrôle la direction dans laquelle les éléments flexibles sont placés dans le conteneur. Par défaut, les éléments sont placés dans une rangée.
Valeurs :
Exemple :
.flex-container { display: flex; flex-direction: row; /* You can change to column */ }
justify-content est utilisé pour aligner les éléments flexibles le long de l'axe principal (horizontal si direction flexible : ligne ; vertical si direction flexible : colonne).
Valeurs :
Exemple :
.flex-container { justify-content: center; }
Dans cet exemple, les éléments à l'intérieur du conteneur flexible seront centrés.
align-items aligne les éléments flexibles le long de l'axe transversal (perpendiculaire à l'axe principal).
Valeurs :
Exemple :
.flex-container { align-items: center; }
Par défaut, les éléments flexibles sont placés sur une seule ligne et le contenu peut être réduit pour s'adapter. flex-wrap permet aux éléments flexibles de s'enrouler sur plusieurs lignes si nécessaire.
Valeurs :
Exemple :
.flex-container { flex-wrap: wrap; }
align-content aligne plusieurs lignes d'éléments flexibles le long de l'axe transversal. Il est utilisé lorsque le conteneur dispose d'un espace supplémentaire dans l'axe transversal et qu'il y a plusieurs rangées d'éléments flexibles.
Valeurs :
Exemple :
.flex-container { align-content: space-between; }
Créons une galerie de photos réactive à l'aide de Flexbox.
HTML :
<div class="gallery"> <div class="gallery-item">Image 1</div> <div class="gallery-item">Image 2</div> <div class="gallery-item">Image 3</div> <div class="gallery-item">Image 4</div> <div class="gallery-item">Image 5</div> </div>
CSS :
body { margin: 0; font-family: Arial, sans-serif; } .gallery { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 10px; padding: 20px; } .gallery-item { flex-basis: calc(25% - 20px); /* Four items per row */ background-color: #ddd; padding: 20px; text-align: center; } @media screen and (max-width: 768px) { .gallery-item { flex-basis: calc(50% - 20px); /* Two items per row on smaller screens */ } }
Dans cet exemple :
Flexbox is a powerful tool for responsive design. You can easily adjust the layout by changing flex properties based on the screen size using media queries.
@media screen and (max-width: 600px) { .gallery-item { flex-basis: 100%; /* Items take up full width on small screens */ } }
With this media query, on screens smaller than 600px, each gallery item will take up the full width of the container.
Next Up: In the next lecture, we’ll explore CSS Grid - A Deep Dive, where you’ll learn about CSS Grid and how it compares to Flexbox for building complex layouts. Stay tuned!
Ridoy Hasan
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!