GainTime

Flexbox

As Flexbox são uma maneira simples e rápida de se obter um layout responsivo.

GA IN TI ME

Flexbox??

Caixas flexíveis, ou flexbox, é um novo modo de layout no CSS3.

O uso de flexbox garante que os elementos se comportem de maneira previsível quando o layout da página deve acomodar diferentes tamanhos de tela e diferentes dispositivos de exibição.

Para muitas aplicações, o modelo de caixa flexível se apresenta muito melhor do que o modelo de blocos, uma vez que não usa flutuadores, nem as margens do recipiente flex se desmoronam com as margens de seus conteúdos.

Como funcionam as flexbox do GainTime?

Existem diversas aplicações para flexbox com diversas variações, mas no GainTime, a nossa preocupação é que, num cenário onde n colunas possuem m conteúdos de s tamanhos diferentes, todas as n colunas tenham a mesma altura.

No GainTime, as flexboxes só existem em telas > 768px (.sm), telas inferiores a isso (.xs) aplicam o layout de blocos.

.flex-box

Aplicando a classe .flex-box, todos os elementos .col que são filhos diretos de .flex-box se distribuem automagicamente em largura, e terão sempre a mesma altura, desde que permaneçam na mesma linha. 


  <div
  class="flex-box">

  
    <div
    class="col"></div>
  
  
    <div
    class="col"></div>
  

  </div>

It's a big div

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

It isn't a big div

But it's big

Sem .flex-box

It's a big div

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

It isn't a big div

But it's big

Dividindo em múltiplas linhas

Bom, como já dissemos, a .flexbox iguala a altura das .col que estão na mesma linha. O que acontece é que as vezes, quando estamos trabalhando com um conteúdo que é preenchido automaticamente por uma linguagem de programação (como uma listagem de usuários, por exemplo), queremos que o nosso conteúdo passe para a próxima linha automaticamente, sem "quebrar" a visualização. Para isso, pensamos na classe .wrap para acompanhar a .flex-box. Esta classe supõem que a largaura das .col foi determinada pelo programador.

Consideramos que a melhor forma de obter múltiplas linhas é utilizando o nosso Grid-System baseado em caixas flexíveis.

Utilizando width e max-width:

  .col {
    width: 45%;
    max-width: 45%;
  }

.flex-box.wrap

.flex-box

Utilizando width:

  .col {
    width: 45%;
  }

.flex-box.wrap

.flex-box

Aninhamento

É possível aninhar flexboxes, basta definir uma .col como .flex-box. 


  <div
  class="flex-box">

  
    <div
    class="col flex-box">
  
    
      <div
      class="col flex-box">
    
      
        <div
        class="col"></div>
      
      
        <div
        class="col"></div>
      
    
      </div>
    
    
      <div
      class="col"></div>
    
  
    </div>
  
  
    <div
    class="col flex-box">
  
    
      <div
      class="col"></div>
    
    
      <div
      class="col"></div>
    
    
      <div
      class="col"></div>
    
    
      <div
      class="col"></div>
    
    
      <div
      class="col"></div>
    
    
      <div
      class="col"></div>
    
    
      <div
      class="col"></div>
    
    
      <div
      class="col"></div>
    
  
    </div>
  

  </div>