Propriedades do CSS Flexbox | Explicado

Um site responsivo exige que você faça com que os elementos alterem seu comportamento como largura, altura, resolução, orientação etc. de acordo com o tipo de dispositivo usando o site. O CSS fornece certas entidades que podem ajudá -lo a criar um site responsivo, como consultas de mídia, grade, flexbox, etc. Aqui neste artigo, nosso foco estará no Flexbox e propriedades associadas a ele. Os assuntos destacados neste post são os seguintes.

1. O que é Flexbox
2. O que é um contêiner flexível
3. O que é um item flexível
4. Propriedades do Flexbox

O que é Flexbox

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.

Um Flexbox basicamente torna os elementos flexíveis e fornecem a posição apropriada, e simetria.
Consiste em dois dos dois componentes que são contêineres flexíveis e itens flexíveis. Ambos os componentes são explicados abaixo.

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.

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.

Agora que temos um bom entendimento de um Flexbox e seus componentes, exploraremos várias propriedades associadas ao Flexbox.

Propriedades do Flexbox

Abaixo, explicamos em grande profundidade as várias propriedades vinculadas a um Flexbox.

Propriedade de exibição

Com o objetivo de declarar como um elemento será exibido, a propriedade de exibição é usada.

Sintaxe

exibição: flex;

Parâmetros explicados

flex: este valor exibe um elemento como um contêiner flexível.

Exemplo

Suponha que você queira que um contêiner div seja exibido como um Flexbox. É assim que se faz.

Html

Com o objetivo de declarar como um elemento será exibido, a propriedade de exibição é usada.

Aqui, geramos um recipiente de div e um parágrafo foi aninhado dentro dele.

CSS

.contêiner
exibição: flex;
Background-Color: Aquamarine;

Usando a classe atribuída ao elemento div, estamos definindo sua tela para flexionar e dar uma certa cor de fundo.

Saída

A div foi exibida com sucesso como uma caixa de flexão.

O restante das propriedades relacionadas ao FlexBox é dividido em duas categorias, que são propriedades de contêiner flexíveis e propriedades de item flexível. Discutiremos as duas aulas separadamente.

Propriedades do contêiner flex

As propriedades que se enquadram nesta categoria são as seguintes.

Propriedade da direção flexível

Esta propriedade é usada para descrever a direção dos elementos presentes em um Flexbox.

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-Reversa: 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

Vamos colocar certos itens em uma caixa de flexão com direção “Row”.

Html

Item 1
Item 2
Item 3
Item 4

No código acima, estamos criando um recipiente de div maior e aninhando mais quatro contêineres de div dentro dele.

CSS

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

Aqui 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 linha.

CSS

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

Agora estamos estilizando nossos itens dentro do recipiente usando propriedades básicas de CSS.

Saída

Os itens foram organizados seguidos.

Propriedade do Content-Content

Se os itens em uma caixa flexível não consumirem o espaço horizontal completamente.

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.
Space-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 para o centro do contêiner flexível.

CSS

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

O valor central posicionará todos os itens flexíveis no centro do contêiner.

CSS

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

Usando CSS básico, estamos estilizando os elementos.

Saída

Os itens foram colocados no centro com sucesso.

propriedade alinhada-itens

Se os itens em uma caixa de flexão não consumirem o espaço vertical completamente, essa propriedade os alinha através do eixo cruzado.

Sintaxe

_stretch _ Center _ Flex-Start _ Flex-End _ Baseling _ Inicial _ Herito

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 mostramos como funciona o valor da linha de base da propriedade Align-Items.

CSS

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

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

Saída

A propriedade está funcionando corretamente.

Propriedade flexível flexível

Se não houver muito espaço em uma única linha flexível, esta propriedade decide se deve embrulhar elementos 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: Envolve os elementos, se necessário.
Wrap-Reverse: Ele envolve os elementos, se necessário.

Exemplo

Para entender esta propriedade, consulte o exemplo abaixo.

CSS

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

No código acima, definimos a propriedade Flex-Wrap como Wrap-Revery, o que significa que, se necessário, os itens no contêiner serão embrulhados, mas de maneira inversa.

Saída

Os itens foram embrulhados de maneira inversa.

