Como Usar o Flexbox Css para Otimizar a Construção do Site

Como Usar o Flexbox Css para Otimizar a Construção do Site

Postado em: 22 de agosto de 2018
Compartilhe

Você acha difícil posicionar os elementos adequadamente ao desenvolver um site? O Flexbox vai facilitar a sua vida, descubra como!

Quando o assunto é desenvolver sites, quem nunca se deparou com as famosas situações de posicionamentos na estrutura de um projeto? Seja um desenvolvedor em início de carreira, ou até muito experiente, todos já passaram ou passam por algumas indagações relacionadas à estruturação do layout.

Como usar, o que usar e até mesmo dúvidas se determinada aplicação contribui ou não para o design responsivo. Enfim, o fato é que ao longo dos anos, o drama do posicionamento de elementos persiste.

Por outro lado, sempre aparecem novas funcionalidades e ferramentas para facilitar e ajudar o desenvolvedor em seu projeto. Temos vários bons exemplos atuais que auxiliam e facilitam bastante a estruturação do layout, como o Flexbox e o CSS Grid.

Hoje, vamos falar um pouco mais sobre Flexbox Css, uma ferramenta que tenho total proximidade e uso com frequência. Mas fique tranquilo, é tudo muito simples de entender e aplicar. Duvida? Então confira neste artigo!

Quando usar Flexbox?

A primeira coisa a se pensar é qual o resultado você deseja, um bom e velho exemplo são os blocos, normalmente chamados de DIV.

No modelo abaixo criamos uma estrutura muito simples, onde a div main é a chave de tudo, e é exatamente nela que aplicamos o Flexbox. Inicialmente, isso explica de forma muito simples o primeiro passo com a ferramenta.

// HTML

<div class=”main”>

<divclass=”box-meio”>Box meio</div>

</div>

 

// CSS

.main {

display: -webkit-flex;

display: flex;

}

É exatamente isso o que você está pensando, atribuindo as propriedades display:flex  na div .main, ela determina o posicionamento de tudo que se encontra dentro dela, no caso a div .box-meio.

São muitas as possibilidades de posicionamento com Flexbox Css,  como dito anteriormente, basta saber o resultado final que seu projeto precisa.

Dicas Essenciais para Usar o Flexbox

Normalmente, uso propriedades como: justify-content, align-items, flex-direction, align-content, mas são muitas às opções. Tantas que existem inúmeros sites que explicam detalhadamente sobre cada uma delas, com tutoriais minuciosos que representam um verdadeiro prato cheio para quem precisa saber mais sobre como aplicar esse facilitador!

Outro detalhe muito importante e essencial para o funcionamento correto da ferramenta é lembrar que, para seu bloco transformar-se em um Flex Container, é necessário que o mesmo tenha a propriedade e o parâmetro display: flex. Essa atribuição é o que torna os seus filhos flex-itens, ou seja, como no exemplo anterior a div .main, dita o posicionamento de tudo que vem dentro dela.

Aproveite a Versatilidade

Os principais navegadores dão suporte ao Flexbox e, como os desenvolvedores estão usando cada vez mais este instrumento, a tendência é que as versões antigas dos navegadores tenham cada vez menos adeptos em longo prazo. Ou seja, o momento é muito oportuno para pensar a respeito em seus projetos.

O sucesso do Flexbox é tão grande que mesmo o poderoso sistema de grids Bootstrap aderiu toda essa  flexibilidade ao posicionamento de linhas e colunas em sua nova versão (Bootstrap 4), tudo isso de maneira muito intuitiva e fácil de usar, conforme explicado melhor aqui.

Se você é mais um que fica de cabelo em pé com o posicionamento de elementos do layout, não perca tempo: descubra o mundo de oportunidades e facilidades que o Flexbox oferece!

E se está em dúvidas sobre a estruturação do seu layout, deixe na mão de quem realmente entende da criação de sites: os programadores e desenvolvedores web da Ciawebsites! 🤩

Ligue e faça seu orçamento: (31) 3564-2776.

Músico e Desenvolvedor Front End. Guitarrista da banda Raising Conviction descobri logo cedo o amor pela música (aos 11 anos de idade), por influência dos meus pais. Com o passar do tempo, descobri outra paixão: o desenvolvimento web. De lá pra cá, me tornei um amante assumido da tecnologia, onde busco aprender e me superar cada vez mais, seja buscando novas ferramentas ou soluções digitais para tornar tudo à nossa volta mais prático e rápido. Afinal de contas é para isso que serve a tecnologia, melhorar tudo a cada novo passo. Lema: o bom e velho metal + aquela cerveja gelada + desenvolver um site com aquele layout desafiador = Satisfação Garantida!

Compartilhe

Gostou do post? Comenta aí!