Proprietà CSS Flexbox | Spiegato

Un sito Web reattivo richiede di far alterare gli elementi il ​​loro comportamento come larghezza, altezza, risoluzione, orientamento, ecc. Secondo il tipo di dispositivo utilizzando il sito Web. CSS fornisce alcune entità che possono aiutarti a creare un sito Web reattivo come query multimediali, griglia, flexbox, ecc. Qui in questo articolo, il nostro obiettivo sarà su flexbox e proprietà ad esso associate. I soggetti evidenziati in questo post sono i seguenti.

1. Cos'è Flexbox
2. Cos'è un contenitore flessibile
3. Cos'è un oggetto flessibile
4. Proprietà Flexbox

Cos'è Flexbox

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.

Un Flexbox fondamentalmente rende gli elementi flessibili e fornisce loro una posizione appropriata e la simmetria.
Consiste due dei due componenti che sono contenitori flessibili e articoli flessibili. Entrambi questi componenti sono spiegati di seguito.

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.

Cos'è un oggetto flessibile

Un elemento flessibile descrive le proprietà degli elementi successivi, inoltre, possono esserci numerosi oggetti flessibili presenti all'interno di un contenitore flessibile.

Ora che abbiamo una buona comprensione di un Flexbox e dei suoi componenti, esploreremo varie proprietà associate al Flexbox.

Proprietà Flexbox

Di seguito abbiamo spiegato in gran parte le varie proprietà collegate a una Flexbox.

Visualizza proprietà

Ai fini di affermare come verrà visualizzato un elemento, viene utilizzata la proprietà del display.

Sintassi

display: flex;

Parametri spiegati

Flex: questo valore visualizza un elemento come contenitore flessibile.

Esempio

Supponiamo di voler visualizzare un contenitore di Div come Flexbox. Ecco come viene fatto.

Html

Ai fini di affermare come verrà visualizzato un elemento, viene utilizzata la proprietà del display.

Qui, abbiamo generato un contenitore div e un paragrafo è stato nidificato al suo interno.

CSS

.Container
display: flex;
Background-color: Aquamarine;

Usando la classe assegnata all'elemento Div stiamo impostando il display su Flex e dandogli un certo colore di sfondo.

Produzione

Il Div è stato visualizzato con successo come Flexbox.

Il resto delle proprietà relative a Flexbox è diviso in due categorie, che sono proprietà del contenitore Flex e proprietà di elementi Flex. Discuteremo di entrambe le classi separatamente.

Proprietà del contenitore flessibile

Le proprietà che rientrano in questa categoria sono le seguenti.

Proprietà a direzione flessibile

Questa proprietà viene utilizzata per descrivere la direzione degli elementi presenti in un Flexbox.

Sintassi

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

Parametri spiegati

riga: Questo valore predefinito organizza gli elementi in orizzontale.
RIGUE-REVERSO: Questo valore mette gli elementi di fila ma con una direzione inversa.
colonna: Dispone gli articoli in verticale.
REVERSO DI CORMA: Dispone gli elementi in una colonna ma in modo inverso.

Esempio

Posizioniamo determinati elementi in un Flexbox con una direzione "riga".

Html

Articolo 1
Articolo 2
Articolo 3
Articolo 4

Nel codice sopra, stiamo creando un contenitore di div più grande e nidificando altri quattro contenitori di div.

CSS

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

Qui stiamo visualizzando il Div più grande come contenitore flessibile e dandogli un po 'di colore, e infine la sua direzione è impostata per remare.

CSS

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

Ora stiamo disegnando i nostri articoli all'interno del contenitore usando le proprietà CSS di base.

Produzione

Gli articoli sono stati organizzati di seguito.

Proprietà giustificata

Se gli elementi in una Flexbox non consumano completamente lo spazio orizzontale, questa proprietà 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 colloca gli elementi alla fine del contenitore.
centro: Questo posiziona gli elementi al centro del contenitore.
Space-wetween: Aggiunge spazio tra gli articoli.
Space-around: Aggiunge spazi prima, tra e dopo ogni articolo.
Spazio-unita: Questo dà a ogni articolo spazi uguali.

Esempio

Supponiamo di voler giustificare i tuoi contenuti al centro del contenitore Flex.

CSS

.Flexbox
display: flex;
Background-color: Aquamarine;
giustificare contento: centro;

Il valore centrale posizionerà tutti gli articoli Flex al centro del contenitore.

CSS

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

Usando i CS di base stiamo accontentando gli elementi.

Produzione

Gli articoli sono stati inseriti al centro con successo.

Proprietà allinea

Se gli elementi in una Flexbox non consumano completamente lo spazio verticale, questa proprietà li allinea attraverso l'asse incrociato.

Sintassi

