Flex Articoli in CSS | Spiegato

Flexbox è un modello di layout che allinea gli elementi all'interno di un contenitore dinamicamente assegnando loro uno spazio ugualmente distribuito. Questo layout si rivela utile nel rendere gli elementi reattivi, il che significa che gli elementi modificheranno il loro comportamento in base al tipo di dispositivo che li mostra. Questo modello è costituito da due componenti che sono, contenitore flessibile e elementi Flex. Tuttavia, il nostro obiettivo in questo articolo sarà sui contenitori flessibili. I soggetti discussi in questo articolo sono i seguenti.

1. Cos'è un oggetto flessibile
2. Flex Articolo proprietà

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.

Questi elementi rendono alcune proprietà spiegate in dettaglio di seguito.

Flex Articolo proprietà

Le seguenti proprietà sono associate a un elemento flessibile.

Proprietà dell'ordine

Ai fini della definizione dell'ordine di un elemento flessibile rispetto ad altri elementi presenti in un Flexbox, viene utilizzata la proprietà dell'ordine.

Sintassi

Ordine: num | iniziale | ereditare;

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

Esempio
Ecco un esempio della proprietà dell'ordine.

Html

Articolo 1
Articolo 2
Articolo 3
Articolo 4

Nel codice sopra, è stato creato un contenitore di div e altri quattro div sono stati nidificati al suo interno. A ciascuno dei div nidificati è stato assegnato un documento d'identità.

CSS

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

Qui, il div più grande è stato visualizzato come contenitore flessibile ed è stato fornito un po 'di colore di sfondo.

CSS

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

Ora stiamo accontentando i nostri articoli presenti all'interno del contenitore Flex con alcune proprietà CSS di base.

CSS

#item1
Ordine: 4;

#item2
Ordine: 1;

#item3
Ordine: 2;

#item4
Ordine: 3;

Nel codice sopra, stiamo utilizzando l'ID di ogni elemento per fornirgli un po 'di ordine.

Produzione

Ogni articolo è stato posto secondo il suo ordine.

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

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

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

#item1
Flex-Crow: 15;

Impostiamo il valore della proprietà flex-grow su 15. L'articolo 1 sarà 15 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

Al fine di impostare la lunghezza iniziale di un elemento flessibile, viene utilizzata la proprietà Flex-Basis.

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.

Num: Afferma la lunghezza originale di un articolo.

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

CSS

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

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

#item3
Flex-Basis: 300px;

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

Produzione

La lunghezza iniziale del terzo elemento è stata impostata correttamente.

Proprietà flessibile

Questa proprietà stabilisce la crescita, il restringimento e la lunghezza di un oggetto in una volta. È una proprietà stenografica per la crescita flessibile, il flex-shrink e la base flessibile.

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: Indica il restringimento di un elemento 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

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

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

#item2
Flex: 0 0 300px;

Usando la proprietà stenorta, la crescita e il restringimento del secondo elemento sono stati impostati su 0, il che significa che questo articolo non crescerà né si restringerà, tuttavia avrà una lunghezza di 300 px.

Produzione

La proprietà funziona correttamente.

Proprietà allinea

Ai fini di descrivere la disposizione degli oggetti all'interno di un contenitore flessibile, viene utilizzata la proprietà allinea.

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 posiziona gli elementi alla fine del contenitore.

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

Esempio
Considera l'esempio seguente per comprendere la proprietà allinea.

CSS

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

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

Qui abbiamo fornito un po 'di altezza al contenitore Flex per mostrare il concetto di questa proprietà in modo chiaro, nel frattempo, il resto del codice è lo stesso di sopra.

CSS

#item2
allineare: Flex-end;

#item3
allineare: Flex-Start;

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

Produzione

Entrambi gli elementi sono stati posizionati in modo diverso usando la proprietà allinea.

Conclusione

Un elemento Flex è un componente di una Flexbox che definisce le proprietà degli elementi successivi. Puoi posizionare numerosi articoli flessibili all'interno di un contenitore flessibile. Esistono alcune proprietà CSS associate a questi elementi come ordine, allineamento-sé, crescita flessibile, flex, ecc. Ognuno di questi rende più valori e ha uno scopo diverso che abbiamo dimostrato con l'aiuto di esempi pertinenti.