10.1 Griglia semplice
Flexbox permette di creare layout flessibili e adattivi. Ora vedremo alcuni esempi di utilizzo di Flexbox per creare vari layout, tra cui una griglia semplice, il centramento degli elementi, la creazione di menu di navigazione e schede di prodotto.
Creazione di una griglia semplice utilizzando Flexbox. Questo esempio dimostra come sia facile creare elementi distribuiti uniformemente in un contenitore.
Esempio di utilizzo:
.flex-container {
display: flex;
flex-wrap: wrap; /* Permette agli elementi di andare a capo */
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); /* Distribuzione flessibile dello spazio */
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): definisce la dimensione iniziale dell'elemento prima che venga applicato qualsiasi stretching o shrinking. In questo caso, l'elemento occuperà il 33.333% della larghezza del contenitore meno 40 pixel. calc() permette di eseguire calcoli direttamente in CSS.
10.2 Centratura degli elementi
Centratura degli elementi orizzontalmente e verticalmente in un contenitore utilizzando Flexbox.
Esempio di utilizzo:
.flex-container {
display: flex;
justify-content: center; /* Centratura orizzontale */
align-items: center; /* Centratura verticale */
height: 100vh; /* Altezza del contenitore a schermo intero */
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 di navigazione
Creazione di un menu di navigazione orizzontale utilizzando Flexbox.
Esempio di utilizzo:
.nav-container {
display: flex;
justify-content: space-around; /* Distribuzione degli elementi con spazi uguali */
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 Schede di prodotto
Creazione del layout delle schede di prodotto utilizzando Flexbox.
Esempio di utilizzo:
.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">Prodotto 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">Prodotto 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">Prodotto 3</h3>
<p class="product-price">$89.99</p>
</div>
</div>
Spiegazione del codice:
.product-list: Contenitore flex con supporto per il wrapping e spazi tra le schede prodotto.product-item: Elementi flex (schede prodotto) con larghezza fissa che si adattano automaticamente alla dimensione del contenitore
GO TO FULL VERSION