Como usar a propriedade CSS Flex-Grow?

Ed Treutel IV

A propriedade CSS Flex-Grow faz parte do “flex”Layout. Seu principal objetivo é permitir espaço extra para o elemento do Flexbox. Isso é feito atribuindo números como um valor ao “Grow Flex" propriedade. Um grande número de navegadores suporta essa propriedade, o que torna o design inalterado ao abrir em vários navegadores. É usado principalmente ao projetar seções da página da web para aprimorar a aparência geral do site.

Este artigo demonstra o procedimento passo a passo para usar o “Grow Flex" propriedade.

Como usar a propriedade "crescimento flexível" do CSS?

A propriedade CSS Flex-Grow é usada para especificar quanto um elemento deve crescer com seus irmãos dentro de um contêiner flexível. Siga as etapas abaixo mencionadas para utilizar a propriedade CSS Flex-Grow:

Etapa 1: Crie um Flexbox
No arquivo html, primeiro, crie um pai de um pai e adicione múltiplos “”Tag elementos nele. Depois disso, atribua a classes diferentes a cada “”Tag que são utilizadas para fins de estilo:

S.não
ID do Empregado
nome do empregado
Salário
Observações

Agora, no arquivo CSS, adicione as seguintes propriedades CSS:

.estrutura
exibição: flex;
Justify-Content: Space-Around;
FLOW FLEX: ROW WRAP;
alinhado-itens: alongamento;
preenchimento: 20px;
Cor: Whitesmoke;
Background-Color: MidnightBlue;

A explicação das propriedades CSS acima usadas está escrita abaixo:

Primeiro, o “flex" e "espaço-around”Os valores são definidos para o“mostrar" e "Justify-Content”Propriedades. Ele cria uma divad como flex como Flex e atribui uma partição igual para cada item flexível.
Depois disso, defina “embrulho de linha" e "esticar"Como um valor para o"FLOW FLEX" e "alinhado-itens”Propriedades. Ele define a direção do elemento flexível para “linha”E torna os itens cobertos no espaço disponível.
No final, o “preenchimento","cor de fundo" e "cor”As propriedades são utilizadas para melhores fins de visualização.

Depois de executar o código acima, a página da web se parece com o seguinte:

A saída mostra que o Flex foi criado e o “Flex-itens”Estão alinhados na direção da linha.

Etapa 2: Uso de propriedade “Flex-Grow”
Agora selecione diferentes classes que foram atribuídas a cada criança dividir nas etapas acima. E atribuir as seguintes propriedades CSS:

.Grow1
Flex-Grow: 1;
Background-Color: Orangered;
preenchimento: 5px;

.Grow2
Flex-Grow: 2;
Background-Color: Blue;
preenchimento: 5px;

.Grow3
Flex-Grow: 2;
Background-Color: Springgreen;
preenchimento: 5px;

.original
Background-Color: RoyalBlue;
preenchimento: 5px;

A explicação do código acima é descrita abaixo:

Primeiro, selecione a classe chamada “Grow1”E definir valor de 1 para o“Grow Flex" propriedade. Depois disso, os valores "orangerados" e "5px" são fornecidos ao "cor de fundo" e "preenchimentoPropriedades, respectivamente.
Da mesma maneira, as propriedades de cor e preenchimento de fundo são definidas para outras classes de divisão. Essas propriedades são utilizadas para o “Grow2" e "Grow3“Classes e atribua a propriedade Flex-Grow com valores diferentes.
O "Grow Flex“A propriedade expande essa div para um certo valor dentro da caixa de flexão. Quanto maior o valor, maior o tamanho desse div na caixa flexível.

Após a execução do código acima, a página da web se parece com a seguinte:

A saída exibe que o “Flex-Glow”Propriedade expande a div com base em certos valores dentro da caixa flexível.

Conclusão

O CSS “Grow Flex”A propriedade é usada para atribuir espaços extras aos elementos do Flexbox. O desenvolvedor seleciona a div no Flexbox e depois usa o “Grow FlexPropriedade e atribui o valor específico. Quanto maior o valor, maior o espaço alocado para esse elemento div dentro da caixa flexível. Este artigo demonstrou com sucesso como usar a propriedade CSS Flex-Grow.