Flexbox CSS: Faça Layouts Incriveis com CSS

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?

// O que é o Flexbox CSS

// Vantagens do 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:

• block serve para fazer o layout de documentos e documentos na página de forma vertical;
• inline para dispor textos de forma horizontal dentro dos elementos a nível de bloco;
• table desenvolvido para dados em 2 dimensões no formato tabular;
• positioned faz 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 Stack

Tenha 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-self de 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, e baseline(o elemento está posicionado na linha de base do seu recipiente)
• Definir o elemento recipiente para display:flex
• Finalmente, preste atenção à propriedade flex-direction no 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íveis
• flex-shrink – Um número especificando quanto o elemento diminuirá em relação a outros elementos flexíveis
• flex-basis – O comprimento do elemento. Os valores aceitos são: auto, inherit ou 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 no desenvolvimento web? 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!