Flexbox ou flex container é um layout que permite aos usuários alinhar e distribuir elementos dentro de um container. Tailwind CSS oferece várias classes utilitárias para criar e trabalhar com o flexbox. Um contêiner flexível de nível de caixa é um contêiner flexível que se comporta/age como um elemento de nível de bloco e cria um bloco. Ele ocupa toda a largura de seu elemento pai e faz uma nova linha depois de si mesmo.
Este artigo exemplificará o método de criação de um contêiner flexível em nível de bloco no Tailwind.
Como criar/criar um contêiner flexível em nível de bloco no Tailwind?
Para criar um contêiner flex específico em nível de bloco no Tailwind, crie uma estrutura HTML. Em seguida, adicione o “ flex ” com o
Sintaxe
< div aula = 'flexionar...' >
...
div >
Código
< corpo >
< div aula = 'flex gap-2 m-2 border-2 border-black' >
< div aula = 'bg-yellow-500 p-4' > Primeiro item div >
< div aula = 'bg-yellow-500 p-4' > Segundo item div >
< div aula = 'bg-yellow-500 p-4' > Terceiro item div >
div >
corpo >
Aqui, no contêiner pai
-
- “ flex ” é utilizada para criar um contêiner flexível de nível de bloco.
- “ lacuna-2 ” adiciona 2 unidades de espaçamento entre os elementos filho do flex.
- “ m-2 ” A classe adiciona 2 unidades de margem a todos os lados do contêiner.
- “ fronteira-2 ” adiciona a borda ao contêiner com 2 unidades de largura.
- “ borda preta ” define a cor da borda como preta.
Nos elementos flex filhos:
-
- “ bg-amarelo-500 ” aplica uma cor amarela ao plano de fundo do item flexível.
- “ p-4 ” adiciona o preenchimento de 4 unidades a todos os lados dos itens flexíveis.
Saída
Na saída acima, a borda representa que o contêiner é um contêiner flexível em nível de bloco, que ocupa toda a largura de seu elemento pai (navegador).
Como alternativa, o usuário pode garantir isso inspecionando o elemento flex container na página da web:
A saída acima indica que o contêiner é um contêiner flexível em nível de bloco.
Conclusão:
Para criar um contêiner flexível em nível de bloco no Tailwind, é necessário adicionar o “ flex ” classe de utilitário com o contêiner específico e especifique seus elementos filho. Os usuários podem definir e modificar itens flexíveis de acordo com suas necessidades. Para verificação, adicione a borda ao contêiner e exiba a página da Web ou inspecione esse elemento na página da Web. Este artigo explicou o método de criação de um contêiner flexível em nível de bloco no Tailwind.