_Stretch _ Center _ Flex-Start _ Flex-end _ Baseline _ Inizial _ Ereherit

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 colloca gli elementi alla fine del contenitore.
basale: Questo posiziona gli elementi alla base del contenitore.

Esempio

Qui abbiamo mostrato come funziona il valore di base della proprietà di alline.

CSS

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

Per dimostrare correttamente questa proprietà stiamo fornendo una certa altezza al contenitore Flex e impostando la proprietà ALIGN ETTENZIONI sul basale.

Produzione

La proprietà funziona correttamente.

proprietà flex-wrap

Se non c'è molto spazio su una singola linea flessibile, questa proprietà decide se avvolgere gli elementi 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

Per comprendere questa proprietà consultare l'esempio di seguito.

CSS

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

Nel codice sopra, abbiamo impostato la proprietà Flex-Wrap su Wrap-Reverse, il che significa che se richiesto gli elementi nel contenitore saranno avvolti ma in modo inverso.

Produzione

Gli oggetti sono stati avvolti in modo inverso.

proprietà align-content

Altera il comportamento della proprietà Flex-Wrap ed è praticamente simile alla proprietà ALIGN-elementi con l'unica differenza che allinea le linee flessibili piuttosto che 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 colloca gli elementi alla fine del contenitore.
centro: Questo posiziona gli elementi al centro del contenitore.
Space-wetween: Aggiunge spazio tra gli articoli.
Space-around: Aggiunge spazi prima, tra e dopo ogni articolo.
Spazio-unita: Questo dà a ogni articolo spazi uguali.

Esempio

Ecco un esempio della proprietà in discussione.

CSS

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

Qui abbiamo ulteriormente aumentato l'altezza del contenitore in modo da poter capire questa proprietà in modo migliore. Inoltre, abbiamo assegnato la proprietà align-content il valore di mezzo che aggiungerà spazio tra gli elementi.

Produzione

Lo spazio tra gli articoli è stato aggiunto con successo.

Proprietà Flex-Flow

Descrive la direzione degli elementi mentre specifica se avvolgere gli elementi o meno, inoltre, è una proprietà stensa per il follwoing.

1. direzione del flusso
2. wrap di flusso

Sintassi

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

Parametri spiegati

direzione del flusso: Definisce la direzione degli elementi.
Flow-wrap: 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 reverso colonna;

Utilizzando la proprietà stenografia, abbiamo impostato la direzione degli elementi flessibili come revoca della colonna mentre li avvolgiamo usando il valore di avvolgimento.

Produzione

Gli articoli sono stati avvolti in una colonna ma in ordine inverso.

Ora discuteremo della nostra prossima categoria.

Flex Articolo proprietà

Le proprietà associate all'elemento flessibile sono le seguenti.

Proprietà dell'ordine

Definisce l'ordine di un elemento flessibile rispetto ad altri elementi presenti in una Flexbox.

Sintassi

Ordine: num | iniziale | ereditare;

Parametri spiegati

N.: Questo valore definisce l'ordine di un elemento flessibile. Per impostazione predefinita, il valore è 0.

Esempio

Ecco come impostare l'ordine degli elementi in Flexbox.

Html

Articolo 1
Articolo 2
Articolo 3
Articolo 4

Per comprendere correttamente questa proprietà, stiamo assegnando ogni div nidificato di un ID.

CSS

.Flexbox
display: flex;
Background-color: Aquamarine;
Altezza: 250px;

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

Qui stiamo prima visualizzando il contenitore Div come Flexbox e fornendo un po 'di altezza per dimostrare il funzionamento di questo correttamente, e infine stiamo accontentando i nostri articoli Flex.

CSS

#item1
Ordine: 4;

#item2
Ordine: 1;

#item3
Ordine: 2;

#item4
Ordine: 3;

Usando quegli ID stiamo assegnando un certo ordine a ciascun articolo.

Produzione

Gli articoli sono stati inseriti nell'ordine assegnato.

Proprietà allinea

Questa proprietà viene utilizzata per definire il posizionamento degli elementi all'interno di un contenitore flessibile. Questa proprietà sovrascrive la proprietà ALIGN-ETSEMS e viene utilizzata su elementi flessibili.

Sintassi

Allinea-sé: auto | allungamento | Centro | Flex-Start | Flex-end | basale | iniziale | ereditare;

Parametri spiegati

auto: Questo è un valore predefinito che eredita le caratteristiche del contenitore antenato o se non esiste un contenitore antenato, quindi allunga l'oggetto.
stirata: Allunga gli oggetti 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 colloca gli elementi alla fine del contenitore.
basale: Questo posiziona gli elementi alla base del contenitore.

Esempio

Considera l'esempio di seguito.

CSS

