Propriedades do contêiner Flexbox em CSS | Explicado
Esta redação abordará os aspectos listados abaixo de um contêiner CSS Flexbox:
- O que é um contêiner Flexbox?
- Propriedades do contêiner Flexbox em CSS
- Como implementar propriedades do contêiner Flexbox no CSS?
Então vamos começar!
O que é um contêiner Flexbox
O contêiner Flex é uma caixa/contêiner que pode conter numerosos itens flexíveis, como mostrado na figura abaixo:
A área azul escura representa um recipiente flexível no trecho acima, enquanto a área azul clara representa itens flexíveis.
Propriedades do contêiner Flexbox em CSS
Os CSs fornecem inúmeras propriedades de contêiner do Flexbox que podem ser usadas para vários propósitos, conforme descrito nas tabelas abaixo do rumo:
| Propriedades | Descrição |
|---|---|
| mostrar | Determina o tipo de contêiner flexível i.e. Em linha, bloco. |
| Direcção flexível | Especifica a direção dos itens dentro do contêiner, como linha, reversa, etc. |
| FLEX-EMPRAÇÃO | Determina o comportamento de embalagem dos itens do Flexbox I.e. envolver ou não. |
| FLOW FLEX | Fornece as funcionalidades do fluxo flexível e do flexão flexível. |
| FLOW FLEX | Fornece as funcionalidades do fluxo flexível e do flexão flexível. |
| Justify-Content | Alinha os elementos do Flexbox ao longo do eixo principal. |
| alinhado-itens | Alinha os elementos ao longo do eixo cruzado. |
| Alinhado | Alinha as linhas do contêiner flexível. |
| brecha | Controla explicitamente os espaços entre os itens flexíveis. |
Propriedade de direção flexível em CSS
CSS 3 fornece um Direcção flexível Propriedade que pode ser usada para especificar a direção dos itens dentro do contêiner Flexbox. Usando o Direcção flexível Propriedade, podemos especificar a direção do elemento a partir de um fundo superior, no topo inferior, à esquerda-direita e à direita à esquerda.
Sintaxe
O trecho abaixo fornecerá a sintaxe básica da propriedade CSS Flex-Direction:
Direcção flexível: Linha | coluna | reversa de linha | coluna-reversa;Os valores descritos no snippet acima podem ser usados para especificar os itens flexíveis horizontalmente, verticalmente, horizontalmente, mas em ordem inversa, verticalmente, mas em ordem inversa, respectivamente.
Propriedade Flex-Wrap em CSS
Para embrulhar os elementos do contêiner Flexbox FLEX-EMPRAÇÃO A propriedade pode ser usada. Pode levar um dos dois valores i.e. enrolar ou Nowrap. Especificando o "enrolar" o valor envolverá os elementos do contêiner Flexbox. No entanto, o “Nowrap” O valor será usado se você não quiser envolver os elementos do contêiner Flexbox.
Sintaxe
O trecho abaixo fornecerá a sintaxe básica da propriedade CSS Flex-Wrap:
FLEX-WRAP: WRAP | NOWRAP | WRAP-REVERSE;Os valores descritos no snippet acima especificam se os itens flexíveis envolverão, sem embrulhar ou embrulhar em ordem inversa, respectivamente.
Propriedade do fluxo flexível em CSS
O FLOW FLEX a propriedade pode ser usada para aproveitar as funcionalidades de ambos Direcção flexível e FLEX-EMPRAÇÃO propriedades.
Sintaxe
O snippet abaixo fornecerá a sintaxe básica da propriedade CSS Flex-Flow:
FLOW FLEX: FLEX-DIRECÇÃO FLEX-DIRECÇÃO;Propriedade do Content Justify no CSS
É usado para alinhar os itens do contêiner em diferentes direções, como start, fim, centro, etc.
Sintaxe
O snippet abaixo fornecerá a sintaxe básica da propriedade CSS Justify-Content:
Justify-Content: Center | Flex-Start | flex-end | Space-between | Espaço-Mesmo | espaço-around;Os valores do centro, o Flex-Start e o Flex-End são usados para posicionar os itens flexíveis no centro, iniciar e final do contêiner, respectivamente. O valor do espaço entre o espaço especificará o espaço entre os itens flexíveis, o valor espacial e o valor especificará o espaço igual ao redor dos itens flexíveis, enquanto o espaço-ar-light especificará o espaço antes, entre e após os itens flexíveis.
Align-Items Propriedade em CSS
O valor padrão desta propriedade é o alongamento que estica os itens flexíveis para ajustar o contêiner.
Sintaxe
O trecho abaixo mostra o que valoriza a propriedade Align-Items pode levar:
Align-itens: Alongamento | Flex-Start | centro | flex-end | linha de base;Os valores Flex-Start, Center e Flex-End são usados para posicionar os itens no início, no centro e no final do contêiner, enquanto o valor da linha de base posiciona os itens flexíveis na linha de base do contêiner.
propriedade de conteúdo alinhado em CSS
É usado para alinhar as linhas flexíveis e seu valor padrão é esticado.
Sintaxe
O trecho abaixo mostrará a sintaxe básica da propriedade Align-Content:
Alinhado: Alongamento | Flex-Start | centro | flex-end | Space-around | Space Between;Propriedade GAP em CSS
Controla explicitamente os espaços entre os itens flexíveis. Especifica o tamanho da lacuna entre colunas e linhas.
Sintaxe
O trecho abaixo mostrará a sintaxe básica da propriedade Align-Content:
lacuna: lixo de coluna de gap de linha;Os valores acima do rumo definem o tamanho da lacuna entre linhas e colunas, respectivamente.
Como implementar propriedades do contêiner Flexbox no CSS
Nesta seção, implementaremos os conceitos teóricos acima descritos praticamente.
Exemplo
Neste exemplo, implementaremos propriedades de exibição, itens alinhados, direção flexível e gap:
Contêiner Flexbox
Primeiro item
Segundo item
Terceiro item
Quarto item
Quinto item
O snippet a seguir mostrará a respectiva saída para o snippet de código acima:
A saída acima mencionada autentica o funcionamento das propriedades do contêiner Flexbox.
Conclusão
O contêiner Flex é uma caixa/contêiner que pode conter inúmeros itens flexíveis. CSS fornece inúmeras propriedades de contêiner Flexbox que podem ser usadas para vários fins. Por exemplo, a propriedade Display determina o tipo de contêiner flexível; A propriedade Flex-Direction especifica a direção dos itens dentro do contêiner, como uma linha, reversa de linha, etc. Esta redação apresenta um guia completo para propriedades de contêiner Flexbox, sua sintaxe e como usá-las no CSS.