Come utilizzare la proprietà CSS Flex-Grow?

Sarita Negri

La proprietà CSS Flex-Crow fa parte del “flettere" disposizione. Il suo scopo principale è consentire spazio extra per l'elemento del Flexbox. Viene fatto assegnando i numeri come valore a "Flex-Crow" proprietà. Un gran numero di browser supportano questa proprietà che rende invariato il design durante l'apertura in più browser. Viene utilizzato principalmente durante la progettazione di sezioni della pagina web per migliorare l'aspetto generale del sito Web.

Questo articolo dimostra la procedura passo-passo per utilizzare il "Flex-Crow" proprietà.

Come utilizzare la proprietà CSS "Flex-Crow"?

La proprietà CSS Flex-Crow viene utilizzata per specificare quanto un elemento dovrebbe crescere con i suoi fratelli all'interno di un contenitore flessibile. Seguire i passaggi di seguito per utilizzare la proprietà CSS Flex-Crow:

Passaggio 1: creare una Flexbox
Nel file HTML, in primo luogo, crea un Parent Div e aggiungi più ""Tag elementi in esso. Successivamente, assegnare classi diverse a ciascuno ""Tag utilizzato per scopi di styling:

S.NO
ID Dipendente
Nome dipendente
Stipendio
Osservazioni

Ora, nel file CSS aggiungi le seguenti proprietà CSS:

.struct
display: flex;
Giustify-Content: spazio;
Flex-flow: wrap di riga;
ALIGE-ITMS: allungamento;
imbottitura: 20px;
Colore: Whitesmoke;
Background-color: MidnightBlue;

La spiegazione delle proprietà CSS di cui sopra usate è scritta di seguito:

Prima il "flettere" E "Spazio-aroundI valori sono impostati per il "Schermo" E "giustificare il contenuto" proprietà. Crea un divid genitore come flessibile e assegna una pari di pari per ogni elemento flessibile.
Dopodiché, imposta "avvolgimento della riga" E "stirata"Come valore per il"Flex-flow" E "allineare" proprietà. Imposta la direzione dell'elemento flessibile verso "riga"E rende gli articoli coperti nello spazio disponibile.
Alla fine, il "imbottitura","colore di sfondo" E "colore"Le proprietà sono utilizzate per migliori scopi di visualizzazione.

Dopo aver eseguito il codice sopra, la pagina Web assomiglia a questa:

L'output mostra che Flex è stato creato e il "Flex-Items"Sono allineati nella direzione della riga.

Passaggio 2: utilizzo della proprietà "Flex-Crow"
Ora seleziona classi diverse che sono state assegnate a ciascun bambino Div nei passaggi precedenti. E assegnare le seguenti proprietà CSS:

.Grow1
Flex-Crow: 1;
Background-color: aranced;
imbottitura: 5px;

.Grow2
Flex-Crow: 2;
Background-color: blu;
imbottitura: 5px;

.Grow3
Flex-Crow: 2;
Background-color: Springgreen;
imbottitura: 5px;

.originale
Background-color: Royalblue;
imbottitura: 5px;

La spiegazione del codice sopra è descritta di seguito:

Innanzitutto, seleziona la classe denominata "Grow1"E imposta il valore di 1 su"Flex-Crow" proprietà. Successivamente, i valori "aranciati" e "5px" sono forniti al "colore di sfondo" E "imbottitura"Proprietà, rispettivamente.
Allo stesso modo, il colore di sfondo e le proprietà di imbottitura sono impostate su altre classi DIV. Queste proprietà sono utilizzate per il "Grow2" E "Grow3"Classi e assegnare la proprietà Flex-Crow con valori diversi.
IL "Flex-Crow“La proprietà espande quel Div a un certo valore all'interno della Flexbox. Maggiore è il valore, maggiore è la dimensione di quel div nella Flexbox.

Dopo l'esecuzione del codice sopra, la pagina Web assomiglia a questa:

L'output visualizza che "Flex-Grow"La proprietà espande il div in base a determinati valori all'interno del Flexbox.

Conclusione

Il CSS "Flex-Crow"La proprietà viene utilizzata per assegnare spazi extra agli elementi di Flexbox. Lo sviluppatore seleziona il Div da Flexbox e quindi utilizza il "Flex-Crow"Proprietà e assegna il valore specifico. Maggiore è il valore, maggiore è lo spazio assegnato a quell'elemento Div all'interno del Flexbox. Questo articolo ha dimostrato con successo come utilizzare la proprietà CSS Flex-Grow.