Proprietà del contenitore Flexbox in CSS | Spiegato

Il modello di layout Flexbox presenta un modo per progettare siti Web reattivi e per farlo, fornisce numerosi proprietà Flex Contenir e Flexbox. Per funzionare con CSS Flexbox, abbiamo bisogno di un contenitore in cui posizioneremo gli elementi Flexbox e per creare un contenitore Flexbox, dobbiamo utilizzare la proprietà del display e impostare il suo valore come in linea Flex o Flex. Inoltre, CSS fornisce una vasta gamma di proprietà del contenitore Flexbox per modificare il comportamento di un contenitore Flexbox.

Questo articolo coprirà gli aspetti sotto l'elenco di un contenitore CSS Flexbox:

• Cos'è un contenitore Flexbox?
• Proprietà del contenitore Flexbox in CSS
• Come implementare le proprietà del contenitore Flexbox in CSS?

Quindi iniziamo!

Cos'è un contenitore Flexbox

Il contenitore Flex è una scatola/contenitore che può contenere numerosi elementi flessibili come mostrato nella figura seguente:

L'area blu scuro rappresenta un contenitore flessibile nello snippet sopra, mentre l'area blu chiaro rappresenta oggetti flessibili.

Proprietà del contenitore Flexbox in CSS

I CSS forniscono numerose proprietà del contenitore Flexbox che possono essere utilizzate per vari scopi come descritto nelle tabelle di seguito:

Proprietà	Descrizione
Schermo	Determina il tipo di contenitore flessibile i.e. in linea, blocco.
Direzione flessibile	Specifica la direzione degli elementi all'interno del contenitore come riga, reverse in riga, ecc.
Flex-wrap	Determina il comportamento di avvolgimento degli elementi Flexbox i.e. avvolgere o no.
Flex-flow	Fornisce le funzionalità sia di WRAP FLEX che di flessione.
Flex-flow	Fornisce le funzionalità sia di WRAP FLEX che di flessione.
giustificare il contenuto	Allinea gli elementi Flexbox lungo l'asse principale.
allineare	Allinea gli elementi lungo l'asse incrocio.
contenuto align	Allinea le linee del contenitore flessibile.
spacco	Controlla esplicitamente gli spazi tra gli articoli flessibili.

Proprietà della direzione flessibile in CSS

CSS 3 fornisce un Direzione flessibile Proprietà che può essere utilizzata per specificare la direzione degli elementi all'interno del contenitore Flexbox. Usando il Direzione flessibile Proprietà, possiamo specificare la direzione dell'elemento dal fondo superiore, in basso, a sinistra-destra e in sinistra a destra.

Sintassi

Lo snippet seguente fornirà la sintassi di base della proprietà CSS Flex-Direction:

Direzione flessibile: riga | Colonna | ROW-REVERSE | REVERSO MOCKE;

I valori descritti nello snippet sopra possono essere utilizzati per specificare gli elementi flessibili orizzontalmente, verticalmente, orizzontalmente ma in ordine inverso, in verticale ma in ordine inverso, rispettivamente.

proprietà flex-wrap in CSS

Per avvolgere gli elementi del contenitore Flexbox Flex-wrap la proprietà può essere utilizzata. Può richiedere uno dei due valori i.e. avvolgere O nowrap. Specificando il "avvolgere" Il valore avvolgerà gli elementi del contenitore Flexbox. comunque, il "NowRap" Il valore verrà utilizzato se non si desidera avvolgere gli elementi del contenitore Flexbox.

Sintassi

Lo snippet seguente fornirà la sintassi di base della proprietà CSS Flex-Wrap:

Flex-wrap: avvolgimento | nowrap | avvolgimento;

I valori descritti nello snippet sopra specificano se gli elementi flessibili avvolgeranno, senza wrap o si avvolgeranno in ordine inverso, rispettivamente.

Proprietà Flex-Flow in CSS

IL Flex-flow La proprietà può essere utilizzata per avvalersi delle funzionalità di entrambi Direzione flessibile E Flex-wrap proprietà.

Sintassi

Lo snippet seguente fornirà la sintassi di base della proprietà CSS Flex-Flow:

Flex-flow: wrap flex-direzione flessione;

giustificare la proprietà del contenuto in CSS

Viene utilizzato per allineare gli elementi del contenitore in diverse direzioni come start, fine, centro, ecc.

Sintassi

Lo snippet seguente fornirà la sintassi di base di CSS Justify-Content Proprietà:

Giustify-Content: Center | Flex-Start | Flex-end | Spazio-mezzo | Spazio-unita | spazio;

I valori Center, Flex-Start e Flex-End vengono utilizzati per posizionare rispettivamente gli articoli Flex al centro, avvio e fine del contenitore. Il valore di spazio tra lo spazio specificherà lo spazio tra gli elementi flessibili, il valore dello spazio-uniforme specificherà lo spazio uguale attorno agli elementi flessi.

Proprietà allinea in CSS

Il valore predefinito di questa proprietà è allungato che allunga gli articoli flessibili per adattarsi al contenitore.

Sintassi

Lo snippet seguente mostra quali valori possono prendere la proprietà ALIGE-ETSEMS:

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

I valori Flex-Start, Center e Flex-End vengono utilizzati per posizionare gli articoli all'inizio, al centro e alla fine del contenitore, mentre il valore di base posiziona gli elementi flessibili al basale del contenitore.

proprietà align-content in CSS

Viene utilizzato per allineare le linee flessibili e il suo valore predefinito è elastico.

Sintassi

Lo snippet seguente mostrerà la sintassi di base della proprietà align-content:

Contempo align: allungamento | Flex-Start | Centro | Flex-end | spazio-spazio | spazio-spazio;

Gap Property in CSS

Controlla esplicitamente gli spazi tra gli articoli flessibili. Specifica la dimensione dello spazio tra colonne e righe.

Sintassi

Lo snippet seguente mostrerà la sintassi di base della proprietà align-content:

GAP: GAP ROW-GAP GAP;

I valori di cui sopra imposta la dimensione dello spazio tra righe e colonne rispettivamente.

Come implementare le proprietà del contenitore Flexbox in CSS

In questa sezione, implementeremo praticamente i concetti teorici sopra descritti.

Esempio

In questo esempio implementeremo le proprietà di display, allineamento, direzione flessibile e gap:

Container Flexbox

Primo elemento
Secondo articolo
Terzo elemento
Quarto articolo
Quinto elemento

Il seguente snippet mostrerà il rispettivo output per lo snippet di codice sopra:

L'output sopra offerto autentica il funzionamento delle proprietà del contenitore Flexbox.

Conclusione

Il contenitore Flex è una scatola/contenitore che può contenere numerosi articoli flessibili. CSS fornisce numerose proprietà del contenitore Flexbox che possono essere utilizzate per vari scopi. Ad esempio, la proprietà del display determina il tipo di contenitore Flex; La proprietà della direzione flessibile specifica la direzione degli elementi all'interno del contenitore, come una riga, reverse in riga, ecc. Questo articolo presenta una guida completa per le proprietà del contenitore Flexbox, la loro sintassi e come usarle in CSS.