Desenvolvimento Web / CSS e CSS3

CSS FlexBox, trabalhando de forma otimizada com display flex

Aprenda tudo sobre o display flex para desenvolver sites de forma otimizada e flexível com FlexBox. Nesta aula veremos na prática todos os conceitos, aplicações e possibilidades em um conceito que promete organizar seu layout para qualquer dispositivo.

Por Robson V. Leite

Publicado por Robson V. Leite
em 24/11/2017 às 11h43

Lista VIP UpInside

Entre para nossa lista VIP e receba vídeo aulas, artigos e tutoriais exclusivos e com prioridade

  QUERO ENTRAR

Aula exclusiva UpInside Play

Acessar aula no Play

Compartilhe:

O FlexBox já é uma realidade em todos os navegadores e entrega a nós desenvolvedores o controle total do layout. Um padrão de desenvolvimento que leva a sério o conceito de ONE WEB deixando todos os seus elementos flexíveis como devem ser.

Com poucas linhas conseguimos parametrizar o site como um todo, distribuir conteúdo, ordenar, organizar e otimizar o site para qualquer dispositivo independentemente da tela.

Com FlexBox podemos parar de nos preocupar com quebramento de layout, redistribuição e cálculos para ajustar o visual nos mais diversos dispositivos. Tudo é flexível e calculado automaticamente para seus componentes aproveitarem o espaço e a disposição como deve ser. Vamos entender como isso funciona?

A marcação: Onde tudo começa

A marcação de um site projetado para ser flex sempre tem que contar com o elemento pai representado pela classe .flex e os elementos filhos representados pela classe .flex-item no exemplo abaixo:

<section class="flex">
<article class="flex-item">
  <h1>Trabalhando de forma otimizada com display flex | ITEM 1</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software.</p>
</article>

<article class="flex-item">
<h1>Trabalhando de forma otimizada com display flex | ITEM 2</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</article>

<article class="flex-item">
<h1>Trabalhando de forma otimizada com display flex | ITEM 3</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
</article>

<article class="flex-item">
  <h1>Trabalhando de forma otimizada com display flex | ITEM 4</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</article>
</section>

Com isso podemos começar a dar os comandos para nossos elementos e projetar o site de forma inteligente e otimizada.

FlexBox: Um pai inteligente que sabe lidar com os filhos:

O flexbox na verdade é o elemento pai que possui o formato (display) flexível (flex). E sendo assim todos os elementos filhos deste serão controlados por suas propriedades.

Por exemplo:

display: flex;
flex-flow: row wrap;
justify-content: space-between;

O primeiro parâmetro indica que trata-se de uma caixa flexível (FlexBox) e por isso seus elementos filhos devem respeitar essa disposição.

O flex-flow controla o comportamento dos filhos. É um elemento conjunto que configura o flex-direction e o flex-wrap respectivamente. E os seguintes comandos são aceitos.

flex-direction:

flex-wrap:

flex-flow: flex-direction flex-wrap;

Ainda temos o justify-content, que assim como justificamos textos podemos justificar contents para usar melhor o espaço que sobra. Assim distribuímos corretamente nossos conteúdos com exatidão.

justify-content:

Em um exemplo, poderíamos ter 4 artigos ocupando 23%. Isso gera um espaço de 8%, e com os comandos acima você decide onde distribuí-lo.

Tem mais? Claro que sim!

Os elementos citados acima são os mais usuais, e geralmente serão os necessários para controlar seus componentes. Mais ainda temos algumas cartas na manga ;)

Quer alinhar seus filhos no sentido horizontal do paranaue? Então temos o align-itens e é com ele que a mágica acontece:

align-items:

Agora, se a pedida é alinhar na vertical, o cara é o align-content. Mas aqui é importante que o pai de todos tenha um height maior definido, como 100% ou ainda que permita que os filhos tenham sobra de espaço entre eles…

...caso contrário você não perceberá qualquer diferença. Vamos a ele?

align-content:

E assim termina nossa jornada pelas ordens do pai de todos. Mas ainda temos os filhos, e eles também tem suas preferências. Um pode gostar mais de vídeo game, o outro de andar de bicicleta, enfim…

...vamos as vontades dessas crianças?

flex-basis: Esse é meu tamanho papai!

Width? nada disso, pelo menos não para definir o tamanho dos filhos. Aqui trabalhamos com o flex-basis, e de preferência faça bonito e esqueça que o PX existe por hora. A pedida aqui são medidas flexíveis… FLEXbox lembra?

De qualquer forma temos aqui a medida que vai definir o tamanho do garoto do papai. E levando em conta espaçamentos e firulas do visual, afinal um gel na juba vai bem, podemos ter 4 garotos da mesma idade simplesmente assim:

flex-basis: 23%;

Se o papai tiver um justify-content: space-between; você terá quatro garotos, cada um em seu quadrado e respeitando os limites distribuídos perfeitamente em 2% para cada. O papai pode ter um padding de 2% também, e aí tudo fica lindo ;)

order:

E ainda temos algumas outras firulas que nos ajudam a posicionar, aumentar ou diminuir o tamanho relativo e a flexibilidade dos elementos. Vamos por partes…

order: 0; //-1, 0, 1...

Se temos quatro elementos e o padrão é zero, isso significa que se no terceiro elemento colocarmos um order -1, ele será ordenado e renderizado antes de seus irmãos, agora, se colocarmos 1, ele será o último.

É simples, quem tem o valor de order maior vem depois, menor vem antes, e isso vai ignorar a posição da sua marcação no HTML. Muito útil para reposicionar uma sidebar ou um elemento distribuído em diferentes break points do design responsivo.

flex-grow:

Se eu quiser aumentar o width relativo de um elemento específico com relação aos outros eu também posso. Basta usar o flex-grow. O padrão deste cara é 1, se eu colocar para 2, 3, ou mais ele aumenta seu tamanho relativo aos outros.

flex-grow: 0; //1, 2

flex-shrink:

E por fim, ao diminuir a tela, eu também posso dizer que um elemento é mais flexível que o outro. Lembre-se que o pai de todos não diferencia suas crianças, então todos os filhos tem 1 ponto na propriedade flex-shrink, se eu quiser dar mais 1 ponto para ele, então ele vai reduzir mais que os seus irmãos ao flexibilizar a tela para tamanhos menores.

flex-shrink: 1; //0, 1, 2

align-self:

Há quase esqueci, lembra que temos a propriedade de alinhamento horizontal no pai? Ela dita as regras para os filhos com o align-items. Se por algum motivo algum filho presar de um alinhamento diferente, você pode usar o align-self. As propriedades são as mesmas…

align-self: stretch

flex:

E você pode resumir esses comandos. Inclusive na aula deste artigo tem um pequeno erro lógico, então aproveito para corrigir. Essa propriedade é o flex, simples assim. E com ela você pode ditar duas OU uma das preferências do pequeno garoto.

Fica assim:

flex: 1 2; //flex-grow flex-shrink
flex: 25%; //flex-basis;

IMPORTANTE: Tanto o flex-grow como o flex-flow são influenciados pelo flex-basis. Então ao fazer seus testes preste atenção nisso para poder visualizar corretamente. Show?

E com isso passamos por todos os elementos do FlexBox, entendemos os pais e os filhos dessa incrível prole que nos permite criar sites mais responsivos, flexíveis e otimizados com muito mais agilidade e qualidade.

Os arquivos finais da aula você pode pegar em nosso Git clicando aqui.

Terminamos assim com um #BoraProgramar, e eu te vejo nos comentários...

Compartilhe:

Em Desenvolvimento Web:

Deixe seu comentário: