Módulo Box Flexível das CSS3

Publicado em: 18/10/2009

Introdução

Esse tutorial foi escrito em 2009 com base no Rascunho de Trabalho do W3C e está ULTRAPASSADO. A Candidata a Recomendação para o módulo Flexible Box Layout alterou as declarações CSS. Mantenho o tutorial no ar por razões históricas e ele não tem valor prático

O Módulo das CSS3 denominado "Flexible Box Layout Module" destina-se a especificar um Box Model otimizado para design de interfaces. Trata-se de um sistema adicional para construção de layouts que vem oferecer mais uma alternativa aos sistemas já existentes. O objetivo deste Módulo é descrito a seguir:

Neste novo Box Model os elementos-filhos (boxes flexíveis) de um elemento podem ser dispostos tanto na vertical como na horizontal. Eventuais espaços no elemento-pai, não preenchidos pelos elementos-filho (boxes flexíveis), podem ser distribuidos por estes em qualquer proporção. Os elementos-filhos (boxes flexíveis) expandirão proporcionalmente para preencher os espaços deixados livres no elemento-pai.

Confuso? Não se preocupe, na sequência apresentarei vários exemplos que irão esclarecer este novo Box Model

Tabela propriedades/valores do Módulo Box Flexível

Apresento a seguir, a título ilustrativo e introdutório aos exemplos uma tabela contendo as propriedades CSS3 deste Módulo com seus respectivos valores e uma breve descrição da propriedade.

Propriedade/valor CSS3 do Módulo Box Flexível
Propriedade Valores (valor inicial) Descrição
box-orient horizontal | vertical | inline-axis | block-axis | inherit Como serão dispostos os boxes flexíveis
box-direction normal | reverse | inherit Inverte ordem sequencial dos boxes flexíveis
box-ordinal-group inteiro | 1 Altera ordem sequencial dos boxes flexíveis
box-align start | end | center | baseline | stretch Posição dos boxes flexíveis
box-flex número | 0.0 Proporção do espaço no elemento-pai a ser preenchida pelo box flexível
box-flex-group inteiro | 1 Grupamento para proporção do espaço no elemento-pai a ser preenchida pelos boxes flexíveis
box-pack start | end | center | justify Distribuição de espaços extras entre boxes flexíveis
box-line single | multiple Disposição de boxes flexíveis em uma ou mais linhas/colunas

Exemplos

Irei a seguir desenvolver oito exemplos demonstrando algumas das propriedades CSS3 para o Módulo Box Flexível.

Para o bom entendimento dos exemplos leia com atenção as premissas e condições gerais adotadas para o desenvolvimento dos exemplos e que são listadas a seguir.

  • Na data que este tutorial foi escrito somente as engines Gecko e WebKit com suas extensões proprietárias -moz- e -webkit- (Firefox, Safari e Chrome) suportam o novo Módulo. Contudo ainda há inconsistências na engine WebKit. Assim para visualizar de forma correta todos os exemplos o navegador Firefox é o mais apropriado.
  • Para todos os exemplos, exceto o último (Exemplo 8) a estrutura de marcação é a seguinte:
    
    <div id="container" class="container">
    
    <div class="box-flex box1">
    <p>Box 1</p>
    </div>
    
    <div class="box-flex box2">
    <p>Box 2</p> 
    </div>
    
    </div>
    

    ou seja, dois boxes, .box1 e .box2, contidos dentro de um elemento-pai, div#container.

  • Os dois boxes têm dimensões fixas de 80 x 80px e o container idem com 240 x 240px.
  • Usei uma imagem de um grid de 40 x 40px como fundo do div#container com a finalidade de facilitar a visualização de distribuição de alturas e larguras dos boxes.
  • As cores de fundo, verde e vermelha, dos boxes, foi aplicada usando o valor rgba previsto nas CSS3 que permite definir uma cor e uma transparência (para o IE que não suporta rgba apliquei filtro alpha proprietátio).
  • Para os navegadores que, à época que escrevi o tutorial, não suportam o Módulo Box Flexível. (IE, Opera e ???), forneço logo a seguir a renderização de cada exemplo uma imagem ilustrativa daquela renderização conforme visualizada no Firefox.

Nota: No Box Model para boxes flexíveis foi criado um valor igual a box para a propriedade CSS já existente display.
Assim, para todo container de boxes flexíveis deve ser declarada a seguinte regra CSS: #container { display: box }

Exemplo 1

Neste primeiro exemplo vou mostrar a renderização dos dois boxes (.box1 e .box2) contidos no div#container renderizados segundo o Box Model CSS2.1 nosso velho conhecido. Lembro que a marcação HTML é a mesma para todos os exemplos e foi mostrada anteriormente.

Observe agora a estilização padrão da marcação e sua respectiva renderização.


.container { 
  width: 240px; 
  height: 240px;
  background: url(.../bg-container.gif) no-repeat; /* Grid */
  }
  
.box-flex {
  width: 80px;
  height: 80px;
  }
  
.box-flex p {
  color: #fff;
  font-weight: bold;
  margin: 0 !important;
  padding: 0 !important;
  }
  
.box1 {
  background-color: rgba(0, 153,  0, 0.9); /* verde 10% transparente */
  }
.box2 {
  background-color: rgba(204, 51, 0, 0.9); /* vermelho 10% transparente */
  }

A seguir a renderização

