Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. HTML & CSS
Code

Uma Introdução ao Módulo Flexbox do CSS

by
Difficulty:BeginnerLength:MediumLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

CSS, apesar do baixo nível de habilidade necessário, sempre tem uma funcionalidade matadora debaixo da manga. Lembre-se como consultas de mídia permitiram os layouts responsivos e revolucionaram o desenvolvimento front-end? Hoje, falaremos sobre um novo modo de layout, o flexbox - novo no CSS3. Temos certezas que está louco por isso! Comecemo, agora!

Mudanças subsequentes a Técnicas e Software

Certos aspectos de aplicações e técnicas usadas nesse tutorial mudaram desde que foi publicado originalmente. Talvez torne-o um pouco difícil de acompanhar. Recomendamos dar uma olhada nesse tutoriais mais recentes:


Suporte ao Flexbox do CSS

Atualmente, a especificação Flexbox do CSS é um rascunho em andamento e vai mudar! Os exemplos desse tutorial podem falhar no futuro, já que navegadores alterarão suas implementações do flexbox para casar com a especificação. O objetivo desse tutorial é prover um entendimento básico do flexbox do CSS e demonstrar como usá-lo em nossas páginas.

Por favor, perceba que esse tutorial usará exemplos não pré-fixados para ser breve. Vejamos no canise.com a lista de navegadores que suportam o módulo do flexbox e usemos os préfixos necessários em nossos projetos.


Planos de Fundo em Modos de Layout

Flexbox do CSS é um modo de layout essencial. Existem outros modos de layout no CSS há um bom tempo. Um exemplo é o modo de layout block (display: block). Layouts em bloco são ótimos para estilizar documentos inteiros e vários elementos são lidados como nível de bloco, por padrão: incluindo elementos comuns, como parágrafos e div.

Ocasionalmente, quando um elemento não é bloco, é provável ser inline. Elementos de nível inline incluem as tags de âncora, input e strong. A ferramenta de desenvolvedor no Chrome permitem ver o "estilo computado" do elemento, uma ótima forma de determinar quais propriedades CSS e valores foram aplicadas aos elementos que não foram adicionadas pelo desenvolvedor.

Uma dica para acessar o estilo computado de um elemento usando o método window.getComputedStyle do JavaScript.

Fora os modos de layout de bloco e inline, o CSS também tem os modos posicionados e tabelados. Estamos referenciando outros modos de layout porque o flexbox é um novo modo, que nos permite maior flexibilidade ao estruturar páginas.

O layout com flexbox provê-nos uma técnica simples que facilitar ditar a forma como os itens são estruturados.


Como Podemos Usar Flexbox?

Para forçar um elemento a usar flexbox, adicionamos display: flexbox.

Por padrão, um elemento com flexbox é um elemento de bloco. Podemos definir um elemento inline assim:

Parecido ao exemplo acima, aplicaremos flexbox ao elemento pai do elemento que queremos controlar o posicionamento. Vejamos um exemplo simples.

Percebamos que os elementos itens da lista agora fluem horizontalmente, parecido com o que seriam renderiados se usássemos float: left. Os elementos itens da lista podem ser visto como itens flexbox.

Nota: um descendente direto de um flexbox, posicionado absolutamente (position: absolute) não pode ser um item flexbox, já que quebra o fluxo normal.

Very basic example

Percebamos que os items (da lista) assumiram um fluxo horizontal (a direção do fluxo também é conhecida como eixo principal). Felizmente, somos capazes de controlar esse fluxo (e assim o eixo principal) e evitar o uso de floats!


Explorando flex-direction

Podemos aplicar a propriedade flex-direction e especificar a direção que queremos estruturar os itens flexbox. A propriedade aceita os valores row, row-reverse, column e column-reverse.  valor padrão é row.

Usando marcação semelhante aos exemplos acima, podemos adicionar uma outra propriedade CSS: flex-direction: column.

Very basic example

Se estiver acompanhando, tente mudar o valor de flex-direction para column-reverse e veja como os itens dlexbox são dispostos em um layout de colunas mas na ordem reversa.


Envolvendo Com flex-wrap

Por padrão, um flexbox é uma linha única. Linha essa que não pode ter filhos extravasando pelo uso de flex-wrap. Podemos instruir o flexbox a ser multi-linha, fazendo os itns flexbox quebrar na nova linha. flex-wrap aceita os valores nowrap (padrão), wrap e wrap-reverse.

Very basic example

