Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Posso usar o "Flex-Box" ao invés de usar o width?

Na aula a professora falou que para deixar tanto o input quanto o button um de baixo do outro teremos que utilizar o "w-full" em cada um, mas ao invés de fazer isso, eu poderia criar uma classe para a form e utilizar o Flex-Box?

Segue o trecho de código que a professora passou:

<form>
                <label class="text-sm font-bold text-gray-700" for="email">Email</label>
                <input class="text-sm w-full" id="email" type="email" placeholder="Digite seu endereço de email">                    
                <button class="font-bold text-white bg-azul-escuro w-full" type="button">Inscreva-se</button>
</form>

Aqui ela utiliza o "w-full" para os elementos ocuparem 100% do espaço e ficar um de abaixo do outro, mas tentei fazer por conta própria e cheguei no seguinte resultado:

<form class="flex flex-col">
                <label class="text-sm font-bold text-gray-700" for="email">Email</label>
                <input class="text-sm" id="email" type="email" placeholder="Digite seu endereço de email">                    
                <button class="font-bold text-white bg-azul-escuro" type="button">Inscreva-se</button>
</form>

Desse jeito eu não utilizei o "w-full" mas sim criei uma classe para a "form" e apliquei os efeitos usando o "flex" e "flex-col". Está errado ou posso fazer desse jeito também?

1 resposta
solução!

Olá Nathan, tudo certo?

Não há uma abordagem única e correta para estruturar o layout em HTML e CSS, e diferentes métodos podem atingir o mesmo resultado. O uso de w-full é uma maneira de fazer com que os elementos ocupem 100% da largura do contêiner pai, e isso é útil para garantir que os elementos de input e button se estendam por toda a largura disponível.

Ambas as abordagens são aceitáveis, e a escolha entre elas pode depender das necessidades específicas do seu layout e das preferências de codificação. O uso de flexbox pode oferecer mais flexibilidade em termos de alinhamento e distribuição de espaço se você precisar realizar ajustes adicionais no layout.

Portanto, se o seu código está atendendo às suas necessidades de layout e você se sente confortável com a abordagem flexbox, não há nada de errado em utilizar essa técnica. O importante é garantir que o seu código seja legível, fácil de manter e atenda aos requisitos de design e layout do seu projeto.

Espero ter ajudado!

Caso tenha dúvidas, fico à disposição.

Abraços e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software