Este artigo ilustrará o método para ordenar itens flex e grid no Tailwind CSS.
Como solicitar itens flexíveis e de grade no Tailwind?
Para solicitar itens flexíveis e de grade no Tailwind CSS, crie um arquivo HTML. Em seguida, use o utilitário “order-” e especifique o valor do pedido no programa HTML para alterar a ordem dos itens flexíveis e da grade. Ele permite que os itens flexíveis sejam renderizados em uma ordem diferente daquela exibida no DOM (Document Object Model). Para garantir as alterações, visualize a página da Web em HTML.
Veja as etapas fornecidas para uma melhor compreensão:
Etapa 1: solicitar itens flexíveis e de grade no programa HTML
Faça um programa HTML e use o “ ordem-
< corpo >
< div aula = 'flex h-20' >
< div aula = 'order-3 bg-red-500 w-32 m-1' > 1 < / div >
< div aula = 'ordem último bg-yellow-500 w-32 m-1' > 2 < / div >
< div aula = 'order-first bg-teal-500 w-32 m-1' > 3 < / div >
< div aula = 'order-2 bg-orange-500 w-32 m-1' > 4 < / div >
< / div >
< / corpo >
Aqui:
- “ pedido-3 ” define a ordem do elemento como 3 e o flex item será posicionado como o terceiro item dentro do flex container.
- “ último pedido ” define a ordem do elemento para ser a última e será o último item dentro do flex container.
- “ primeiro pedido ” especifica a ordem do elemento a ser o primeiro e será posicionado como o primeiro item dentro do flex container.
- “ pedido-2 ” define a ordem do elemento como 2 e ele será posicionado como o segundo item dentro do flex container.
- “ w-32 ” aplica 32 unidades de largura a cada item flexível.
- “ m-1 ” adiciona 1 unidade de margem em torno de cada item flexível.
Etapa 2: verificar a saída
Visualize a página da Web em HTML para garantir que os itens flex e grid foram ordenados:
Pode-se observar que os itens flex e grid foram ordenados com sucesso de acordo com o que foram especificados.
Conclusão
Para solicitar itens flexíveis e de grade no Tailwind CSS, use o botão “ pedido-