Layout Flexbox comuni: nav, card e media object
Crei barre di navigazione, griglie di card e media object pratici utilizzando flexbox.
Layout Flexbox comuni: nav, card e media object è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Perché gli schemi Flexbox sono importanti
Alcuni schemi di layout ricorrono in quasi tutti i progetti web. Flexbox li risolve in modo efficace con una quantità minima di CSS. Conoscere questi schemi significa sviluppare più rapidamente e scrivere meno codice.
Schema della barra di navigazione
Una barra di navigazione orizzontale con il logo a sinistra e i link a destra:
<nav class="navbar">
<span class="logo">Brand</span>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
</div>
</nav>
Sezione hero centrata
Contenuto centrato a tutta altezza con Flexbox:
<div class="hero">
<h1>Welcome</h1>
</div>
Griglia di schede
Griglia responsive di schede con disposizione su più righe e spaziature uniformi:
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>
Media object
Il media object, composto da un'immagine di larghezza fissa affiancata da testo flessibile, è uno schema UI fondamentale utilizzato nei commenti, nei post social e negli elementi degli elenchi:
<div class="media">
<img class="media-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="avatar" />
<div class="media-body">
<strong>Jane Doe</strong>
<p>Comment text goes here.</p>
</div>
</div>
Footer fisso in fondo con Flex
Porti il footer in fondo senza impostare altezze fisse:
<main>Main content that grows to fill available space</main>
<footer>Footer</footer>
Pulsante con icona e testo
Icona e testo centrati verticalmente in un pulsante:
<button class="btn">
<svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="currentColor"/></svg>
Download
</button>
Layout Holy Grail con Flexbox
Layout Holy Grail a tre colonne (header, footer, barra laterale-contenuto principale-barra laterale):
<div class="holy-grail">
<div class="left-sidebar">Left</div>
<div class="main-content">Main</div>
<div class="right-sidebar">Right</div>
</div>
Riga di modulo con etichette
Coppie etichetta-input allineate in una riga di modulo:
<div class="form-row">
<label>Email</label>
<input type="email" />
</div>
Galleria di miniature
Una galleria di immagini con disposizione su più righe:
<div class="gallery">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23667eea'/><circle cx='150' cy='150' r='100' fill='%23764ba2'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ffd700'/><circle cx='150' cy='150' r='100' fill='%23ff6347'/></svg>" alt="thumb" />
</div>
Elenco di chip/tag
Chip/tag disposti su più righe e distribuiti come il testo:
<div class="tags">
<span class="tag">CSS</span>
<span class="tag">Flexbox</span>
<span class="tag">Layout</span>
</div>
Verifica rapida
Nello schema media object, che cosa impedisce al corpo del testo di fuoriuscire se contiene una stringa lunga senza punti di interruzione?
Riepilogo
Schemi Flexbox comuni: barra di navigazione (logo + margine automatico + link), hero (colonna + giustificazione centrata), media object (immagine fissa + corpo con flex:1 e min-width:0), footer fisso in fondo (corpo a colonna + main con flex:1), griglia di schede (wrap + flex:1 1 Xpx). Questi cinque schemi coprono la maggior parte delle esigenze di layout nei progetti reali.
Domande Frequenti
La lezione «Layout Flexbox comuni: nav, card e media object» è gratuita?
Sì — il testo completo di «Layout Flexbox comuni: nav, card e media object» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Layout Flexbox comuni: nav, card e media object»?
Crei barre di navigazione, griglie di card e media object pratici utilizzando flexbox. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Layout Flexbox comuni: nav, card e media object»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Override dell'allineamento dei flex item con align-self
- Proprietà order e riordinamento visivo
- Pattern della sintassi abbreviata flex
- Layout Flexbox comuni: nav, card e media object