Itens flexíveis no CSS | Explicado

Flexbox é um modelo de layout que alinha os elementos dentro de um recipiente dinamicamente, atribuindo -os ao espaço igualmente distribuído. Esse layout é útil para tornar os elementos responsivos, o que significa que os elementos alterarão seu comportamento de acordo com o tipo de dispositivo que os exibe. Este modelo consiste em dois componentes, que são, Flex Bolcemer e Flex Itens. No entanto, nosso foco neste artigo será em contêineres flexíveis. Os assuntos discutidos nesta redação são os seguintes.

1. O que é um item flexível
2. Propriedades do item flexível

O que é um item flexível

Um item flexível descreve as propriedades dos elementos sucessores, além disso, pode haver numerosos itens flexíveis presentes dentro de um contêiner flexível.

Esses itens renderizam algumas propriedades que são explicadas em detalhes abaixo.

Propriedades do item flexível

As propriedades a seguir estão associadas a um item flexível.

Propriedade do pedido

Com o objetivo de definir a ordem de um elemento flexível em relação a outros elementos presentes em uma caixa flexível, a propriedade do pedido é usada.

Sintaxe

Ordem: num | inicial | herdar;

Parâmetros explicados
num: Este valor define a ordem de um item flexível. Por padrão, o valor é 0.

Exemplo
Aqui está um exemplo da propriedade do pedido.

Html

Item 1
Item 2
Item 3
Item 4

No código acima, um contêiner de div e mais quatro divs foram aninhados dentro dele. Cada um dos divisos aninhados recebeu algum id.

CSS

.Flexbox
exibição: flex;
Background-Color: Aquamarine;

Aqui, a div maior foi exibida como um contêiner flexível e recebeu algumas cores de fundo.

CSS

.Itens div
Background-Color: Lightgrey;
margem: 15px;
preenchimento: 20px;
Size da fonte: 35px;

Agora estamos estilizando nossos itens presentes dentro do contêiner Flex com algumas propriedades básicas do CSS.

CSS

#item 1
Ordem: 4;

#item2
Ordem: 1;

#item3
Ordem: 2;

#item4
Ordem: 3;

No código acima, estamos usando o ID de cada item para fornecer algum pedido.

Saída

Cada item foi feito de acordo com seu pedido.

Propriedade Flex-Grow

Esta propriedade descreve até que ponto um elemento crescerá em relação aos outros elementos presentes dentro do contêiner.

Sintaxe

Flex-Grow: Número | inicial | herdar;

Parâmetros explicados
número: Este valor indica a extensão do crescimento de um elemento. Por padrão, o valor é 0.

Exemplo
Suponha que queremos apenas cultivar um item em relação aos outros. Aqui está como você faz isso.

CSS

.Flexbox
exibição: flex;
Background-Color: Aquamarine;

.Itens div
Background-Color: Lightgrey;
margem: 15px;
preenchimento: 20px;
Size da fonte: 35px;

#item 1
Flex-Grow: 15;

Definimos o valor da propriedade Flex-Grow como 15. O item 1 será 15 vezes maior em comparação com outros itens.

Saída

A propriedade está funcionando corretamente.

Propriedade Flex-Shrink

Esta propriedade define até que ponto um elemento diminuirá em relação aos outros elementos presentes dentro do contêiner.

Sintaxe

Flex-Shrink: Número | inicial | herdar;

Parâmetros explicados
número: Afirma até que ponto um elemento diminuirá. Por padrão, o valor é 0.

Exemplo
Aqui está um exemplo desta propriedade.

Html

1
2
3
4
5

Para entender o funcionamento desta propriedade, criamos um recipiente de div maior e aninhados mais cinco contêineres de div dentro do. Além disso, cada div recebeu uma cor de fundo diferente para que o conceito dessa propriedade possa ser demonstrado adequadamente.

CSS

.contêiner
exibição: flex;
Largura: 400px;
Altura: 200px;

.Div contêiner
Flex-Basis: 100px;

Aqui estamos exibindo a div maior como uma caixa flexível, além disso, também estamos dando alguma largura e altura. Por fim, estamos definindo seu Flex-Basis a 100px, o que define o comprimento inicial de um item flexível.

CSS

.item
Flex-Shrink: 4;

