O que é Flexbox no CSS?

Ao projetar um site responsivo, você deseja que seus elementos alterassem o comportamento dele, como largura, altura, resolução, orientação, etc. de acordo com o tipo de dispositivo usando o site. Esta postagem discute como você pode tornar seus elementos responsivos usando o layout do Flexbox. Os assuntos em discussão são os seguintes.

1. O que é Flexbox
2. Fundo
3. Componentes do Flexbox
4. Eixo do flexbox
5. Propriedades do Flexbox

O que é Flexbox

CSS Flexbox é um modelo de layout que permite um arranjo eficiente e dinâmico de elementos. Este layout é unidimensional e permite a colocação de elementos 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. Torna os elementos flexíveis e fornecem a posição apropriada e simetria.

O Flexbox foi introduzido no CSS versão 3 para organizar itens em um contêiner com mais eficiência e dinamicamente. Antes do Flexbox, havia inicialmente quatro métodos de layout que listamos abaixo.

1. Bloquear
   Com o objetivo de criar seções em uma página da web, o layout do bloco é usado.
2. Em linha
   É um método de layout que é usado para texto.
3. Mesa
   Isso é usado para uma tabela com dados bidimensionais.
4. Posicionado
   Isso é usado para uma posição definitiva de um elemento.

Agora discutiremos vários componentes de um Flexbox.

Componentes do Flexbox

Um Flexbox consiste em dois componentes que explicamos abaixo.

1. Flex-container
   Este componente de um Flexbox define as propriedades do elemento ancestral, definindo sua tela para flexionar ou embelezar.
2. Flex-itens
   Ele descreve as propriedades dos elementos sucessores, além disso, pode haver numerosos elementos presentes dentro de um contador flexível.

Aqui está uma representação visual de um Flexbox.

Eixo do flexbox

Ao lidar com o layout do Flexbox, há dois eixos que devem ser cuidados. Esses eixos foram listados abaixo.

1. Eixo principal
2. Eixo transversal

Ambos os eixos são explicados em detalhes abaixo.

Eixo principal

O eixo principal (da esquerda para a direita) é definido pelo Direcção flexível propriedade. Este eixo pode renderizar quatro valores que são; linha, reversa-fileira, coluna e coluna-reversa.

No caso dos dois primeiros valores que são linha, e ROW-REVERSITO, O Flexbox exibe uma direção embutida, o que significa que o contêiner e os itens flexíveis serão alinhados horizontalmente. Considerando que para o coluna, e coluna-reversa Valores A direção do Flexbox será bloqueada ou, em palavras mais simples, o recipiente e os itens serão organizados verticalmente.

Eixo transversal

A direção deste eixo é perpendicular ao eixo principal. Se a direção do eixo principal for ajustada para linha ou ROW-REVERSITO Em seguida, o eixo cruzado se moverá ao longo das colunas para baixo, enquanto, no caso da coluna, e a coluna-reversa o eixo se moverá ao longo das linhas.

Ambos os eixos têm um ponto inicial, um ponto final e um certo comprimento entre esses pontos.

Propriedades do Flexbox

As propriedades de um Flexbox foram fornecidas abaixo.

1. mostrar
Ele exibe um elemento como um Flexbox.

2. Direcção flexível
Esta propriedade define a direção dos itens em um contêiner flexível.

3. Justify-Content
Se os itens em uma caixa de flexão não consumirem o espaço horizontal completamente, essa propriedade os alinha através do eixo principal.

4. alinhado-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.

5. FLEX-EMPRAÇÃO
Se não houver muito espaço em uma única linha flexível, esta propriedade decide se deve embrulhar elementos ou não.

6. Alinhado
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.

7. FLOW FLEX
Uma propriedade abreviada para direção flexível e flexão flexível.

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

9. alinhado
Esta propriedade substitui a propriedade Align-Items e é usada em elementos flexíveis.

10. flex
Declara o comprimento dos itens flexíveis em relação a outros itens presentes em uma caixa de flexão.

Vamos ver um exemplo.

Exemplo
Abaixo, mostramos um exemplo de como criar um Flexbox.

Html

Item
Item
Item<
Item

Aqui, criamos um recipiente de div, com a classe “Flexbox” e aninhando mais quatro recipientes de div dentro dele.

CSS

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

Primeiro de tudo, estamos atribuindo ao contêiner Div principal uma tela flex.

CSS

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

Por fim, estamos estilizando os itens flexíveis presentes no Flexbox usando várias propriedades CSS.

Saída

Uma caixa flexível foi gerada com sucesso.

Conclusão

Um Flexbox é um modelo de layout que organiza elementos de maneira eficiente e dinâmica, ao mesmo tempo em que lhes dão espaços distribuídos iguais dentro de um contêiner. 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 um recipiente flexível e itens que são considerados como seus componentes. Além disso, possui eixos principais e cruzados e exibe várias propriedades. Esta redação abrange todos os detalhes necessários sobre um Flexbox, juntamente com um exemplo adequado.