Crea layout Flexbox perfetti
Visualizza, personalizza e genera codice CSS flexbox con la nostra intuitiva interfaccia drag-and-drop.
Proprietà del contenitore
Proprietà dell'elemento
Preview
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; } .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
Preset Flexbox popolari
Centra orizzontalmente e verticalmente
Perfetto per centrare un logo, un pulsante o qualsiasi elemento sia orizzontalmente che verticalmente.
Spaziatura uguale
Crea una spaziatura uguale tra gli elementi con space-between o space-around.
Menu verticale
Crea un menu di navigazione verticale con spaziatura e allineamento coerenti.
Griglia reattiva
Crea un layout a griglia reattivo che avvolge gli elementi in base allo spazio disponibile.
Stendardo dell'eroe
Titolo principale
Sezione eroi con invito all'azione
Progetta un banner hero con titolo, sottotitolo e un pulsante di invito all'azione.
Layout piè di pagina
Company
About Us
Careers
Support
Centro assistenza
Contattaci
© Generatore Flexbox 2023
Crea un piè di pagina reattivo con colonne che si impilano su schermi più piccoli.
Esempi del mondo reale
Barra di navigazione
Un layout comune della barra di navigazione con logo a sinistra, voci di menu al centro e un'icona del carrello a destra.
Card Grid
Titolo della carta
Testo della descrizione della carta qui
Titolo della carta
Testo della descrizione della carta qui
Titolo della carta
Testo della descrizione della carta qui
Una griglia di schede reattiva che si adatta a diverse dimensioni dello schermo utilizzando le proprietà flexbox.
Layout dell'articolo
Titolo dell'articolo
Pubblicato il 1 gennaio 2023 · 5 minuti di lettura
Contenuto dell'articolo qui. Potrebbe trattarsi di un breve riassunto o del testo completo dell'articolo. Flexbox aiuta ad allineare l'immagine e il testo in modo visivamente accattivante.
Un layout di articolo comune con un'immagine a sinistra e un contenuto di testo a destra, impilato su dispositivi mobili.
Layout del cruscotto
Un layout della dashboard con intestazione, barra laterale, area del contenuto principale e piè di pagina utilizzando flexbox per l'allineamento orizzontale e verticale.
Nozioni fondamentali su Flexbox
Che cos'è Flexbox?
Flexible Box Layout, comunemente noto come Flexbox, è un modello di layout CSS3 che fornisce un modo efficiente per distribuire e allineare lo spazio tra gli elementi in un contenitore, anche quando le loro dimensioni sono sconosciute o dinamiche.
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).
Concetti chiave:Flexbox introduce due concetti principali: ilcontenitore flessibile and the Articoli flessibili. Il contenitore è l'elemento padre e gli elementi sono i relativi figli diretti.
Asse principale vs asse trasversale
I layout Flexbox si basano su due assi: ilmain axis and the Asse trasversale.
-
Asse principale:L'asse primario lungo il quale sono disposti gli elementi flessibili. Definito da
flex-direction. - Asse trasversale:L'asse perpendicolare all'asse principale. La sua direzione dipende dalla direzione dell'asse principale.
Proprietà del contenitore
| Property | Description |
|---|---|
display |
Definisce un contenitore flessibile; in linea o a blocchi a seconda del valore dato. |
flex-direction |
Stabilisce l'asse principale, definendo così la direzione in cui gli elementi flessibili vengono posizionati nel contenitore flessibile. |
flex-wrap |
Per impostazione predefinita, gli elementi flessibili cercheranno di adattarsi a una riga. È possibile modificare questa impostazione e consentire il wrapping degli elementi in base alle esigenze con questa proprietà. |
justify-content |
Allinea gli elementi flessibili lungo l'asse principale della linea corrente del contenitore flessibile. |
align-items |
Allinea gli elementi flessibili lungo l'asse trasversale della linea corrente del contenitore flessibile. |
align-content |
Allinea le linee di un contenitore flessibile all'interno quando c'è spazio extra nell'asse trasversale. |
Proprietà dell'elemento
| Property | Description |
|---|---|
order |
Per impostazione predefinita, gli elementi flessibili sono disposti nell'ordine di origine. Tuttavia, ilordercontrolla l'ordine in cui vengono visualizzati nel contenitore Flex. |
flex-grow |
Definisce la capacità di un elemento flessibile di crescere, se necessario. Accetta un valore senza unità che funge da proporzione. |
flex-shrink |
Definisce la possibilità per un elemento flessibile di ridursi, se necessario. |
flex-basis |
Definisce le dimensioni iniziali di un elemento flessibile prima che lo spazio disponibile venga distribuito in base ai fattori di flessibilità. |
align-self |
Consente l'allineamento predefinito (o quello specificato daalign-items) da sostituire per i singoli elementi flessibili. |
Related Tools
Abbellitore CSS
Formatta e abbellisci il tuo codice CSS con precisione professionale
Convertitore da stilo a CSS
Trasforma il tuo codice SCSS in CSS. Veloce, facile e sicuro.
Convertitore da SCSS a CSS
Trasforma il tuo codice SCSS in CSS. Veloce, facile e sicuro.
Convertitore da parola a numero
Converti i numeri scritti nei loro equivalenti numerici in più lingue
Calcolatore dell'età
Calcola la tua età esatta in anni, mesi e giorni con il nostro calcolatore di età preciso.
Converti il testo in slug SEO-friendly
Trasforma qualsiasi testo in uno slug compatibile con gli URL, perfetto per URL, nomi di file e altro ancora.