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êinerUsando 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
No código acima, estamos criando um recipiente de div maior e aninhando mais quatro contêineres de div dentro dele.
CSS
.FlexboxAqui 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 divAgora 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
.FlexboxO valor central posicionará todos os itens flexíveis no centro do contêiner.
CSS
.Itens divUsando 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 _ HeritoParâ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
.FlexboxPara 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
.FlexboxNo 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
.FlexboxAqui 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.
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
.FlexboxUsando 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
Para entender esta propriedade corretamente, estamos atribuindo cada divind.
CSS
.FlexboxAqui 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 1Usando 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
#item2Usando 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
#item2Definimos 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
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êinerAqui 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
.itemUsando 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
#item4Definimos 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
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
#item2O 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.