Cassetta flessibile CSS
1
2
3
4
5
6
7
8
Modulo layout CSS Flexbox
Prima del modulo Flexbox Layout, c'erano quattro modalità di layout:
- Blocca, per le sezioni di una pagina web
- In linea, per il testo
- Tabella, per dati di tabelle bidimensionali
- Posizionato, per la posizione esplicita di un elemento
Il modulo Flexible Box Layout, semplifica la progettazione di una struttura di layout reattiva flessibile senza utilizzare float o posizionamento.
Supporto browser
Le proprietà flexbox sono supportate in tutti i browser moderni.
29.0 | 11.0 | 22.0 | 10 | 48 |
Elementi Flexbox
Per iniziare a utilizzare il modello Flexbox, devi prima definire un contenitore flessibile.
1
2
3
L'elemento sopra rappresenta un contenitore flessibile (l'area blu) con tre elementi flessibili.
Esempio
Un contenitore flessibile con tre elementi flessibili:
<div
class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Imparerai di più sui contenitori flessibili e sugli elementi flessibili nei prossimi capitoli.