Artigos CSS Vale a pena ver CSS de novo
Você ainda não é assinante?

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.

Sem o Flexbox os elementos serão posicionados um abaixo do outro.
Figura 1. Sem o Flexbox os elementos serão posicionados um abaixo do outro.

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.

Sem o Flexbox os elementos serão posicionados um abaixo do outro.
Figura 2.Com o Flexbox os elementos serão posicionados um ao lado do outro.

Se quisermos centralizá-los na tela, conforme a Figura 3, usamos:


.container {
    display: flex;
    justify-content: center;
}
Apenas uma instrução simples como justify-content:center já pode centralizar nosso conteúdo facilmente.
Figura 3. Com o Flexbox os elementos serão centralizados.

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:

Guias de consulta