CSS Flex Order

Um Flexbox ou item é usado para conter conteúdo HTML nele. Uma propriedade CSS Flex é usada para aplicar os efeitos de comprimentos flexíveis em itens flexíveis. Uma folha de estilo em cascata oferece a propriedade de ordem usada para organizar os itens flexíveis. Para aplicar a propriedade do pedido, os itens dentro do Flexbox devem ser flexíveis. Caso contrário, a propriedade não será afetada.

Criação e pedidos flexíveis

Neste exemplo, usamos uma div simples para adicionar mais divs dentro dele, criando um fenômeno diving divisor. A divisão externa é conhecida como uma caixa flexível para vários conteúdos dentro dele. A divisão externa deles é o principal div que carrega vários divs dentro dele. É declarado com uma classe CSS para aplicar alguns efeitos CSS nela. Esta classe é descrita na seção da cabeça com a etiqueta de estilo, formando um CSS interno.

Dentro da div, mais quatro divs são declaradas. Cada div se referiu ao único flex. Vamos adicionar estilo embutido aqui para adicionar cores a cada flex. Cada div também se diverte com os IDs CSS. Todos esses IDs são responsáveis ​​por aplicar todos os efeitos no Flex que são organizados em uma ordem apropriada.

CSS IDs e classe

Neste ponto, é necessário elaborar essas duas terminologias do CSS. Ao discutirmos as propriedades do CSS sendo afetadas, esses IDs e classes desempenham um papel essencial na aplicação de qualquer efeito no conteúdo HTML. Sempre que falamos sobre CSs internos e externos, encontramos IDs e aulas. Esses IDs e classes têm a cor, o estilo de texto, as dimensões e muitos outros efeitos sobre o conteúdo declarado na seção do corpo. Para acessar esses efeitos das classes e IDs, precisamos mencionar que eles são nomeados na tag de conteúdo, assim como o ID "One". E todos os IDs do primeiro ao quarto também são declarados.

Voltando ao código HTML, aqui com cada div ou flex, também usamos o texto que mostrará a ordem com mais clareza. Isso ocorre quando a frase é formada pela organização da flexão na ordem apropriada. A direção do pedido do flex é a escolha do usuário. Podemos numerar o flexionário aleatoriamente. Essas caixas flexíveis são formadas quando o estilo CSS é aplicado a eles. Agora, vamos considerar o código CSS.

Primeiro declararemos o ID que pertence à divisão externa dentro da etiqueta de estilo. Esta div especificará a área em que todos os divs internos são formados. Adicionaremos propriedades de largura, altura e fronteira a este ID. Uma característica importante que é usada para formar um flexão é o efeito "exibição". Como esta propriedade é removida, os retângulos simples serão formados na página da web. Essas flexões serão formadas usando esta propriedade Display:

#um
Exibição: flex;

Flex geralmente é formado em uma direção horizontal da esquerda para a direita. Tudo bem, isso foi para a divisão externa. Para adicionar dimensões a toda a div ou flex, usaremos o ID "um" com div. Essas propriedades incluem a largura e a altura de um único bloco ou flexão. A altura da divisão interna única é igual à altura da divisão externa. Enquanto a largura da divisão externa é dividida em todos os quatro divs internos. Isso é feito declarando a descrição do ID re-adesiva por cada flexão dentro da tag com os diferentes nomes de ID para cada flex. Cada nome de div é dado de acordo com o pedido. Por exemplo, a primeira div contém a ordem como 1. Não importa em que ordem você declare o código em CSS ou HTML, mas o número do pedido decidirá a ordem de cada flexão.

Div#primeiro
Ordem: 1

Feche todas as tags. Agora, salve o código com a extensão HTML para abri -lo como texto e uma página da web.

Na execução, dentro do navegador, você verá que a ordem em que você definiu cada div ou a flexão é exibida com os blocos de respectivas cores, tornando a flexão em ordem adequada. Além disso, o texto adicionado a cada tag interna da Div descreve que a frase é formada pela organização do Flex em ordem. Isso mostra que a ordem que mencionamos é seguida com precisão.

Ordem reversa de flexão

Com Flexbox e Flex Creation, é visível que não há necessidade de mencionar qualquer fluxo flexível no código. Por padrão, o fluxo flexível está em uma direção horizontal e a ordem é seguida da mesma maneira que é descrita, ou seja, por padrão, ordem ascendente. Mas, depois de declarar a ordem de flexão na criação flexível, você pode revertê -la mencionando a direção do flex.

#um
Direcção flexível: reversa de linha;

Esta propriedade é adicionada ao Flexbox ou à divisão externa, pois é responsável por conter flexões internas dentro dele. E se você quiser usar o pedido padrão, remova completamente essa propriedade de direção ou adicione a direção flexível como "linha". Fará a ordem ascendente novamente.

Na execução, você verá que toda a ordem do flex é revertida, você pode ver claramente através das cores do flex e o texto da frase é revertido de acordo.

Flex vertical

Como descrevemos anteriormente, a direção do flex não é descrita. Por padrão, está na direção horizontal com uma única coluna e várias linhas. Mas, para fazer uma flexão vertical, a direção do Flexbox é alterada da linha para colunas.

#um
Direcção flexível: coluna;

Ao usar esse recurso, será formado um Flexbox vertical, com toda a divisão flexível intacta, e a ordem de toda a flexão será a mesma.

Reordenar Flexbox

O Flexbox pode ser reordenado especificando qualquer flexão dentro da caixa para vir na primeira posição. Escolhemos o terceiro que recebe uma ordem de -1, a cor do texto é alterada de preto para vermelho e o tamanho também é aumentado para discriminá -lo de outros.

Este terceiro flexão será removido da lista de pedidos. Ao fazer isso, o pedido não será mantido. A caixa que chegará à primeira posição perturbará a ordem de toda a div.

Na execução, você verá que o primeiro bloco é movido em direção ao direito de formar um lugar para os 3^rd bloquear. Dessa forma, podemos reordenar o Flexbox especificando qualquer um flex.

Conclusão

Neste artigo, tentamos descrever a propriedade CSS Flex Order. A ordem flexível é aplicada adicionando cores e texto à flexão, mostrando que a ordem que mencionamos é mantida. Além disso, podemos reverter a ordem mencionando o fluxo de direção flexível em ordem invertida. A direção horizontal é a direção padrão do flex; Também pode ser alterado na direção vertical, alterando a direção da linha na coluna. Todos esses efeitos são explicados usando códigos especificados para explicar o conceito de ordem flexível.

.