Flexbox é uma forma elegante de se trabalhar com posicionamento de elementos em websites de maneira fácil e flexível. Introduzido no CSS3, esse novo recurso manipula elementos web para apresentação eficaz e eficientemente de um jeito que vem facilitando muito a vida de web developers front-end, embora, também, muitos o desconheçam.
Esse artigo se preocupa em apresentar e demonstrar o básico do uso de Flexbox.
 |
| Flexbox - Caixas Flexíveis |
Antes do Flexbox
Quando surge uma nova tecnologia, a primeira pergunta que nos vem a cabeça é: por que devo usá-la? O que ela traz de diferente e benéfico em relação as que já existem? Para responder essa pergunta é preciso olhar para como os layouts de páginas eram construídos para posicionar elementos antes desse recurso.
Veja a imagem abaixo. Ambas são um contêiner com elemento(s) dentro, alinhado(s) ao centro do próprio contêiner.
O código básico do contêiner e do item do contêiner seria:
| HTML | CSS |
|---|---|
| <div class="container"> <div class="item"></div> </div> |
.container { width: 250px; height: 130px; background: #002342; border-radius: 10px; } .item { width: 50px; height: 50px; background: #ffffff; border-radius: 5px; box-shadow: 3px 3px 1px #ccc; } |
Este seria o resultado:
Agora vem o desafio: como posicionar o item no centro do contêiner? Realize suas tentativas antes de prosseguir a leitura (sem utilizar o flexbox) e, se possível, poste nos comentários.
É possível criar algumas soluções combinando atributos como display, position, margin, line-height e até mesmo clear. O objetivo desse artigo não é apresentar todas maneiras e combinações entre elas, assim como vantagens e desvantagens; mas, ao menos três soluções são apresentadas a seguir e os seus aspectos são discutidos. Você pode interagir com a aplicação abaixo para ver algumas dessas possíveis soluções.
Com line-height é possível colocar um valor fixo para o elemento ficar no centro da div contêiner. Mas se você redimensionar o contêiner, o valor precisa ser reajustado, no entanto é ineficiente.
Com transform a centralização funciona com redimensionamento do contêiner, mas após a inserção de novos itens, eles são colocados um abaixo do outro. Um comportamento estranho se quiséssemos que fossem colocados ao lado e não abaixo.
Por fim, utilizando o modo de exibição como table-cell, os elementos ficam uniformemente distribuídos como em uma tabela e centralizados. Mas provavelmente você deve ter notado que a opção de redimensionar o contêiner desapareceu e ele aparenta ser um elemento "congelado".
Um problema maior seria se tivéssemos três itens e quiséssemos o resultado a seguir, sem usar float, já que float pode trazer resultados indesejados ao realmente "flutuar" um elemento sobre outro que estava abaixo, embora fique na posição especificada.
 |
| Um item alinhado à esquerda, centro e direita |
Chegou, então, o momento de vermos como flexbox pode tornar esse trabalho mais fácil e simples.
Com Flexbox
Introduzido no CSS3, o Flexbox Layout Module (algo próximo de Módulo de Layout com Caixas Flexíveis) é um modo de exibição de elementos alternativo aos 4 tipos que já existiam no CSS 2.1, que são:
- Block, para seções em uma página, por isso são alinhados verticalmente.
- Inline, para textos, não permite redimensionar tamanho de elementos.
- Table, para dados de tabela em formato bidimensional.
- Posicioned, para explicitar a posição de um elemento.
A vantagem de se utilizar "caixas flexíveis" é que não é preciso trabalhar com posicionamento explícito ou flutuação de elementos, garantindo responsividade no design em desenvolvimento, como é citado no W3School (tradução livre):
"O Módulo de Layout de Caixa Flexível torna mais fácil projetar uma estrutura de layout flexível e responsiva sem o uso de flutuação ou posicionamento."
Ideia Central
A ideia central por trás do Flexbox é exatamente a de um contêiner, que envolve elementos, e os próprios elementos que são organizados e distribuídos dentro do contêiner. Adicionando o modo de display como flex, a manipulação dos elementos se torna mais simples e é possível resolver os dois problemas apresentados anteriormente.
Código:
.container {
display: flex;
align-items: center;
justify-content: center;
width: 250px;
height: 130px;
background: #002342;
border-radius: 10px;
}
.item {
width: 50px;
height: 50px;
background: #ffffff;
border-radius: 5px;
box-shadow: 3px 3px 1px #ccc;
}
Note como três linhas de CSS resolveram nosso problema. Display (modo de exibição), align-items (alinhamento dos itens verticalmente) e justify-content (alinhamento dos itens horizontalmente).
Propriedades
Resumo das principais propriedades do flexbox:| Propriedade | Descrição |
|---|---|
| display | especifica o tipo de caixa usada no HTML |
| flex-direction | indica a direção dos itens |
| justify-content | alinhamento horizontal |
| align-items | alinhamento vertical |
| flex-wrap | indica quebra de linha ou não para os itens |
| align-content | modifica o comportamento do flex-wrap |
| flex-flow | Atalho para flex-direction e flex-wrap |
| order | especifica a ordem do elemento em relação aos outros, dentro do mesmo contêiner |
| align-self | Utilizado em itens para sobrescrever a propriedade align-items |
| flex | atalho para flex-grow, flex-shrink e flex-basis |
Você pode usar a aplicação abaixo para experimentar um pouco dessas propriedades e tentar reproduzir os problemas apresentados, como por exemplo configurando flex-direction para row, justify-content para space-between e align-items para center. Não se esqueça de redimensionar o contêiner para visualizar o resultado e adicionar pelo menos mais dois itens.
Flex-wrap
Flex-direction
Justify-content
Align-items
1
.container {
display: flex;
flex-wrap: inheret;
flex-direction: inheret;
justify-content: inheret;
align-items: inheret;
margin: 5px;
width: 250px;
height: 130px;
background: #002342;
border-radius: 10px;
}
.item {
margin: 5px;
width: 50px;
height: 50px;
background: #ffffff;
border-radius: 5px;
box-shadow: 3px 3px 1px #ccc;
}
Compatibilidade
Flexbox é uma maneira inovadora de trabalhar o posicionamento de elementos em uma página web de forma simples e elegante. Frameworks web como Bootstrap 4 o utilizam (em contraste a versão 3, que usa flutuação de elementos) e a sua aceitação na comunidade front-end está cada vez crescendo mais e mais, além de existir muito conteúdo interessante a respeito, inclusive no W3School.
Quanto a sua compatibilidade com navegadores, todos os navegadores modernos o suportam e o Internet Explorer 11 também, embora parcialmente. Mas versões do IE como 8 e 7 não têm suporte. Você pode conferir isto no Can I Use.
 |
| Suporte dos navegadores ao Flexbox (Fonte: Can I Use, disponível em <https://caniuse.com/#feat=flexbox>) |
O que você aprendeu
Você aprendeu especificamente o que é Flexbox, um pouco de seu uso assim como uma noção básica de suas principais propriedades e, mais que isso, viu o que seu uso traz de vantagem e possíveis desvantagem por questão de compatibilidade com navegadores antigos.
Referência Bibliográfica
CAN I USE. Support tables for HTML5, CSS3, etc. Disponível em <https://caniuse.com/#feat=flexbox>. Acesso em 12 out. 2018.
MDN WEB DOCS. Conceitos Básicos do Flexbox - CSS. Disponível em <https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox>. Acesso em 12 out. 2018.
W3School. CSS Flexbox (Flexible Box). Disponível em <https://www.w3schools.com/css/css3_flexbox.asp>. Acesso em 12 out. 2018.
W3School. Bootstrap 4 Flex. Disponível em <https://www.w3schools.com/bootstrap4/bootstrap_flex.asp>. Acesso em 12 out. 2018.
Para citar esse artigo:
Comentários
Postar um comentário