3.1 Flexbox
Creare layout flessibili usando Flexbox e Grid è una tecnica chiave nello sviluppo di siti web responsive moderni. Queste tecnologie permettono di gestire facilmente la disposizione degli elementi sulla pagina, assicurando l'adattamento a diverse dimensioni di schermi e dispositivi.
Flexbox (Flexible Box Layout Module) è pensato per il posizionamento unidimensionale degli elementi (sia in riga che in colonna). Flexbox semplifica la creazione di layout flessibili e responsive.
Concetti fondamentali del Flexbox:
- Flex-container: l'elemento a cui si applica la proprietà
display: flex - Flex-elementi: gli elementi figli del flex-container che vengono posizionati al suo interno
Proprietà del Flexbox
Flex-container:
display: flex: definisce l'elemento come un flex-containerflex-direction: imposta la direzione di disposizione degli elementi flex (row,column,row-reverse,column-reverse)justify-content: gestisce l'allineamento degli elementi flex lungo l'asse principale (flex-start,flex-end,center,space-between,space-around)align-items: gestisce l'allineamento degli elementi flex lungo l'asse trasversale (stretch,flex-start,flex-end,center,baseline)
Flex-elementi:
flex-grow: definisce la capacità dell'elemento di aumentare di dimensioni se c'è spazio disponibileflex-shrink: definisce la capacità dell'elemento di ridursi di dimensioni se lo spazio è insufficienteflex-basis: imposta la dimensione iniziale dell'elemento prima della distribuzione dello spazio liberoalign-self: sovrascrive l'allineamento dell'elemento lungo l'asse trasversale, impostato inalign-items
Esempio di utilizzo di Flexbox
Creiamo un layout con tre colonne che si adatta a diverse dimensioni di schermo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio Flexbox</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
}
.flex-item {
flex: 1 1 200px;
margin: 10px;
padding: 20px;
background-color: #f4f4f4;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Colonna 1</div>
<div class="flex-item">Colonna 2</div>
<div class="flex-item">Colonna 3</div>
</div>
</body>
</html>
Spiegazione del codice:
-
.flex-container: definisce il contenitore come un flex-container, allinea gli elementi con spazi uguali tra di loro e permette agli elementi di andare a capo se lo spazio è insufficiente -
.flex-item: gli elementi flex che occupano uno spazio equivalente, hanno una larghezza minima di 200px e sono distribuiti equamente all'interno del contenitore
3.2 CSS Grid
CSS Grid Layout è un sistema di layout bidimensionale che permette di creare layout complessi utilizzando righe e colonne.
Concetti fondamentali del CSS Grid:
- Grid-container: l'elemento a cui si applica la proprietà
display: grid - Grid-elementi: gli elementi figli del grid-container che vengono posizionati nella griglia
Proprietà del CSS Grid
Grid-container:
display: grid: definisce l'elemento come un grid-containergrid-template-columns: imposta il numero e le dimensioni delle colonne nella grigliagrid-template-rows: imposta il numero e le dimensioni delle righe nella grigliagap: gestisce gli spazi tra righe e colonnejustify-items: gestisce l'allineamento orizzontale degli elementi gridalign-items: gestisce l'allineamento verticale degli elementi grid
grid-column: definisce quante colonne l'elemento deve occuparegrid-row: definisce quante righe l'elemento deve occuparejustify-self: sovrascrive l'allineamento orizzontale dell'elementoalign-self: sovrascrive l'allineamento verticale dell'elemento
Grid-elementi:
Esempio di utilizzo di CSS Grid
Creiamo un layout con tre colonne e due righe che si adatta a diverse dimensioni di schermo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio CSS Grid</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
padding: 20px;
background-color: #e4e4e4;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Elemento 1</div>
<div class="grid-item">Elemento 2</div>
<div class="grid-item">Elemento 3</div>
<div class="grid-item">Elemento 4</div>
<div class="grid-item">Elemento 5</div>
<div class="grid-item">Elemento 6</div>
</div>
</body>
</html>
Spiegazione del codice:
.grid-container: definisce il contenitore come un grid-container con tre colonne e due righe, ogni elemento occupa uno spazio equivalente.grid-item: gli elementi grid con spaziature uniformi e sfondo
GO TO FULL VERSION