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

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

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

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

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

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

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

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

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".