Usando a classe atribuída aos dois últimos contêineres da div, estamos definindo seu flexão flexível para 4, o que significa que esses itens serão 4 vezes menores do que outros itens na grade.

Saída

Os itens 4 e 5 são menores que o restante dos itens.

Propriedade do Flex-Basis

Com o objetivo de definir o comprimento inicial de um item flexível, a propriedade Flex-Basis é usada.

Sintaxe

Flex-Basis: Auto | num | inicial | herdar;

Parâmetros explicados
auto: É um valor padrão que fornece um item com o comprimento igual ao do item flexível.

num: Afirma o comprimento original de um item.

Exemplo
Suponha que você queira dar um item flexível algum comprimento inicial. Mostramos como é feito.

CSS

.Flexbox
exibição: flex;
Background-Color: Aquamarine;

.Itens div
Background-Color: Lightgrey;
margem: 15px;
preenchimento: 20px;
Size da fonte: 35px;

#item3
Flex-Basis: 300px;

Definimos a base flexível do item 3 a 300px, o que significa que o comprimento original do terceiro item será de 300px.

Saída

A duração inicial do terceiro item foi definida com sucesso.

propriedade flex

Esta propriedade define o crescimento, o encolhimento e a duração de um item de uma só vez. É uma propriedade abreviada para crescimento flexível, flexão flexível e flexão flexível.

Sintaxe

Flex-Property: Flex-Shrink Flex-Basis do Flex-Grow | inicial | herdar;

Parâmetros explicados
Grow Flex: Especifica o crescimento do item flexível em relação a outros itens no contêiner.

Flex-Shrink: Afirma o encolhimento de um item em relação a outros itens

Flex-Basis: Fornece o comprimento inicial de um item.

Exemplo
Consulte o exemplo abaixo para entender a propriedade Flex.

CSS

.Flexbox
exibição: flex;
Background-Color: Aquamarine;

.Itens div
Background-Color: Lightgrey;
margem: 15px;
preenchimento: 20px;
Size da fonte: 35px;

#item2
flex: 0 0 300px;

Usando a propriedade abreviada, o crescimento e o encolhimento do segundo item foi definido como 0, o que significa que esse item não crescerá nem encolherá, no entanto, terá um comprimento de 300px.

Saída

A propriedade está funcionando corretamente.

propriedade alinhada

Com o objetivo de descrever o arranjo de itens dentro de um recipiente flexível, a propriedade alinhada é usada.

Sintaxe

Alinhamento: Auto | alongamento | centro | Flex-Start | flex-end | linha de base | inicial | herdar;

Parâmetros explicados
auto: Este é um valor padrão que herda as características do recipiente ancestral ou se não houver recipiente ancestral, ele estica o item.

esticar: Ele estica os itens para caber no contêiner.

Centro: Isso posiciona os elementos no centro do contêiner.

FLEX-Start: Ele posiciona elementos no início do contêiner e é o valor padrão.

flex-end: Isso coloca os elementos no final do contêiner.

linha de base: Isso posiciona os elementos na linha de base do contêiner.

Exemplo
Considere o exemplo abaixo para entender a propriedade alinhada.

CSS

.Flexbox
exibição: flex;
Background-Color: Aquamarine;
Altura: 250px;

.Itens div
Background-Color: Lightgrey;
Largura: 150px;
margem: 15px;
preenchimento: 20px;
Size da fonte: 35px;

Aqui, fornecemos alguma altura ao contêiner Flex para mostrar o conceito dessa propriedade de maneira clara, enquanto isso, o restante do código é o mesmo que acima.

CSS

#item2
Alinhado: Flex-End;

#item3
Alinhado: Flex-Start;

Usando os IDs atribuídos, o item 2 foi posicionado no final do contêiner, no entanto, o item 3 foi colocado no início do contêiner.

Saída

Ambos os itens foram posicionados de maneira diferente usando a propriedade alinhada.

Conclusão

Um item flexível é um componente de um Flexbox que define as propriedades dos elementos sucessores. Você pode colocar inúmeros itens flexíveis em um contêiner flexível. Existem algumas propriedades do CSS associadas a esses itens, como ordem, alinhamento, crescimento flexível, flexão, etc. Cada um desses renderiza vários valores e serve a um propósito diferente que demonstramos com a ajuda de exemplos relevantes.