propriedade Align-Content

Ele altera o comportamento da propriedade Flex-Wrap e é praticamente semelhante à propriedade Align-Items, com a única diferença que alinha as linhas flexíveis em vez dos elementos flexíveis.

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.
Space-around: Adiciona espaços antes, entre e depois de cada item.
Espaço-mesmo: Isso dá a cada item espaços iguais.

Exemplo

Aqui está um exemplo da propriedade em discussão.

CSS

.Flexbox
exibição: flex;
Background-Color: Aquamarine;
Altura: 300px;
FLEX-WRAP: WRAP;
Alinhado: Space Between;

Aqui aumentamos ainda mais a altura do recipiente para que você possa entender essa propriedade de uma maneira melhor. Além disso, atribuímos a propriedade Align-Content o valor do espaço que adicionará espaço entre elementos.

Saída

O espaço entre os itens foi adicionado com sucesso.

Propriedade do fluxo flexível

Ele descreve a direção dos elementos enquanto especifica se deve enrolar elementos ou não, além disso, é uma propriedade abreviada para o seguinte.

1. direção do fluxo
2. embrulhar fluxo

Sintaxe

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

Parâmetros explicados

direção do fluxo: Define a direção dos elementos.
Brilhão de 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: WRAP REVERSITO DE COLUNA;

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

Saída

Os itens foram embrulhados em uma coluna, mas em ordem inversa.

Agora vamos discutir nossa próxima categoria.

Propriedades do item flexível

As propriedades associadas ao item flexível são as seguintes.

Propriedade do pedido

Ele define a ordem de um elemento flexível em relação a outros elementos presentes em uma caixa flexível.

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á como você define a ordem dos itens no Flexbox.

Html

Item 1
Item 2
Item 3
Item 4

Para entender esta propriedade corretamente, estamos atribuindo cada divind.

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 estamos primeiro exibindo o contêiner Div como um Flexbox e fornecendo alguma altura para demonstrar o funcionamento disso corretamente, e finalmente estamos estilizando nossos itens flexíveis.

CSS

#item 1
Ordem: 4;

#item2
Ordem: 1;

#item3
Ordem: 2;

#item4
Ordem: 3;

Usando esses IDs, estamos atribuindo algum pedido a cada item.

Saída

Os itens foram colocados no pedido atribuído.

propriedade alinhada

Esta propriedade é usada para definir o posicionamento de itens dentro de um contêiner flexível. Esta propriedade substitui a propriedade Align-Items e é usada em elementos flexíveis.

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 recipiente.
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.

CSS

#item2
Alinhado: centro;

#item3
Alinhado: Flex-Start;

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

Saída

Ambos os itens foram alinhados com sucesso.

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

#item2
Flex-Grow: 10;

Definimos o valor da propriedade Flex-Grow como 10, o que significa que o item 2 será 10 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, esta propriedade é 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

#item4
Flex-Basis: 300px;

Definimos a base flexível do item 4 a 300px, o que significa que a duração original do quarto item será de 300px.

Saída

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

propriedade flex

Essa propriedade define o crescimento, o encolhimento e a duração de um item de uma só vez, além disso, é uma propriedade abreviada para

1. crescimento flexível
2. Flex-Shrink
3. Flex-Basis

Sintaxe

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

Parâmetros explicados

Flex-Grow: 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: Ele fornece o comprimento inicial de um item.

Exemplo

Consulte o exemplo abaixo para entender a propriedade Flex.

CSS

#item2
flex: 0 0 250px;

O item 2 não crescerá nem encolherá, no entanto, terá um comprimento de 250px.

Saída

A propriedade está funcionando corretamente.

Conclusão

As propriedades associadas ao FlexBox são classificadas em duas categorias que são propriedades flexíveis de contêineres e propriedades flexíveis flexíveis. Propriedades relacionadas ao contêiner Flex são; FLOW FLEX, FLEX-Direction, Align-Content, Justify-Content, etc. Enquanto isso, as propriedades vinculadas ao item flexível estão; ordem, crescimento flexível, flexão flexível, alinhado, etc. Todas essas propriedades são discutidas neste tutorial, juntamente com exemplos relevantes.