10.1 Grille simple
Flexbox permet de créer des mises en page flexibles et adaptatives. Maintenant, nous allons examiner quelques exemples d'utilisation de Flexbox pour créer différentes mises en page, y compris une grille simple, le centrage d'éléments, la création de menus de navigation et de cartes de produits.
Création d'une grille simple en utilisant Flexbox. Cet exemple montre comment créer facilement des éléments uniformément répartis dans un conteneur.
Exemple d'utilisation :
.flex-container {
display: flex;
flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante */
background-color: lightgrey;
padding: 10px;
}
.flex-item {
background-color: deepskyblue;
margin: 10px;
padding: 20px;
color: white;
font-size: 20px;
flex: 1 1 calc(33.333% - 40px); /* Répartition flexible de l'espace */
box-sizing: border-box;
}
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
<div class="flex-item">Item 6</div>
</div>
flex-basis: calc(33.333% - 40px): détermine la taille initiale d'un élément avant que tout étirement ou contraction ne soit appliqué. Dans ce cas, l'élément occupera 33,333% de la largeur du conteneur moins 40 pixels. calc() permet de faire des calculs directement en CSS.
10.2 Centrage des éléments
Centrage des éléments horizontalement et verticalement dans un conteneur utilisant Flexbox.
Exemple d'utilisation :
.flex-container {
display: flex;
justify-content: center; /* Centrage horizontal */
align-items: center; /* Centrage vertical */
height: 100vh; /* Hauteur du conteneur sur toute la page */
background-color: lightgrey;
}
.flex-item {
background-color: deepskyblue;
padding: 20px;
color: white;
font-size: 20px;
}
<div class="flex-container">
<div class="flex-item">Centered Item</div>
</div>
10.3 Menu de navigation
Création d'un menu de navigation horizontal en utilisant Flexbox.
Exemple d'utilisation :
.nav-container {
display: flex;
justify-content: space-around; /* Distribution des éléments avec des espaces égaux */
background-color: #333;
padding: 10px;
}
.nav-item {
color: white;
text-decoration: none;
padding: 10px 20px;
}
.nav-item:hover {
background-color: #575757;
}
<div class="nav-container">
<a href="#" class="nav-item">Home</a>
<a href="#" class="nav-item">About</a>
<a href="#" class="nav-item">Services</a>
<a href="#" class="nav-item">Contact</a>
</div>
10.4 Cartes de produits
Création d'une mise en page de cartes de produits en utilisant Flexbox.
Exemple d'utilisation :
.product-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.product-item {
flex: 1 1 calc(33.333% - 40px);
border: 1px solid #ccc;
padding: 20px;
background-color: #fff;
text-align: center;
}
.product-item img {
max-width: 100%;
height: auto;
}
.product-title {
font-size: 1.2em;
margin: 10px 0;
}
.product-price {
font-size: 1.5em;
color: #e74c3c;
}
<div class="product-list">
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product Image">
<h3 class="product-title">Produit 1</h3>
<p class="product-price">$99.99</p>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product Image">
<h3 class="product-title">Produit 2</h3>
<p class="product-price">$79.99</p>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product Image">
<h3 class="product-title">Produit 3</h3>
<p class="product-price">$89.99</p>
</div>
</div>
Explication du code :
.product-list: Conteneur Flex avec prise en charge du renvoi à la ligne et des espaces entre les cartes de produits.product-item: Éléments Flex (cartes de produits) avec une largeur fixe, qui s'adaptent automatiquement à la taille du conteneur
GO TO FULL VERSION