4 – Layout con Flexbox
1. Concetti chiave: container e items
Flexbox è un modello di layout CSS pensato per disporre elementi in modo flessibile e responsivo, sia in orizzontale che in verticale.
1.1 Container
display: flex;
1.2 Items
2. Proprietà principali del container Flexbox
| Proprietà |
Valori comuni |
Funzione |
| flex-direction |
row, row-reverse, column, column-reverse |
Direzione principale degli elementi |
| justify-content |
flex-start, flex-end, center, space-between, space-around |
Allineamento lungo l’asse principale |
| align-items |
flex-start, flex-end, center, stretch |
Allineamento lungo l’asse trasversale |
| flex-wrap |
nowrap, wrap, wrap-reverse |
Consente il ritorno a capo degli elementi |
Esempio Container
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
3. Proprietà principali degli items
| Proprietà |
Funzione |
| flex-grow |
Espansione proporzionale |
| flex-shrink |
Riduzione proporzionale |
| flex-basis |
Dimensione base dell’item |
| flex |
shorthand per flex-grow flex-shrink flex-basis |
| align-self |
Allineamento individuale lungo l’asse trasversale |
Esempio Item
.item {
flex: 1 1 200px; /* grow=1, shrink=1, base=200px */
margin: 10px;
padding: 20px;
background-color: lightblue;
text-align: center;
}
4. Creare Navbar e griglie flessibili
4.1 Navbar orizzontale
<nav class="navbar">
<a href="#">Home</a>
<a href="#">Servizi</a>
<a href="#">Contatti</a>
</nav>
.navbar {
display: flex;
justify-content: space-around;
background-color: #333;
padding: 10px;
}
.navbar a {
color: white;
text-decoration: none;
padding: 8px 15px;
}
.navbar a:hover {
background-color: #555;
border-radius: 5px;
}
4.2 Griglia flessibile
.grid {
display: flex;
flex-wrap: wrap;
gap: 15px; /* distanza tra items */
}
.grid-item {
flex: 1 1 200px; /* dimensione minima 200px, cresce se possibile */
padding: 20px;
background-color: #a2d5f2;
text-align: center;
border-radius: 8px;
}
5. Esercizio svolto: layout a 3 colonne responsive
Obiettivo
Creare un layout con 3 colonne che si ridimensionano in base alla larghezza dello schermo.
HTML
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Layout Flexbox 3 colonne</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<div class="container">
<div class="item">Colonna 1</div>
<div class="item">Colonna 2</div>
<div class="item">Colonna 3</div>
</div>
</body>
</html>
CSS (stile.css)
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f2f2f2;
}
.container {
display: flex;
flex-wrap: wrap; /* ritorno a capo su schermi piccoli */
justify-content: space-between;
gap: 20px; /* distanza tra colonne */
}
.item {
flex: 1 1 30%; /* cresce, si riduce, base 30% del container */
padding: 20px;
background-color: #4fa3f2;
color: white;
text-align: center;
border-radius: 10px;
}
/* Responsive: su schermi piccoli le colonne diventano a tutta larghezza */
@media (max-width: 768px) {
.item {
flex: 1 1 100%;
}
}
Risultato
-
Tre colonne affiancate su desktop.
-
Si ridimensionano automaticamente su tablet o mobile.
-
Spaziatura uniforme tra le colonne grazie a gap.
-
Bordi arrotondati e sfondo colorato per estetica.
Commenti
Posta un commento