O programador está sempre preocupado em utilizar bem o seu tempo, já que perguntas como “será que vai demorar para construir essas telas?” ou “será que o prazo para entrega está adequado a complexidade das funcionalidades?”, fazem parte do dia a dia. Não adianta a aplicação ficar bonita e não funcionar da forma como foi planejada. Com isso em mente, saiba que os recursos mais modernos do CSS3, adicionados a linguagem para facilitar o nosso dia a dia, podem nos ajudar a nos dedicarmos mais ao back-end da aplicação, como assistiremos neste DevCast.
Por que se manter atualizado com as novidades do CSS?
Assim como muitas outras funcionalidades que surgiram nos últimos anos, revolucionando o desenvolvimento front-end, a última especificação do CSS 3 recebeu novas propriedades que podem diminuir e muito o tempo gasto para a construção de interfaces com um forte apelo visual, garantindo a usabilidade da aplicação.
Uma dessas evoluções é o Flexbox, que permitirá a estruturação de layouts fluídos e responsivos com pouco código. Vamos entender como funciona esta propriedade?
O Flexbox é nada menos do que um módulo do CSS3 feito para melhorar o alinhamento de elementos, a direção de seu fluxo e a ordem em que devem figurar em um determinado container mesmo que estes possuam dimensões variáveis ou desconhecidas. A principal característica do container flex é sua habilidade de modificar a largura ou altura de seus elementos-filhos, visando preencher o espaço disponível da melhor forma possível em diferentes tamanhos de tela.
Muitos desenvolvedores já fazem uso do layout Flexbox, pois utilizá-lo torna mais fácil o posicionamento de elementos em layouts complexos com pouco código. Os dois principais componentes de um layout Flexbox são o container e seus itens. Por exemplo:
<nav class="container">
<div>Home</div>
<div>busca</div>
<div>sair</div>
</nav>
Antes de aplicarmos o Flexbox a este código HTML, o mesmo será renderizado com seus elementos um abaixo do outro, conforme visto na Figura 1.
Para colocá-los lado a lado, podemos adicionar a propriedade display:flex conforme o código abaixo:
.container {
display: flex;
}
Agora estes elementos ficarão automaticamente alinhados um ao lado do outro como visto na Figura 2.
Se quisermos centralizá-los na tela, conforme a Figura 3, usamos:
.container {
display: flex;
justify-content: center;
}
Como podemos ver, esta solução exige pouquíssimo código e é a abordagem mais utilizada hoje em dia na construção de diversos tipos de layout. Portanto, é importante sempre termos em mente que nos mantermos atualizados em relação às linguagens que utilizamos podem nos ajudar a poupar muito trabalho desnecessário.
Sugestão de conteúdo
Se você quiser saber mais detalhes sobre o Flexbox, conheça o nosso curso:
