Contêiner Flex no CSS | Explicado

O modelo de layout do Flexbox fornece um arranjo eficiente e dinâmico de elementos, colocando -os dentro de um recipiente com espaço igualmente distribuído. Esse layout torna os elementos responsivos, o que significa que os elementos mudam seu comportamento de acordo com o tipo de dispositivo que os exibe. Consiste em dois componentes, que são, Flex Contêiner e itens flexíveis. No entanto, aqui vamos enfatizar apenas recipientes flexíveis. Os assuntos discutidos são.

1. O que é um contêiner flexível
2. Propriedades do contêiner flex

O que é um contêiner flexível?

Este é um componente de um Flexbox que define as propriedades do elemento ancestral, definindo sua tela para flexionar ou embelezar.

As propriedades associadas ao contêiner Flex são explicadas aqui.

Propriedades do contêiner flex

Propriedades relacionadas a um contêiner flexível.

1. Propriedade da direção flexível
2. Propriedade flexível flexível
3. Propriedade do fluxo flexível
4. Propriedade do Content-Content
5. propriedade alinhada-itens
6. propriedade Align-Content

Essas propriedades são explicadas em detalhes abaixo.

Propriedade da direção flexível

Com o objetivo de definir a direção dos elementos presentes em um Flexbox, a propriedade Flex-Direction é usada.

Sintaxe

Direcção flexível: Linha | ROW-REVERSITA | coluna | coluna -verversa | inicial | herdar;

Parâmetros explicados

linha: Este valor padrão organiza os elementos horizontalmente.

ROW-REVERSITO: Este valor coloca elementos seguidos, mas com uma direção inversa.

coluna: Ele organiza os itens verticalmente.

coluna-reversa: Ele organiza os elementos em uma coluna, mas de maneira inversa.

Exemplo

O exemplo abaixo demonstra o funcionamento da propriedade Flex-Direction.

Html

Item 1
Item 2
Item 3
Item 4

Aqui, aninhamos quatro contêineres de div dentro de um recipiente de div maior e atribuímos uma classe “Flexbox”.

CSS

.Flexbox
exibição: flex;
Background-Color: Aquamarine;
Direcção flexível: reversa de linha;

No código acima, estamos exibindo a div maior como um contêiner flexível e dando-lhe um pouco de cor, e finalmente sua direção está definida para remar-reverte.

CSS

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

Agora estamos estilizando nossos itens dentro do contêiner usando várias propriedades CSS.

Saída

Os itens flexíveis são colocados na mesma linha, mas em ordem inversa.

Propriedade flexível flexível

Esta propriedade afirma se os elementos devem ser enrolados em torno da linha flexível ou não.

Sintaxe

Flex-Wrap: Nowrap | Enrole | WRAP-REVERSITO | inicial | herdar;

Parâmetros explicados

Nowrap: Este valor padrão não envolve elementos.

enrolar: Ele envolve os elementos, se necessário.

WRAP-Reverse: Ele envolve os elementos, se necessário, mas de maneira inversa.

Exemplo

Aqui está como essa propriedade envolve itens dentro da caixa flexível. Para ver o efeito desta propriedade, você precisa redimensionar a janela do navegador.

CSS

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

No código acima, definimos a propriedade Flex-Wrap para envolver. Este valor envolve os itens dentro de um contêiner.

CSS

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

Usando alguns CSs básicos, modelamos nossos itens flexíveis.

Saída

Os itens flexíveis foram embrulhados.

Propriedade do fluxo flexível

Afirma a direção dos elementos enquanto especifica se deve envolver elementos ou não. Esta é uma propriedade abreviada para direção de fluxo e embrulho de fluxo.

Sintaxe

FLOW FLEX: Fluxo-Direction-Direction Braw | inicial | herdar;

Parâmetros explicados

direção do fluxo: Ele define a direção dos elementos.

embrulhar fluxo: Afirma se os elementos devem ser embrulhados ou não.

Exemplo

Considere o exemplo abaixo para entender o funcionamento desta propriedade.

CSS

.Flexbox
exibição: flex;
Background-Color: Aquamarine;
FLOW FLEX: ROW-REVERSITO;

Usando a propriedade abreviada, definimos a direção dos itens flexíveis como reversa de linha enquanto os envolvemos usando o valor do wrap.

Saída

Os itens foram embrulhados em linhas de maneira inversa.

Propriedade do Content-Content

Se os itens em um Flexbox não consumirem o espaço horizontal completamente, a propriedade Justify-Content alinha-os no eixo principal.

Sintaxe

Justify-Content: Flex-Start | flex-end | centro | Space-between | espaço-around | Espaço-Mesmo | inicial | herdar;

Parâmetros explicados

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.

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

espaço entre: Adiciona espaço entre os itens.

espaço-around: Adiciona espaços antes, entre e depois de cada item.

espaço-mesmo: Isso dá a cada item espaços iguais.

Exemplo

Suponha que você queira justificar seu conteúdo até o final do contêiner flexível.

CSS

.Flexbox
exibição: flex;
Background-Color: Aquamarine;
Justify-Content: Flex-End;

O valor do flexão flexível será posicionado todos os itens flexíveis no final do contêiner.

Saída

A propriedade está funcionando corretamente.

propriedade alinhada-itens

Esta propriedade define o arranjo de elementos em um contêiner verticalmente.

Sintaxe

Align-itens: Alongamento | centro | Flex-Start | flex-end | linha de base | inicial | herdar;

Parâmetros explicados

esticar: É um valor padrão que 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

Aqui estamos demonstrando o valor central da propriedade Align-Items.

CSS

.Flexbox
exibição: flex;
Background-Color: Aquamarine;
Altura: 200px;
alinhado-itens: centro;

Para demonstrar essa propriedade corretamente, estamos fornecendo alguma altura para o contêiner Flex e definindo a propriedade Align-Items para o centro.

Saída

Os itens foram alinhados verticalmente no centro do contêiner.

propriedade Align-Content

Ele altera o comportamento da propriedade Flex-Wrap e é praticamente parecido com a propriedade de conteúdo justify, com a única diferença que alinha os elementos flexíveis veritalmente.

Sintaxe

Content Align: Flex-Start | flex-end | centro | Space-between | espaço-around | Espaço-Mesmo | inicial | herdar;

Parâmetros explicados

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.

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

espaço entre: Adiciona espaço entre os itens.

espaço-around: Adiciona espaços antes, entre e depois de cada item.

espaço-mesmo: Isso dá a cada item espaços iguais.

Exemplo

Para entender como funciona a propriedade Align-Content, veja o exemplo abaixo.

CSS

.Flexbox
exibição: flex;
Background-Color: Aquamarine;
Altura: 300px;
FLEX-WRAP: WRAP;
Content Align: Space-Around;

Aqui aumentamos ainda mais a altura do recipiente para que você possa entender essa propriedade de uma maneira melhor. Por fim, atribuímos a propriedade Align-Content o valor da subida.

Saída

Espaço ao redor de cada item verticalmente foi adicionado com sucesso.

Conclusão

Contêiner Flex, que é um componente de um Flexbox, define as propriedades do elemento ancestral, definindo sua tela para flexionar ou embelezar. O CSS fornece muitas propriedades conectadas ao recipiente flexível e pode ser usado para definir as características do contêiner flexível. Poucas das propriedades ligadas ao contêiner Flex estão; Flex-Direction, Align-Content, Align-Items, Flex-Flow, etc. Cada uma dessas propriedades é explicada em detalhes, juntamente com exemplos relevantes.