#item2
allineare: centro;

#item3
allineare: Flex-Start;

Usando gli ID assegnati, l'articolo 2 è stato posizionato al centro del contenitore, tuttavia, l'articolo 3 è stato posizionato all'inizio del contenitore.

Produzione

Entrambi gli articoli sono stati allineati con successo.

Proprietà a crescita flessibile

Questa proprietà descrive la misura in cui un elemento crescerà rispetto agli altri elementi presenti all'interno del contenitore.

Sintassi

Flex-Crow: Numero | iniziale | ereditare;

Parametri spiegati

numero: Questo valore afferma l'entità della crescita di un elemento. Per impostazione predefinita, il valore è 0.

Esempio

Supponiamo che vogliamo solo far crescere un oggetto rispetto agli altri. Ecco come lo fai.

CSS

#item2
Flex-Crow: 10;

Impostiamo il valore della proprietà flex-grow su 10, il che significa che l'articolo 2 sarà 10 volte più grande rispetto ad altri articoli.

Produzione

La proprietà funziona correttamente.

Proprietà Flex-Shrink

Questa proprietà definisce la misura in cui un elemento si riducerà rispetto agli altri elementi presenti all'interno del contenitore.

Sintassi

Flex-Shrink: numero | iniziale | ereditare;

Parametri spiegati

numero: Afferma la misura in cui un elemento si restringerà. Per impostazione predefinita, il valore è 0.

Esempio

Ecco un esempio di questa proprietà.

Html

1
2
3
4
5

Per comprendere il funzionamento di questa proprietà, abbiamo creato un contenitore di div più grande e nidificato altri cinque contenitori di div all'interno di quello più grande. Inoltre, ad ogni div è stato assegnato un colore di sfondo diverso in modo che il concetto di questa proprietà possa essere dimostrato correttamente.

CSS

.Container
display: flex;
larghezza: 400px;
Altezza: 200px;

.Container Div
Flex-Basis: 100px;

Qui stiamo visualizzando il div più grande come Flexbox, inoltre, gli stiamo anche dando un po 'di larghezza e altezza. Infine, stiamo impostando la sua base flessibile su 100px che definisce la lunghezza iniziale di un elemento flessibile.

CSS

.articolo
Flex-Shrink: 4;

Usando la classe assegnata agli ultimi due contenitori di divie.

Produzione

Gli articoli 4 e 5 sono più piccoli del resto degli articoli.

Proprietà Flex-Basis

Ai fini di impostare la lunghezza iniziale di un elemento flessibile, questa proprietà viene utilizzata.

Sintassi

Flex-Basis: Auto | Num | iniziale | ereditare;

Parametri spiegati

auto: È un valore predefinito che fornisce un elemento con la lunghezza uguale a quella dell'elemento flessibile.
N.: Dichiara la lunghezza originale di un oggetto.

Esempio

Supponiamo di voler dare a un elemento Flex un po 'di lunghezza iniziale. Abbiamo mostrato come è fatto.

CSS

#item4
Flex-Basis: 300px;

Impostamo la base flessibile dell'articolo da 4 a 300px, il che significa che la lunghezza originale del quarto elemento sarà di 300px.

Produzione

La lunghezza iniziale del terzo elemento è stata impostata correttamente.

Proprietà flessibile

Questa proprietà imposta la crescita, il restringimento e la lunghezza di un oggetto tutto in una volta, inoltre, è una proprietà stensa per

1. crescita flessibile
2. Flex-Shrink
3. Flex-Basis

Sintassi

Flex-Property: Flex-Crow Flex-Shrink Flex-Basis | iniziale | ereditare;

Parametri spiegati

Flex-Crow: Specifica la crescita dell'oggetto flessibile rispetto ad altri elementi nel contenitore.
Flex-Shrink: Dichiara il restringimento di un oggetto rispetto ad altri elementi
Flex-Basis: Fornisce la lunghezza iniziale di un articolo.

Esempio

Consultare l'esempio di seguito per comprendere la proprietà Flex.

CSS

#item2
Flex: 0 0 250px;

L'articolo 2 non crescerà né si restringerà, tuttavia avrà una lunghezza di 250 px.

Produzione

La proprietà funziona correttamente.

Conclusione

Le proprietà associate a Flexbox sono classificate in due categorie che sono proprietà del contenitore Flex e proprietà Flex Box. Le proprietà relative al contenitore flessibile sono; flusso flessibile, direzione flessibile, contenuto di allineamento, contento giustificato, ecc. Nel frattempo, le proprietà collegate all'elemento flex sono; Ordine, Flex-Crow, Flex-Basis, Allined-Self, ecc. Tutte queste proprietà sono discusse in questo tutorial insieme a esempi pertinenti.