Visão Geral

O módulo Flexbox Layout tem como objetivo redefinir a maneira como os layouts CSS são feitos, proporcionando maior eficiência no alinhamento e distribuição de espaço entre os itens presentes em um determinado espaço (tela).

A distribuição de espaço, altura (height) e largura (width), é realizada de modo proporcional ao tamanho do container no qual os itens estão inseridos, mesmo quando o tamanho do container é dinâmico ou até mesmo desconhecido. Deste modo, o módulo Flexbox especifica o tamanho de cada item em relação a outros dentro do mesmo container, com o objetivo de acomodar o layout para todos os tamanhos de telas.

Terminologia

Como o Flexbox se trata de um módulo e não de uma única propriedade, foi especificado um conjunto de atributos. Sendo assim, o Flexbox denomina os elementos pai de flex container e os elementos filhos como flex items.

CSS-Layout-Flexbox

Propriedades

Flex Container

As principais propriedades para os flex containers são:

display: o objetivo é definir o container como flexível (flex).

ex: section{

    display: flex;

}

flexdirection: essa propriedade tem como objetivo estabelecer, em relação ao eixo X da tela, qual a direção dos flex items dentro do flex container.

valores:

  • row (padrão): esquerda para direita

  • row-reverse: direita para esquerda

  • column: mesmo que row porém de cima para baixo.

columnreverse: mesmo que row-reverse porém debaixo para cima

CSS-Layout-Flexbox-3

justifycontent: essa propriedade define o alinhamento em relação ao eixo X da tela

valores:

  • flex-start

  • flex-end

  • center

  • space-between

  • space-around

CSS-Layout-Flexbox-1
Esse é um exemplo simples da utilização do Flexbox para flex containers.

 

 

Flex Itens

As principais propriedades para os flex itens são:

flexgrow: define a capacidade de um item flex crescer quando necessário. Essa capacidade é determinada através dos valores 0, 1 e 2.

CSS-Layout-Flexbox-2

Se todos items estiverem setados para 1 eles irão crescer de maneira igual dentro do flex container. No entanto se um item estiver com valor 2, este irá crescer duas vezes mais em relação aos outros.

.item{

    flex-grow: <valor> /*padrão 0*/

}

flexshrink: essa propriedade define a capacidade do item flex encolher se necessário.

.item{

    flex-shrink: <valor> /*padrão 1*/

}

flexbasis: define a tamanho padrão de um elemento antes do tamanho restante ser distribuído.

.item{

    flex-basis: <comprimento> | auto /*auto é o padrão */

}

flex: é uma propriedade simplificada para representar todas as propriedades citadas acima (flex-basis, flex-grow, flex-shrink). O padrão é 0 1 auto.

Conclusão

A partir desses conceitos básicos  foi possível observar que o módulo Flexbox Layout vem com a ideia de facilitar a criação de layout dinâmicos. Muita coisa ficou de fora dessa introdução pois a ideia era passar uma visão geral desse novo conceito presente no CSS3. Para mais informações acesse os links abaixo:

http://www.w3schools.com/cssref/css3_pr_flex.asp

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

http://philipwalton.github.io/solved-by-flexbox/

http://css-tricks.com/snippets/css/a-guide-to-flexbox/