Box 1

Box 2

Exemplo 2

Neste segundo exemplo vamos aplicar as propriedades box-align e box-orient


#container {
  display: box;
  box-align: stretch;
  box-orient: vertical;
  }

box-align: stretch faz com que os boxes se expandam e ocupem todo o container.
box-orient: vertical define a renderização dos boxes na vertical (modelo nosso conhecido).

A seguir a renderização

Box 1

Box 2

Na figura a seguir é mostrada a
renderização deste exemplo
em navegadores que suportam o
Módulo Box Flexível.

Exemplo 3

Neste terceiro exemplo vamos tomar o exemplo 2 e aplicar a propriedade box-flex aos dois boxes flexíveis.


#container {
  display: box;
  box-align: stretch;
  box-orient: vertical;
  }
.box-flex {
  box-flex: 1;
  }

Como definimos o mesmo valor (1) para a propriedade box-flex dos dois blocos flexíveis o espaço vertical sobrando no container (dois módulos do grid) será dividido igualmente pelos dois boxes (um módulo para cada box).

A seguir a renderização

Box 1

Box 2

Na figura a seguir é mostrada a
renderização deste exemplo
em navegadores que suportam o
Módulo Box Flexível.

Exemplo 4

Neste quarto exemplo vamos aplicar novamente a propriedade box-flex aos dois boxes flexíveis, mas agora dividiremos o espaço sobrando no container de forma proporcional pelos boxes.


#container {
  display: box;
  box-align: stretch;
  box-orient: vertical;
  }
.box1 {
  box-flex: 1;
  }
.box2 {
  box-flex: 3;
  }

A proporção de divisão do espaço vertical sobrando no container é de 1:3. Façamos umas contas:
Espaço vertical sobrando: 2 módulos do grid = 80px
80px/4 = 20px o que resulta em:
para box1 => 20px x 1 = 20px a mais
para box2 => 20px x 3 = 60px a mais

A seguir a renderização

Box 1

Box 2

Na figura a seguir é mostrada a
renderização deste exemplo
em navegadores que suportam o
Módulo Box Flexível.

Exemplo 5

No quinto exemplo vamos tomar o Exemplo 2 e alterar as propriedades box-align e box-orient


#container {
  display: box;
  box-align: end; /* de stretch para end */
  box-orient: horizontal; /* de vertical para horizontal */
  }

box-align: end faz com que os boxes sejam renderizados na parte inferior do container.
box-orient: horizontal define a renderização dos boxes na horizontal (modelo inline).

A seguir a renderização

Box 1

Box 2

Na figura a seguir é mostrada a
renderização deste exemplo
em navegadores que suportam o
Módulo Box Flexível.

Exemplo 6

No sexto exemplo vamos expandir os boxes na vertical dividindo proporcionalmente o espaço sobrando no container.


#container {
  display: box;
  box-align: stretch;
  box-orient: horizontal;
  }
.box1 {
  box-flex: 0;
  }
.box2 {
  box-flex: 1;
  }

A proporção de divisão do espaço vertical sobrando no container é de 0:1
Isto significa que o box2 receberá todo o espaço sobrando no container,
permanecendo o box1 com sua largura original de 80px.

A seguir a renderização

Box 1

Box 2

Na figura a seguir é mostrada a
renderização deste exemplo
em navegadores que suportam o
Módulo Box Flexível.

Exemplo 7

O sétimo exemplo é igual ao sexto, no qual usei a propriedade box-direction para inverter a ordem de renderização dos boxes.


#container {
  display: box;
  box-align: stretch;
  box-orient: horizontal;
  box-direction: reverse; /* acréscimo ao Exemplo 6 */ 
  }
.box1 {
  box-flex: 0;
  }
.box2 {
  box-flex: 1;
  }

Ao usar box-direction: reverse alteramos a ordem natural de renderização dos boxes.
Lembrar que esta ordem é definida pela precedência na marcação.

A seguir a renderização

Box 1

Box 2

Na figura a seguir é mostrada a
renderização deste exemplo
em navegadores que suportam o
Módulo Box Flexível.

Exemplo 8

Este exemplo visa a fornecer dicas para que você faça suas experiências em construção de layout com uso deste Módulo de Boxes Flexíveis. Construi duas colunas, uma com largura fixa e a outra elástica. Experimente redimensionar seu navegador e observar o comportamento deste exemplo. Para detalhes, consulte o código fonte da página.

A seguir a renderização

Box 1

Box 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum. Maecenas dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero, ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse et dui ac metus auctor fringilla. Curabitur interdum augue a pede.

Na figura (parcial) a seguir é mostrada a renderização deste exemplo
em navegadores que suportam o Módulo Box Flexível.

Considerações finais

Este tutorial tem caráter meramente informativo e visa a fornecer aos meus leitores uma visão antecipada de um dos Módulos das CSS3. Trata-se de um módulo em fase de Rascunho de Trabalho no W3C que pode e deve ser usado para estudos pelos interessados nas CSS3. Apresentei algumas das propriedades do Módulo como forma de motivar você a continuar suas pesquisas. Boa leitura e informe sobre suas conclusões nos comentários.

Convém notar que este Box Model resolve o problema de expansão vertical automática para as colunas, mantendo-as com a mesma altura independentemente da quantidade de conteúdos inserida em cada uma delas, ou seja, adeus "faux-columns".