L'incredibile potenza di flexbox

Sep 17, 2025
Come si fa

FlexBox, o il layout della casella flessibile, è un potente modulo di layout CSS che offre ai web designer e agli sviluppatori un modo efficiente e semplice per stabilire, allineare e distribuire elementi in un contenitore. Risolve molti problemi di layout che abbiamo lottato per risolvere per molto tempo.

Flexbox Basics.

Nella sua forma più semplice, FlexBox è composta da due elementi: un contenitore flessibile (o genitore flessibile) e elementi flessibili (flitti fluidi). Un contenitore flessibile è un elemento contenente (come a div. ) Data la proprietà del display flettere . Gli elementi flessibili sono elementi figlio di un contenitore flessibile, che possono essere manipolati attraverso varie proprietà di visualizzazione.

Contenitori flessibili e articoli flessibili hanno ciascuno la propria gamma di proprietà che possono essere combinate in diversi modi per creare una gamma di layout complessi. Gli articoli all'interno di un contenitore flessibile possono essere disposti orizzontalmente o verticalmente, allineati e distribuiti in vari modi e stirati o ridotti per adattarsi allo spazio disponibile. Tutte queste opzioni ti consentono di creare facilmente layout reattivi.

Come usare flexbox

Per iniziare a utilizzare FlexBox, è necessario prima creare il contenitore Flex (l'elemento principale che conterrà i tuoi elementi Flex). In questo esempio, useremo a div. bloccare. Prima di stile l'elemento, aggiungiamo altri tre div. Blocchi all'interno del nostro contenitore Flex per fungere da elementi Flex. A questo punto, gli articoli saranno impilati.

Con i nostri pervi del bambino, possiamo impostare la proprietà del display del contenitore genitore a flettere . 

 Contenitore flessibile {
Display: flex;
}

Direzioni di layout

La direzione del layout è semplicemente la direzione che i tuoi elementi si distribuiranno. La direzione predefinita di un contenitore flessibile è riga , che mostrerà gli elementi figlio orizzontalmente. È possibile cambiare il layout in verticale impostando la direzione su colonna . 

 Contenitore flessibile {
Display: flex;
Flex-Direction: Row;
}

Contenitore flessibile {
Display: flex;
Flex-Direction: colonna;
}

Qualunque direzione impostata sul tuo contenitore Flex è indicato come la sua direzione "principale", mentre l'altra direzione non hai scelto diventa la direzione "croce". Pertanto, per impostazione predefinita, la direzione principale sarà orizzontale e la direzione della croce sarà verticale.

FlexBox ti consente anche di invertire il layout. Quando invertito, i bambini di un contenitore Flex saranno disposti a destra a sinistra (se la direzione è riga ) o dal basso verso l'alto (se la direzione è colonna ). 

 Contenitore flessibile {
Display: flex;
Flex-Direction: riga-retromarcia;
}

Contenitore flessibile {
Display: flex;
Flex-Direction: colonna retromarcia;
}

Questo può essere utile se si desidera invertire il layout su schermi più piccoli.

Ad esempio, diciamo su schermi desktop che si desidera visualizzare il testo sul lato sinistro dello schermo e un'immagine a destra (vedere l'immagine di tavola da surf sopra). Su mobile, questo sposterà l'immagine sotto il testo. Inversando la direzione, è possibile assicurarsi che l'immagine venga sopra il testo.

Regolare l'allineamento

Le impostazioni di FlexBox ti offrono anche due diversi metodi per allineare il contenuto: verticalmente e orizzontalmente. Ecco le tue opzioni di allineamento orizzontale per gli articoli all'interno di un contenitore Flex:

Flex-Start. : Elementi impostati verso l'inizio della riga (a sinistra, a meno che tu non abbia invertito il layout)

centro : Articoli centrati all'interno della riga

Flex-end. : Elementi impostati verso la fine della riga (a destra, a meno che tu non abbia invertito il layout)

spazio-mezzo : Elementi uniformemente distribuiti lungo la fila

spazio-intorno : Articoli uniformemente distribuiti lungo la fila, con uno spazio uguale su entrambi i lati di ciascun elemento

Quindi il codice potrebbe sembrare così: 

 Contenitore flessibile {
Display: flex;
Flex-Direction: Row;
Allinea-Content: Flex-Start | Flex-End | Centro |. spazio-tra | Spazio-Around | allungare;
}

Ecco le tue opzioni di allineamento verticale per gli articoli in un contenitore Flex:

Flex-Start. : Articoli allineati nella parte superiore della riga

centro : Gli articoli sono centrati all'interno della riga

Flex-end. : Elementi allineati al fondo della riga

allungare : Articoli allungati attraverso l'altezza della riga

linea di base : Articoli allineati alle loro base (la linea immaginaria che il testo si siede)

Il codice potrebbe sembrare così: 

 Contenitore flessibile {
Display: flex;
Flex-Direction: Row;
Allinea-Articoli: Flex-Start | Flex-End | Centro |. Baseline |. allungare;
}

Per impostazione predefinita, i bambini del contenitore Flex cercano sempre di adattarsi a una singola riga. Se vuoi cambiarlo, puoi aggiungere il involucro attributo. Ciò consente ai bambini di avvolgere a una nuova linea se esauriscono lo spazio. 

 Contenitore flessibile {
Display: flex;
Flex-wrap: wrap;
}

