Propriedades dos itens do Flexbox no CSS | Explicado
Este artigo ajudará você a entender os aspectos abaixo da listada dos itens do CSS Flexbox:
- Itens do Flexbox no CSS
- Propriedades de itens do Flexbox no CSS
- Como implementar propriedades de itens do Flexbox no CSS
Então, vamos começar!
Itens do Flexbox no CSS
Ao criar o contêiner Flex no Flexbox, utilizamos a propriedade Display e atribuímos algum valor a ele, como Flex, embutido. Naquela época, o filho direto desse contêiner Flex se torna o item flexível. A figura fornecida abaixo fornecerá uma melhor compreensão:
Propriedades de itens do Flexbox no CSS
A tabela abaixo fornecerá uma breve visão geral das Propriedades do Flexbox:
| Propriedades | Descrição |
|---|---|
| ordem | Ele controla a ordem dos elementos filhos dentro do contêiner flexível. |
| Grow Flex | Determina o fator de crescimento para um item flexível. |
| Flex-Shrink | Ele determina o fator de encolhimento para um elemento filho/item flexível. |
| Flex-Basis | Ele determina o tamanho inicial de um elemento filho/item flexível. |
| flex | É uma propriedade abreviada para três propriedades Flex-Grow, Flex-Shrink e Flex-Basis. |
| alinhado | Permite que o alinhamento padrão (ao longo do eixo cruzado) seja substituído para itens individuais de elemento filho/flexão. |
Como implementar propriedades de itens do Flexbox no CSS
Nesta seção, discutiremos cada propriedade do Flexbox mencionada acima e as implementamos praticamente para um profundo entendimento:
Exemplo 1: Propriedade do pedido CSS
É preciso um valor numérico para classificar os elementos em uma ordem específica. O snippet de código abaixo permitirá que você entenda como a propriedade Order funciona em uma caixa de flexão:
Propriedade do pedido
Primeiro item
Segundo item
Terceiro item
Quarto item
Quinto item
No snippet de código acima, utilizamos a propriedade do pedido para organizar os itens do Flexbox de acordo com a nossa escolha:
A saída mostra que a propriedade do pedido organizou os itens flexíveis de acordo com o pedido especificado pelo usuário.
Exemplo 2: Propriedade CSS Flex-Grow
É preciso um valor numérico que represente a rapidez com que um item flexível crescerá em comparação com os outros itens flexíveis. Para a clareza dos conceitos, vamos considerar a parte abaixo do código:
Propriedade Flex-Grow
Primeiro item
Segundo item
Terceiro item
Quarto item
Quinto item
Neste exemplo, o valor padrão para a propriedade Flex-Grow é 0, então todo item de contêiner crescerá de acordo. No entanto, o segundo e o quarto itens do contêiner crescerão doze vezes mais rápido que outros itens, porque esses dois itens especificaram o valor da propriedade Flex-Grow como 12:
O trecho acima verificou o funcionamento da propriedade Flex-Grow.
Exemplo 3: Propriedade CSS Flex-Basis
No trecho de código abaixo, implementaremos a propriedade Flex-Basis para definir o tamanho do segundo e o quarto itens do contêiner:
Propriedade do Flex-Basis
Primeiro item
Segundo item
Terceiro item
Quarto item
Quinto item
Definimos o valor da propriedade Flex-Basis como 150px para o segundo e quarto itens. O código acima gerará a seguinte saída:
Da mesma forma, podemos utilizar as outras propriedades do Flexbox Item para obter diferentes funcionalidades.
Conclusão
O contêiner flex ou o elemento pai é uma caixa/recipiente que contém vários itens flexíveis, enquanto tudo dentro de um contêiner Flexbox é chamado de item ou elemento infantil Flexbox. Para criar o contêiner Flex no FlexBox, utilizamos a propriedade Display e o atribuímos FLEX ou INLINE VALUE; Como resultado, o filho direto desse contêiner Flex se torna o item flexível. No CSS, várias propriedades estão disponíveis para trabalhar com itens do Flexbox, como o pedido controla a ordem dos itens do Flexbox, o Flex-Grow determina o fator de crescimento para os itens flexíveis, etc. Este artigo cobriu várias propriedades do Flexbox Item e explicou como usá -las para alcançar suas funcionalidades.