lunedì 17 febbraio 2025

Corso di CSS & Web Design: 4 – Layout con Flexbox

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

L’elemento genitore diventa contenitore flessibile con:

display: flex;

Proprietà principali del container:
- flex-direction: direzione principale degli elementi (row, row-reverse, column, column-reverse).
- justify-content: allineamento lungo l’asse principale (flex-start, center, space-between, space-around).
- align-items: allineamento lungo l’asse trasversale (flex-start, center, stretch, baseline).
- flex-wrap: gestione del ritorno a capo (nowrap, wrap, wrap-reverse).

1.2 Items

Elementi figli (items) del container:
- flex-grow: capacità di espandersi rispetto agli altri elementi.
- flex-shrink: capacità di ridursi.
- flex-basis: dimensione iniziale preferita.
- align-self: sovrascrive l’allineamento lungo l’asse trasversale per un singolo item.

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

Container flessibile con items che si adattano allo spazio:

.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.

SILICIO E NUVOLE