Container Flex in CSS | Spiegato

Il modello di layout Flexbox fornisce una disposizione efficiente e dinamica degli elementi posizionandoli all'interno di un contenitore con spazio ugualmente distribuito. Questo layout rende gli elementi reattivi, il che significa che gli elementi cambiano il loro comportamento in base al tipo di dispositivo che li mostra. È costituito da due componenti che sono, contenitore flessibile e articoli flessibili. Tuttavia, qui enfatizzeremo solo i contenitori flessibili. I soggetti discussi sono.

1. Cos'è un contenitore flessibile
2. Proprietà del contenitore flessibile

Cos'è un contenitore flessibile?

Questo è un componente di un Flexbox che definisce le proprietà dell'elemento antenato impostando il suo display su Flex o inline-Flex.

Le proprietà associate al contenitore flessibile sono spiegate qui.

Proprietà del contenitore flessibile

Proprietà relative a un contenitore flessibile.

1. Proprietà a direzione flessibile
2. proprietà flex-wrap
3. Proprietà Flex-Flow
4. Proprietà giustificata
5. Proprietà allinea
6. proprietà align-content

Queste proprietà sono spiegate in dettaglio di seguito.

Proprietà a direzione flessibile

Ai fini di impostare la direzione degli elementi presenti in una Flexbox, viene utilizzata la proprietà a direzione flessibile.

Sintassi

Direzione flessibile: riga | ROW-REVERSE | colonna | colonna -Reversa | iniziale | ereditare;

Parametri spiegati

riga: Questo valore predefinito organizza gli elementi orizzontalmente.

revietto di riga: Questo valore mette gli elementi di fila ma con una direzione inversa.

colonna: Organizza gli articoli in verticale.

revoce della colonna: Organizza gli elementi in una colonna ma in modo inverso.

Esempio

L'esempio seguente dimostra il funzionamento della proprietà di direzione flessibile.

Html

Articolo 1
Articolo 2
Articolo 3
Articolo 4

Qui abbiamo nidificato quattro contenitori Div all'interno di un contenitore di div più grande e gli abbiamo assegnato una classe "Flexbox".

CSS

.Flexbox
display: flex;
Background-color: Aquamarine;
Direzione flessibile: reviso in riga;

Nel codice sopra, stiamo visualizzando il div più grande come contenitore flessibile e dandogli un po 'di colore, e infine la sua direzione è impostata su revoca delle righe.

CSS

.Flexbox div
Background-color: LightGrey;
larghezza: 150px;
Margine: 15px;
imbottitura: 20px;
Font-size: 35px;

Ora stiamo disegnando i nostri oggetti all'interno del contenitore usando varie proprietà CSS.

Produzione

Gli elementi flessibili sono posizionati nella stessa riga ma in ordine inverso.

proprietà flex-wrap

Questa proprietà afferma se gli elementi debbano essere avvolti attorno alla linea flessibile o meno.

Sintassi

Flex-Wrap: NowRap | avvolgimento | Wrap-reverse | iniziale | ereditare;

Parametri spiegati

nowrap: Questo valore predefinito non avvolge gli elementi.

avvolgere: Avvolge gli elementi se necessario.

avvolgimento: Avvolge gli elementi, se necessario, ma in modo inverso.

Esempio

Ecco come questa proprietà avvolge gli elementi all'interno del Flexbox. Per vedere l'effetto di questa proprietà, devi ridimensionare la finestra del browser.

CSS

.Flexbox
display: flex;
Background-color: Aquamarine;
Flex-wrap: avvolgimento;

Nel codice sopra, abbiamo impostato la proprietà Flex-Wrap su. Questo valore avvolge gli elementi all'interno di un contenitore.

CSS

.Flexbox div
Background-color: LightGrey;
larghezza: 150px;
Margine: 15px;
imbottitura: 20px;
Font-size: 35px;

Usando alcuni CS di base abbiamo disegnato i nostri articoli Flex.

Produzione

Gli articoli Flex sono stati avvolti.

Proprietà Flex-Flow

Dichiara la direzione degli elementi mentre specifica se avvolgere gli elementi o meno. Questa è una proprietà stenorta per la direzione del flusso e il flusso-wrap.

Sintassi

Flex-Flow: wrap di flusso di direzione del flusso | iniziale | ereditare;

Parametri spiegati

direzione del flusso: Definisce la direzione degli elementi.

wrap di flusso: Afferma se gli elementi devono essere avvolti o meno.

Esempio

Considera l'esempio seguente per comprendere il funzionamento di questa proprietà.

CSS