Notemos como, na demo, os itens "quebram", já que não podem ser contidos em seu pequeno pai de 100px. Usando a ferramenta para desenvolvedores, tentemos habilitar overflow: hidden e -webkit-flex-wrap. Sem flex-wrap e overflow, os itens ultrapassam o pai.

Há uma sintaxe curta útil para flex-direction e flex-wrap, como visto abaixo:


Um Exemplo Rápido

Embora não seja a coisa mais bela, o menu exemplo mostra alguns usos do flexbox.

  • Uma largura de 300px foi usada para o flexbox em si, para demonstrar a quebra.
  • Uma ideia geral para um menu seria usar consultas de mídia para servir um menu mobile, onde flex-direction: column faz sentido.
Boring menu

O que seria legal é instruir os ites flexbox a espalharem-se pelo espaço disponível - algo como isso. Eis para isso que a propriedade flex existe.

Boring menu

Flexão

Flexão é a capacidade do container alterar sua largura ou altura para preencher o espaço disponível.

A propriedade flex é um recurso legal, oferecendo algo novo e que seria difícil realizar no passado.

Com ela, podemos configurar um tamanho para nossos itens. Mas, tenhamos em mentes que a propriedade flex é aplicada aos itens dentro da flexbox não nela em si. O navegador tentará configurar o tmanho dos itens, linha por linha. E, então, tentará distribuir igualmente os espaço disponível entre os itens. Se virmos o menu exemplo, usarmos a ferramenta para desenvolvedores, descobriremos a largura desses itens, que é 78px. Investiguemos mais a fundo...

The rcomputed width of a flexbox item

A pergunta é "como que os itens do flexbox ganham esse espaço extra se configuramos sua largura pra 60px?"

The rcomputed width of a flexbox item
  • Na primeira linha, há três itens, com flex: 60px (totalizando 180px).
  • A largura de toda a flexbox é 300px. Isso, menos 180px (o total dos itens), dá 120px. Contudo, não parece que temos 120px de espaço disponível.
  • Cada item tem margin-right: 10px, que totaliza 30px para os três, deixando-nos 90px de espaço livre.
  • Mas, espere, cada um deles tem padding: 5px - ou seja, 5px de espaço interno em cima, direita, baixo e esquerda. Assim, cada item pega mais 10px com espaçamento interno na sua largura. Restado 60px livres - ou quase.
  • Cada item tem border: 1px solid black - 1px em cada um dos lados. Totalizando dois pixels por item, logo para os três, mais 6px. Temos, agora, 54px livres.
  • Com 54px livres, podemos distribuir esse valor igualmente entre os três itens da primeira linha - dando 18px/item, o que faz sentido obtermos 78px, sendo que colocamos 60px de largura para os itens.

Como deve ter percebido, a útima linha (a do "Contact us") flexiona tomando toda a largura da flexbox.

Itens do flexbox podem ter larguras diferentes. Um item com flex: 2 é o mesmo que ter o dobro de tamanho que um com flex: 1. Assim, quando se fala em distribuir espaço livre entre dois itens, um com flex: 1 receberá metade do que um com flex: 2 recebe.


Ordenação

Flexbox dá-nos uma forma fácil de ordenar certos itens com CSS, independente da ordem que aparecem no documeto. Eis um exemplo.

Dada a marcação a seguir:

Podemos mirar o primeiro item da linha usando nth-child e, então, aplicar a propriedade flex-order nele. Itens do flexbox tem, por padrão, ordem 0. Ao dar ao primeiro item da lista order 2, o navegador mostrará os outros ites primeiros e só então o primeiro item.


Alinhamento

Somos capazes de alinhar itens do flexbox no eixo principal usando a propriedade flex-pack. Essa propriedade aceita os seguintes valores:

  • start
  • end
  • center
  • justify
  • distribute

A demo desse tutorial provê alguns exemplos dos diferentes tipos de alinhamento. Vejams que no exemplo do jsbin os itens foram centralizados apenas no em um eixo: o principal. Ou seja, o eixo em que os itens do flexbox estão posicionados.

Podemos mudar o eixo alterando a propriedade flex-direction. Ao usar column, ve-se, facilmente, que o eixo principal mudou. Para afetar o alinhamento do outro eixo (perpendicular ao eixo principal), podemos usar flex-align.

Centralizando um Item

Definitavamente, veja nossa demo se estiver confuso.

Centered example

Leitura Adicional

Obrigado pela leitura e acesse o caniuse.com por uma lista de navegdor que suportam o módulo flexbox, assim comos os prefixos de fornecedores que devem ser referenciados.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.