Tempo de leitura: 12 minutos
Se você é um desenvolvedor web mais antigo, deve ter algumas lembranças da época em que tínhamos que montar layouts com tabelas. Com a chegada triunfal do Flexbox CSS, as coisas mudaram.
Finalmente o layout CSS chegou a um nível de maturidade incrível, hoje conta com ferramentas dedicadas ao desenvolvimento de layouts bem mais complexas, substituindo as diversas soluções alternativas de uso de tabelas, floats, position absolut e assim por diante.
O Flexbox (ou o Flexible Box Layout Module) foi o primeiro desses módulos dedicado ao layout, seguido pelo CSS Grid Layout.
Com a chegada do CSS Grid Layouts, você deve estar se perguntando se o flexbox realmente é necessário.
Embora haja alguma sobreposição no que eles podem realizar, cada um deles tem propósitos e funções muito específicos no CSS.
Como regra geral, o ponto chave para o flexbox é o layout em uma dimensão (digamos, que seja uma sequência de itens semelhantes), enquanto o Grid é ideal para o layout em duas dimensões (como os elementos de uma página inteira).
E o que nós vamos aprender neste artigo sobre Flexbox CSS?
// Trabalhando com Flexbox CSS
// Propriedade order do Flexbox CSS
// Como alinhar itens com o Flexbox CSS
// Justificando o conteúdo com o Flexbox CSS
O que é o Flexbox CSS
Flexbox, ou também conhecido como Flexible Box Layout, é um jeito novo de layout em CSS3, projetado para criar layouts de aplicações web mais complexas.
No CSS 2.1, 4 modos de layout foram definidos para determinar o tamanho e a posição dos boxes que são baseados na relação com seus boxes irmãos e ancestrais:
blockserve para fazer o layout de documentos e documentos na página de forma vertical;inlinepara dispor textos de forma horizontal dentro dos elementos a nível de bloco;tabledesenvolvido para dados em 2 dimensões no formato tabular;positionedfaz o posicionamento explícito sem se importar muito com os outros elementos do documento;
Flexbox é parecido com o layout em bloco (block), com exceção que ele não tem muitas das propriedades que podem ser utilizadas em um layout em bloco, como floats e columns.
Vantagens do Flexbox CSS
Algumas das vantagens do flexbox são:
- O conteúdo da página pode ser colocado em qualquer direção (direita, esquerda, para baixo ou para cima);
- Pedaços de conteúdo podem ter sua ordem visual invertida ou reorganizada;
- Itens podem “flexionar” seus tamanhos para responder ao espaço disponível e podem ser alinhados em relação ao seu contêiner ou a outro;
- Conseguir layouts de colunas iguais (independentemente da quantidade de conteúdo dentro de cada coluna) é muito fácil;
Ou seja, o Flexbox é mais flexível por distribuir espaço e alinhar conteúdo nas formas que aplicações web mais complexas geralmente precisam.
Isso acaba resolvendo muitos outros problemas de layout que os desenvolvedores front-end tem lutado para resolver ao longo dos anos — como por exemplo a centralização vertical.
Para ilustrar as várias propriedades e possibilidades, vamos supor o seguinte layout simples para algumas das demonstrações neste artigo:
<div class="example">
<header>
header content here
</header>
<main class="main">
<nav>
nav content here
</nav>
<div class="content">
main content here
</div>
<aside>
aside content here
</aside>
</main>
<footer>
footer content here
</footer>
</div>A primeira etapa consiste em colocar os elementos dentro .main, ou seja, <nav>e <aside>, lado a lado.
Sem o flexbox, provavelmente todos os três elementos iriam flutuar e fazer ele funcionar como desejado não seria muito simples.
Além do mais, o modo tradicional de fazer as coisas apresentaria um problema bem conhecido: cada coluna é tão alta quanto seu conteúdo.
A consequência disso seria você definir uma altura igual para todas as três colunas para ter o mesmo tamanho.
Trabalhando com Flexbox CSS
O elemento principal do flexbox é o novo flex value da propriedade de display, que precisa ser definido para o elemento container.
Fazer isso transforma seus filhos em “itens flexíveis”. Por padrão esses itens adquirem algumas propriedades úteis.
Por exemplo, eles são colocados lado a lado e os elementos sem uma largura especificada ocupam automaticamente o espaço restante.
Então, se você definir display: flex para .main, seu elemento .content filho é automaticamente espremido entre <nav> e <aside>.
Não há mais cálculos a fazer, quão útil é isso? Como um bônus especial, todos esses três elementos magicamente têm a mesma altura.
.main {
display: flex;
}
Baixe Gratuitamente o Guia Completo de Como se Tornar um Desenvolvedor Full StackTenha em mãos o livro digital que irá lhe ensinar tudo sobre as principais tecnologias web e fará você dar o ponta-pé inicial no Universo Full-Stack!
Propriedade order do Flexbox
Outra vantagem do flexbox é a capacidade de alterar facilmente a ordem dos elementos. Vamos supor que você tenha criado o layout acima para um cliente e agora ele quer que o .content venha antes do <nav>.
Normalmente, você mergulharia no código-fonte HTML e alteraria o pedido lá. Mas com o flexbox você pode realizar a tarefa completa no CSS. Basta definir a propriedade order de .content para -1e a coluna de conteúdo virá primeiro.
.main {
display: flex;
}
.content {
order: -1;
}Nesse caso, você não precisa declarar o pedido para as outras colunas:
Se você preferir especificar o valor da propriedade order de forma explícita para cada coluna, vá em frente e defina order 1 para .content, 2 para <nav> e 3 para <aside>.
Código-fonte HTML independente dos estilos CSS com o Flexbox
Mas seu cliente ainda está insatisfeito. Ele gostaria que o <footer> fosse o primeiro elemento na página, mesmo antes do <header>.
Mais uma vez, pode contar com o flexbox, pois ele realmente é seu amigo (embora em casos como este, a melhor maneira de contornar essa situação é educando seu cliente em vez de seguir o exemplo).
Você precisa reorganizar não apenas os elementos internos, mas também o exterior, a regra display: flex precisará ser definida <div class="example">.
Observou como você pode aninhar contêineres flexíveis em sua página web para obter o resultado desejado?
Porque <header>, <main.main> e <footer> são empilhados um em cima do outro, e ai você precisa primeiro definir um contexto vertical, e você pode rapidamente fazer isso com flex-direction: column.
Além disso, <footer> obtém o order value -1para que apareça primeiro na página.
.example {
display: flex;
flex-direction: column;
}
footer {
order: -1;
}Então, se você quiser alterar uma linha de elementos em uma coluna ou vice-versa, você pode utilizar a propriedade flex-direction e configurá-la para column ou row ( row é o valor padrão):
Porém, com grandes poderes vem grandes responsabilidades: lembre-se de que vários visitantes usarão o teclado para navegar em seus websites baseados em flexbox, portanto, se a ordem dos elementos na fonte HTML estiver em desacordo com o que aparece na tela, a acessibilidade pode tornar-se uma preocupação muito séria.
Como alinhar itens com o Flexbox CSS
Com o Flexbox também fica bastante simples alinhar seus elementos filho horizontalmente e verticalmente.
Você pode aplicar o mesmo alinhamento a todos os elementos dentro de um contêiner flexível align-items.
Se você quiser diferentes alinhamentos para itens individuais, use align-self.
O alinhamento dos elementos depende do valor da propriedade flex-direction.
Se seu valor for row (ou seja, os elementos são executados em uma linha horizontal), o alinhamento se aplica ao eixo vertical.
Se flex-direction estiver definido como column (nesse caso os elementos são executados em uma linha vertical), ele se aplica ao eixo horizontal.
Por exemplo, você tem várias formas e deseja alinhar de maneira diferente dentro de um elemento de contêiner. Você irá precisar:
- Definir a propriedade
align-selfde cada forma para o valor apropriado. Os valores possíveis são:center,stretch(o elemento está posicionado para encaixar o seu recipiente),flex-start,flex-end, ebaseline(o elemento está posicionado na linha de base do seu recipiente) - Definir o elemento recipiente para
display:flex - Finalmente, preste atenção à propriedade
flex-directionno contêiner pai, porque seu valor afeta o alinhamento das crianças.
.example {
display: flex;
flex-direction: column;
}
.red {
align-self: center;
}
.blue {
align-self: flex-start;
}
.pink {
align-self: flex-end;
}Tente alternar a propriedade flex-direction do recipiente pai na demonstração abaixo de row para column e vice-versa para ver esse comportamento em ação:
Se todos os elementos em um contêiner pai precisarem ser alinhados da mesma forma, você poderá usar a propriedade align-items no contêiner pai.
Os valores possíveis são center, flex-start, flex-end, stretch (valor padrão: itens são esticados para se ajustar ao seu recipiente), e baseline (itens são posicionados na linha de base dos seus recipientes).
.example {
display: flex;
align-items: center;
}Como sempre, tente alternar o valor da propriedade flex-direction no elemento pai entre row e column para ver como o efeito dos valores aplicados a align-items se comportam:
Justificando o conteúdo com o Flexbox CSS
Outra propriedade para alinhamento é justify-content, que é bem útil quando você deseja distribuir o espaço disponível uniformemente entre vários elementos.
Os valores aceitáveis são: center, flex-start, flex-end, space-between (itens são posicionados com os espaços entre as linhas), e space-around (itens são posicionados com espaço antes, entre e depois das linhas).
Por exemplo, dentro do <main> no modelo HTML simples que você está usando o tempo todo, você pode encontrar três elementos: <nav>, .content, e <aside>.
No momento, todos eles são empurrados para a esquerda da página. Se você gostaria de exibir estes três elementos de forma a criar algum espaço entre eles, mas não para os lados mais à esquerda e à direita do primeiro e último elemento respectivamente, defina justify-content dentro de .main (seu contêiner pai) para space-between:
.main {
display: flex;
justify-content: space-between;
}Tente também experimentar space-around e notar os resultados diferentes:
Na demonstração acima, eu também centralizei o texto dentro do <header> de forma horizontal e verticalmente usando justify-content (centralização horizontal) e align-items (centralização vertical) e definindo ambos para center:
header {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}Flexing Items Dimensions com Flexbox
Com a flex propriedade, você pode controlar o comprimento do elemento em relação a outros elementos dentro de um contêiner flexível.
Essa propriedade é um atalho para as seguintes propriedades individuais:
flex-grow– Um número especificando quanto o elemento irá crescer em relação a outros elementos flexíveisflex-shrink– Um número especificando quanto o elemento diminuirá em relação a outros elementos flexíveisflex-basis– O comprimento do elemento. Os valores aceitos são:auto,inheritou um número seguido por “%”, px , em ou qualquer outra unidade de comprimento.
Por exemplo, para obter três colunas iguais, basta definir flex: 1 para cada coluna e pronto:
nav, aside, .content {
flex: 1;
}Se você precisar que a área de conteúdo tenha o dobro da largura de <nav> e <aside> defina flex: 2para .content e deixe os outros dois em 1:
Isso é apenas a aplicação mais simples do flex im, também é possível definir flex-grow, flex-shrink e flex-basis, porém isso é assunto para um próximo artigo.
Conclusão de Flexbox CSS
Compreendeu como funciona o Flexbox CSS? Tenho algo ainda melhor pra você!
Deseja aprender com projetos práticos a criar aplicações completas utilizando os mais modernos frameworks do mercado?
>> Conheça o nosso treinamento completo “Pacote Full-Stack” e Domine as Tecnologias mais Atuais e Poderosas!
Com o Pacote Full-Stack, você não vai dominar apenas o CSS3 mas as maiores e principais tecnologias do mercado e se tornar um(a) Desenvolvedor(a) Full-Stack Completo, com salários que ultrapassam facilmente a faixa dos R$5.000,00. Ou ainda, poderá criar sua própria Agência/Empresa e ganhar quanto quiser. Você será dono(a) do próprio tempo!