.Flexbox
display: flex;
Background-color: Aquamarine;
Flex-Flow: involucro di riga-riga;

Utilizzando la proprietà stenografia, abbiamo impostato la direzione degli elementi flessibili come reviso in riga mentre li avvolgiamo usando il valore di avvolgimento.

Produzione

Gli oggetti sono stati avvolti in file inversa.

Proprietà giustificata

Se gli elementi in una Flexbox non consumano interamente lo spazio orizzontale, la proprietà giustificata-contenuto li allinea attraverso l'asse principale.

Sintassi

Giustify-Content: Flex-Start | Flex-end | Centro | Spazio-mezzo | Space-around | Spazio-unita | iniziale | ereditare;

Parametri spiegati

Flex-Start: Posiziona gli elementi all'inizio del contenitore ed è il valore predefinito.

Flex-end: Questo posiziona gli elementi alla fine del contenitore.

centro: Questo posiziona gli elementi al centro del contenitore.

spaziale: Aggiunge spazio tra gli articoli.

Spazio-around: Aggiunge spazi prima, tra e dopo ogni articolo.

Spazio-unitamente: Questo dà a ogni articolo spazi uguali.

Esempio

Supponiamo di voler giustificare i tuoi contenuti fino alla fine del contenitore Flex.

CSS

.Flexbox
display: flex;
Background-color: Aquamarine;
Giustify-Content: Flex-End;

Il valore Flex-End posizionerà tutti gli articoli Flex alla fine del contenitore.

Produzione

La proprietà funziona correttamente.

Proprietà allinea

Questa proprietà imposta la disposizione degli elementi in un contenitore verticalmente.

Sintassi

ALIGE-ITEMS: STRETH | Centro | Flex-Start | Flex-end | basale | iniziale | ereditare;

Parametri spiegati

stirata: È un valore predefinito che allunga gli elementi per adattarsi al contenitore.

centro: Questo posiziona gli elementi al centro del contenitore.

Flex-Start: Posiziona gli elementi all'inizio del contenitore ed è il valore predefinito.

Flex-end: Questo posiziona gli elementi alla fine del contenitore.

basale: Questo posiziona gli elementi alla linea di base del contenitore.

Esempio

Qui stiamo dimostrando il valore centrale della proprietà di allineamento.

CSS

.Flexbox
display: flex;
Background-color: Aquamarine;
Altezza: 200px;
ALIGE-ITMS: CENTRO;

Per dimostrare correttamente questa proprietà stiamo fornendo una certa altezza al contenitore Flex e impostando la proprietà di allineamento.

Produzione

Gli articoli sono stati allineati verticalmente al centro del contenitore.

proprietà align-content

Altera il comportamento della proprietà Flex-Wrap ed è praticamente simile alla proprietà del contenuto giustificata con l'unica differenza che allinea in modo verificato gli elementi flessibili.

Sintassi

Contempo align: Flex-Start | Flex-end | Centro | Spazio-mezzo | Space-around | Spazio-unita | iniziale | ereditare;

Parametri spiegati

Flex-Start: Posiziona gli elementi all'inizio del contenitore ed è il valore predefinito.

Flex-end: Questo posiziona gli elementi alla fine del contenitore.

centro: Questo posiziona gli elementi al centro del contenitore.

spaziale: Aggiunge spazio tra gli articoli.

Spazio-around: Aggiunge spazi prima, tra e dopo ogni articolo.

Spazio-unitamente: Questo dà a ogni articolo spazi uguali.

Esempio

Per capire come funziona la proprietà align-content vede l'esempio seguente.

CSS

.Flexbox
display: flex;
Background-color: Aquamarine;
Altezza: 300px;
Flex-wrap: avvolgimento;
Contempo align: spazio;

Qui abbiamo ulteriormente aumentato l'altezza del contenitore in modo da poter capire questa proprietà in modo migliore. Infine, abbiamo assegnato la proprietà align-content il valore dello spazio.

Produzione

Lo spazio attorno a ciascun articolo è stato aggiunto con successo.

Conclusione

Il contenitore Flex che è un componente di un Flexbox definisce le proprietà dell'elemento antenato impostando il display su Flex o inline-Flex. CSS fornisce molte proprietà collegate al contenitore Flex e possono essere utilizzate per definire le caratteristiche del contenitore Flex. Poche delle proprietà collegate al contenitore Flex sono; Direzione a flessione, contenuto di allineamento, allinei, flusso flessibile, ecc. Ognuna di queste proprietà è spiegata in dettaglio insieme a esempi pertinenti.