Gli elementi Flex hanno anche le proprie proprietà basate sulla Flex. Quando un elemento viene posizionato all'interno di un contenitore Flex, diventa automaticamente un figlio flessibile e viene concesso il proprio set di stili CSS basati sulla Flex. Questi stili controllano il dimensionamento, l'allineamento e l'ordine di visualizzazione.

Dimensionamento flessibile

I bambini flessibili possono alterare la loro larghezza o altezza (a seconda della direzione del layout del contenitore) per riempire lo spazio disponibile.

WebFLow offre tre opzioni preimpostate per il dimensionamento FLEX: si terrà se necessario, riempire lo spazio vuoto e non si restringe. Si noti che ogni elemento figlio può avere le proprie impostazioni, che consente una pletora di opzioni di progettazione. 

 Flex Item {
Flex-Shrink: & lt; Number & GT ;;
Flex-Grow: & lt; Number & GT ;;
Flex-base: & lt; lunghezza e GT; | auto;
}

Diamo un'occhiata a ciò che ognuna di queste opzioni fa:

  • Riduci se necessario: Taglie l'articolo in base alla sua larghezza / altezza o al suo contenuto. L'articolo non diventerà più grande di quanto necessita, ma potrebbe ridursi alle dimensioni minime per evitare il troppopieno
  • Riempire lo spazio vuoto: Consente all'elemento di espandere per riempire tutto lo spazio disponibile all'interno del suo genitore. Se si imposta su tutti gli elementi in un contenitore Flex, si espanderanno per prendere uguali quantità di spazio vuoto
  • Non restringere: Taglie l'articolo in base alla sua larghezza / altezza o al suo contenuto, ma non lo consente di restringere, anche se ciò causerà il troppopieno

Gli elementi Flex possono anche avere le proprie impostazioni di allineamento, che sovrascrivono l'allineamento predefinito impostato dal loro contenitore Flex genitore. Questi allineamenti si comportano come spiegato in precedenza. 

 Flex Item {
Display: flex;
Flex-Direction: Row;
Allinea-Articoli: Flex-Start | Flex-End | Centro |. Baseline |. allungare;
}

Per impostazione predefinita, gli elementi Flex vengono visualizzati nello stesso ordine in cui appaiono nel codice sorgente. Con FlexBox, è possibile ignorare questo comportamento per garantire che gli elementi display esattamente nell'ordine desiderato.

Le quattro opzioni principali è possibile utilizzare qui:

  • Auto : Il valore predefinito, che ordina gli elementi come sono nella fonte
  • Primo : L'articolo appare prima nel suo contenitore Flex
  • Scorso : L'articolo viene visualizzato per ultimo nel suo contenitore Flex
  • Abitudine : È possibile personalizzare l'ordine che il tuo articolo verrà visualizzato in

L'ordine personalizzato può essere definito come un numero, che specifica l'ordine in cui viene visualizzato l'elemento flessibile all'interno di un contenitore flessibile. 

 Flex Item {
Ordina: & lt; intero & gt ;;
}

Perché dovrei usarlo?

Sono contento che tu abbia chiesto! Usando FlexBox ti consente di creare facilmente layout reattivi che sono stati molto difficili (o impossibili) da creare con i più vecchi moduli di layout CSS.

Dai un'occhiata agli esempi nell'immagine qui sotto - molti dei quali probabilmente hai già visto sul web. Quasi tutti richiederebbero una notevole quantità di CSS (specialmente attraverso diverse dimensioni dello schermo), ma prenderanno solo alcune semplici linee per ottenere con FlexBox. Per vedere questi esempi in azione, visitare flexbox.webflow.com. .

Come si fa - Articoli più popolari

Come Kitbash in movimento con ShaplR3D

Come si fa Sep 17, 2025

(Immagine di immagine: Adam Dewhirst) Shapr3d è un ottimo strumento per kitbashing. Aiuta a colpire letteralmente id..

Come disegnare una persona

Come si fa Sep 17, 2025

Qualunque sia il tipo di artista, capire come disegnare una persona è un'abilità fondamentale. Master la forma umana, e quando è il momento di iniziare ..

Come creare erba 3D

Come si fa Sep 17, 2025

L'erba 3D può essere creata in una varietà di modi diversi ed è una risorsa essenziale per qualsiasi ambiente naturale o rende..

Come nascondere il tuo codice JavaScript dalla sorgente di vista

Come si fa Sep 17, 2025

Se non prendi precauzioni con il tuo codice JavaScript, stai rendendo la vita facile per chiunque voglia clonarlo. Ma se i tuoi p..

Inizia con la ruggine

Come si fa Sep 17, 2025

Pagina 1 di 2: Pagina 1 Pagina 1 Pagina ..

Branding Pro condividere come si ungiscono voce di marca

Come si fa Sep 17, 2025

Quando ti concentri sul lato del design delle cose può essere facile dimenticare quanto è importante un buon copywriting può e..

Come creare Hair in Cinema 4D

Come si fa Sep 17, 2025

Ispirato alla fantastica arte del personaggio di Carlos Ortega Elizalde e Lois van Baarle, ho deciso di provare la mia mano alla ..

Accelerare il flusso di lavoro texture

Come si fa Sep 17, 2025

Il guerriero è un progetto personale che avevo la gioia di concepire e progettare. Volevo creare un personaggio che incarna lo s..

Categorie