In questa lezione affronteremo i seguenti argomenti:
• Comprendere il concetto di Flexbox in CSS3.
• Apprendere come utilizzare Flexbox per creare layout flessibili e responsive.
• Conoscere i principali concetti di container e oggetti flessibili.
Introduzione a Flexbox
Flexbox è un layout modello che consente di progettare layout complessi e flessibili in maniera più efficiente rispetto ai tradizionali modelli di layout.
Layout Flessibili con Container e Oggetti
Il container flex (elemento padre) è dichiarato utilizzando display: flex;.
Gli elementi figlio diventano automaticamente oggetti flessibili all'interno del container.
/* Dichiarazione del container flex */
.flex-container {
display: flex;
justify-content: space-between; /* Allinea gli oggetti flessibili lungo l'asse principale */
align-items: center; /* Allinea gli oggetti flessibili lungo l'asse trasversale */
}
/* Dichiarazione degli oggetti flessibili */
.flex-item {
flex: 1; /* Distribuisce lo spazio disponibile in modo uniforme tra gli oggetti flessibili */
}
Allineamento e Ordinamento Flessibile degli Elementi
- justify-content allinea gli oggetti lungo l'asse principale.
- align-items allinea gli oggetti lungo l'asse trasversale.
- flex-direction specifica la direzione in cui gli oggetti sono posizionati nel container.
/* Esempio di allineamento e ordinamento flessibile */
.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column; /* Cambia la direzione dell'asse principale a verticale */
}
Attività Pratica
- Creare un layout flessibile utilizzando Flexbox.
- Sperimentare con le diverse opzioni di allineamento e ordinamento.
- Implementare un layout responsive utilizzando Flexbox.