CSS: flexbox

Conceitos básicos

Flexible Box Module, também chamado flexbox, foi projetado como modelo de layout unidimensional, como método para organizar os elementos de um documento Web no espaço de interface do usuário, em dispositivos diversos de acesso à internet. O Flexbox destaca-se também por apresentar possibilidades avançadas de alinhamento e posicionamento de elementos de diagramação de páginas HTML.

Como elemento de layout unidimensional, destaca-se como característica o tratamento de cada dimensão de forma diferenciada: horizontal, na forma de linhas (rows); e vertical: na forma de colunas (columns), uma de cada vez. O modelo bidimensional Layout grid, diferentemente, permite o controle simultâneo de colunas e linhas.

Eixos de orientação flexbox

No modelo flexbox, praticamente todas as operações realizadas estão relacionadas ao eixo principal (main-axis) e ao eixo transversal (cross-axis). Eles funcionam como linhas de orientação e diagramação dos elementos no desenho do elemento HTML definido como flexbox e são fundamentais para sua compreensão e uso.

O primeiro fundamento necessário para compreender o modelo Flexbox é observar a diferença entre eixo principal e eixo perpendicular. Quando vamos posicionar elementos filhos dentro de um elemento pai definido como flexbox, a definição dos eixos de direcão vai orientar o alinhamento ou a justificação dos elementos filhos (flex items). A partir dessa definição, um conjunto de propriedades flexbox vai alinhar e justificar o conteúdo ao longo do eixo de orientação, com diversas possibilidades de diagramação dos elementos.

Flexbox: conceitos básicos;

Propriedade flex-direction

A propriedade flex-direction define a direção do eixo principal (main-axis) e possui quatro valores possíveis:

Definição do eixo principal (main-axis); Fonte: NTI/Cenargen.

Sintaxe

flex-direction: row; /* direção inline (em linha, horizontal) */ 
flex-direction: row-reverse; /* direção inline (em linha, horizontal, da direita para a esquerda) */

flex-direction: column; /* direção block (vertical, do topo para baixo) */ 
flex-direction: column-reverse; /* direção block (vertical, da base para o topo) */

Eixo transversal

Se o valor escolhido for row (linha) ou row-reverse (linha reversa), seu eixo principal (main-axis) se moverá ao longo da linha horizontal — na direção inline. Sabendo que eixo transversal (cross-axix) é perpendicular ao eixo principal (main-axis), logo, se a propriedade flex-direction estiver definida como row ou row-reverse, o eixo transversal será definido na direção perpendicular ao eixo principal, na direção vertical, conforme a figura a seguir:

Orientação cross-axis para o parâmetro flex-direction: row;

Caso o eixo principal esteja definido no sentido vertical, com o valor flex-direction: column ou flex-direction: column-reverse, com os elementos empilhados em forma de colunas — na direção block, o eixo transversal (cross-axis) estará disposto na linha horizontal perpendicular à direção do eixo principal (main-axis), conforme a figura a seguir:

Orientação cross-axis para o parâmetro flex-direction: column;

Linhas de Início e Fim

Nas primeiras versões do CSS, os modelos de diagramação utilizavam a orientação de escrita horizontal, da esquerda para a direita, mas com o avanço da Internet e sua diversidade de usos, houve ampliação da variedade de modos de escrita além da ocidental, da esquerda para direita.

Atualmente, há outras possibilidades diversas com leitura da direita para a esquerda, por exemplo. Por isso é importante evitar na abordagem do modelo Flexbox a premissa de leitura esquerda - direita ou acima - abaixo quando tratamos da disposição e fluidez dos elementos no modelo Flexbox.

Se o valor da propriedade flex-direction for row, em linha (inline), considerando o estilo de escrita ocidental, a borda inicial do eixo principal estará localizada à esquerda e a borda final, à direita.

Orientação cross-axis para o parâmetro flex-direction: row;

Para outros idiomas, como o Árabe, por exemplo, de estilo de escrita oriental, teremos o inverso: a borda de início do eixo principal (main-axis) estará localizada à direita, e a borda final, à esquerda.

Orientação cross-axis para o parâmetro flex-direction: row;

Em ambos os casos de sentido do eixo principal (main axis), com início à esquerda ou à direita, a borda inicial do eixo transversal está na parte superior do elemento container flex e a borda final, na parte inferior, visto que ambos os idiomas têm um estilo de escrita horizontal.

Nesse sentido, é importante e necessário se pensar em termos de início e final, em vez de esquerda e direita, para simplificar o conceito e o domínio do modelo Flexbox. Outros métodos de layout, como o CSS Grid observam padrões semelhantes de orientação.

Contêiner flex

O elemento HTML que faz uso da modelo flexbox de diagramação é chamado contêiner flex. Para criar essa estrutura, define-se o valor da propriedade display do elemento, como flex ou inline-flex:

Código CSS

  .box {
    display: flex;
  }

Os elementos contidos no contêiner flex passam a ser ordenados e alinhados no modo flex e podem ser chamados de elementos filhos. As propriedades CSS possuem valores padrão e os elementos filhos do contêiner flex, apresentam o seguinte comportamento:

• Exibição em linha (o padrão do flex-direction é row).
• Alinhamento na borda inicial do eixo principal (main-axis).
• Não há expansão no eixo principal (main-axis), mas pode haver contração.
• Haverá expansão vertical para preencher a altura do eixo transversal (cross-axis).
• A propriedade flex-basis (en-US) estará definida como auto.
• A propriedade flex-wrap estará definida como nowrap.

Como resultado todos os elementos serão alinhados em uma linha (horizontal), usando o tamanho do conteúdo como o tamanho no eixo principal. Se houver mais itens do que é possível caber no contêiner, não haverá uma quebra de linha; em vez disso, os elementos podem ultrapassar o limite horizontal da página. Se alguns elementos forem mais altos que outros, todos os itens se estenderão ao longo do eixo transversal para preencher seu tamanho total. As características em destaque do contêiner flex podem ser observadas no exemplo a seguir.

Código HTML

 
  <div class="box">
     <div>Um</div>
     <div>Dois</div>
     <div>Três
       <br>texto.
       <br>texto..
       <br>texto...
    </div>
  </div
  

Resultado em tela

um

dois

três
texto.
texto..
texto...

Propriedade flex-direction

A propriedade flex-direction define em que direção os elementos filhos são exibidos dentro do contêiner flex, ao longo do eixo principal (main-axis).

Sintaxe

flex-direction: row; 
/* direção inline; elementos são ordenados na ordem de leitura do documento. */
/* No idioma ocidental, por exemplo, a ordem tem início à esquerda e se direciona para a direita; */

flex-direction: row-reverse; 
/* direção inline; elementos são ordenados na ordem inversa do idioma do documento. 
/* No idioma ocidental, por exemplo, a ordem inversa tem início à direita e se direciona para a esquerda. */

flex-direction: column; 
/* direção block; elementos são ordenados na ordem de leitura do documento. */
/* No idioma ocidental, por exemplo, tem início no topo e continua na direção do contêiner flex; */

flex-direction: column-reverse; 
/* direção block; elementos são ordenados na ordem inversa da leitura do documento. */
/* No idioma ocidental, por exemplo, tem início na base do contêiner flex e continua na direção do topo; */

Se a propriedade flex-direction for definida como column (coluna), o eixo principal exibirá os elemento empilhados na forma de coluna, verticalmente. O ordenamento padrão do flexbox, o ordenamento tem início no topo em se direciona à parte de baixo. O valor column-reverse, ordena ao contrário, apresenta os elementos em ordem inversa, com início na parte de baixo, em direção à borda do topo do contêiner flex.

Código CSS

  .box {
    display: flex;
    flex-direction: column;
  }

Código HTML

 
  <div class="box">
     <div>Um</div>
     <div>Dois</div>
     <div>Três
       <br>texto.
       <br>texto..
       <br>texto...
    </div>
  </div
  

Resultado em tela

um

dois

três
texto.
texto..
texto...

Quebra de linha com "flex-wrap"

Embora o modelo flexbox seja um modelo unidimensional, é possível fazer com que os elementos filhos de um contêiner flex sejam agrupados em múltiplas linhas. A distribuição espacial ocorre ao longo do eixo de alinhamento, sem a necessidade de referência às linhas da borda de contenção. Quando a medida do elemento filho extrapola a dimensão do contêiner flex, ele pode ser reposicionado em linha subsequente, de mesmo perfil de alinhamento.

Sintaxe

 flex-wrap: wrap
 /* Elementos filhos têm quebra automática de linhas; */
 
 flex-wrap: nowrap;
 /* medida padrão da propriedade flex-wrap; */
 /* Se a medida dos elementos filhos ultrapassar o espaço disponível, eles são redimensionados; */
 /* Elementos filhos são redimensionados para caber no container flex */

flex-wrap: wrap

O valor wrap da propriedade flex-wrap permite que os elementos filhos tenham quebra automática de linhas. É observada quando os elementos filhos são maiores que o espaço disponível e não podem ser exibidos em uma única linha no contêiner flex. Nesse caso, os itens são dispostos em linhas subsequentes, conforme a figura a seguir:

Código CSS

  .box {
    width:500px
    display: flex;
    flex-wrap: wrap;
  }
  .box>* {
    width:200px;
  }

Código HTML

 
  <div class="box">
     <div>Um</div>
     <div>Dois</div>
     <div>Três
       <br>texto.
       <br>texto..
       <br>texto...
    </div>
  </div
  

Resultado em tela

um

dois

três
texto.
texto..
texto...

flex-wrap: nowrap

Com o valor nowrap, os elementos filhos têm a largura reduzida; encolhem para caber no contêiner flex. O valor nowrap é o valor padrão inicial da propriedade flex-wrape permite que os itens encolham para caber no contêiner flex. Se não houvesse a redução dos elementos filhos para caber no espaço disponível poderia haver um vazamento dos itens do contêiner flex.

Código CSS

  .box {
    width:500px
    display: flex;
    flex-wrap: nowrap;
  }

Resultado em tela

um

dois

três
texto.
texto..
texto...

Propriedade flex-flow

As propriedades flex-direction e flex-wrap podem ser combinadas na forma abreviada da propriedade flex-flow. O primeiro valor especificado é o flex-direction e o segundo valor é o flex-wrap.

• Sintaxe

*flex-direction: <flex-flow> <flex-wrap>;
/* Primeiro valor: flex-flow; valores: row, row-reverse, column e column-reverse;
/* Segundo valor: flex-wrap; valores: wrap e nowrap;

• Código HTML

   <div class="box">
      <div>Um</div>
      <div>Dois</div>
      <div>Três
         <br>Texto .
         <br>Texto ..
         <br>Texto ...
      </div>
    </div>

• Código CSS

.box {
   display: flex; 
   flex-flow: row wrap;
   width: 500px; 
}
.box>* {
   width: 200px;
}

Resultado em tela

um

dois

três
texto .
texto ..
texto ...

Abreviatura para os valores das propriedades flex

As propriedades flex-grow, flex-shrink, e flex-basis raramente são empregadas de forma individual. Usualmente, elas são combinadas por meio da propriedade flex, com a forma abreviada. A abreviatura flex permite definir os três valores na seguinte ordem: { flex: <flex-grow> <flex-shrink> <flex-basis>; }.

Outros valores de abreviação predefinidos podem cobrir a maioria dos casos de uso e suprir outras necessidades práticas.

• flex: initial;
• flex: auto;
• flex: none;
• flex: <positive-number>;

flex: initial

A propriedade { flex: initial; } reseta os elementos para valores-padrão do flexbox; equivale à marcação { flex: 0 1 auto; }'. No caso, o valor da propriedade flex-grow é 0, demarca que os elementos não irão crescer mais do que o tamanho base definido na propriedade <flex-basis>. O valor da propriedade <flex-shrink> é 1, indicando que o elemento pode ser reduzido caso seja necessário, para evitar que o limite do contêiner seja ultrapassado. Por fim, o valor da propriedade <flex-basis> é auto e assim será usado o tamanho mínimo necessário para preencher a dimensão do eixo principal.

• Contêiner flex possui 500px de largura { width: 500px; };
• Elementos-filhos, propriedade { flex: initial; };

um

dois

três
texto .
texto ..
texto ...

flex: auto

A propriedade { flex: auto; } equivale a { flex: 1 1 auto; }. Essa configuração é semelhante a { flex: initial; }, porém, nesse caso, os elementos podem aumentar para preencher o contêiner-flex ou diminuir se necessário, para evitar o transbordamento lateral do objeto no espaço do documento.

• Contêiner flex com 500px de largura { width: 500px; };
• Elementos-filhos, propriedade { flex: auto; };

um

dois

três
texto .
texto ..
texto ...

flex: none

A propriedade { flex: none; } cria um elemento flex totalmente inflexível. Equivale a marcação { flex: 0 0 auto; }. O elementos filhos não podem crescer ou diminuir, mas são criados com a propriedade flex-basis com valor auto.

• Contêiner flex com 500px de largura { width: 500px; };
• Elementos-filhos: propriedade { flex: none; };

um

dois

três
texto. texto.. texto... texto....

flex: 1

Outra abreviação possível é { flex: 1; } ou { flex: 2; } e assim por diante; equivale a { flex: 1 1 0; }. Os elementos podem crescer ou diminuir a partir da propriedade flex-basis com valor nulo.

• Contêiner flex possui 500px de largura { width: 500px; };
• Elementos-filhos, propriedade { flex: 1; };

um

dois

três
texto .
texto ..
texto ...

align-items: strech

• strech é o valor padrão da propriedade align-items;
• elementos-filhos são estendidos até a maior altura do contêiner-flex;
• elemento-filho mais alto define a altura do contêiner flex;

  .box {
    display: flex;
    align-items: strech;
  }

• Modelo de exemplo:

um

dois

três
texto
texto
texto

align-items: flex-start

• Elementos-filhos são alinhados a partir do topo do contêiner flex;

  .box {
    display: flex;
    align-items: flex-start;
  }

• Modelo de exemplo:

um

dois

três
texto
texto
texto

align-items: flex-end

• Elementos-filhos são alinhados a partir da base do contêiner flex;

  .box {
    display: flex;
    align-items: flex-end;
  }

• Modelo de exemplo:

um

dois

três
texto
texto
texto

align-items: center

Elementos-filhos ficam centralizados no eixo transversal do contêiner flex:

  .box {
    display: flex;
    align-items: center;
  }

• Modelo de exemplo:

um

dois

três
texto
texto
texto

Propriedade justify-content

A propriedade justify-content é usada para alinhar os elementos ao longo do eixo principal (main-axis), cuja direção (row ou column) é definida a partir da propriedade flex-direction. O valor inicial padrão é flex-start, que alinha os elementos no início do eixo-principal, rente à borda esquerda do contêiner flex.

Propriedade justify-content define o alinhamento dos elementos no eixo principal (main-axis); Fonte: NTI/Cenargen.

Conjunto de valores admitidos na propriedade justify-content:

• flex-start; (*Valor padrão inicial)
• flex-end;
• center;
• stretch;
• space-around;
• space-between;

justify-content: flex-start

Valor inicial padrão; distribui os elementos filhos a partir do início do eixo principal, rente à borda esquerda do contêiner flex:

• CSS

  .box {
    display: flex;
    justify-content: flex-start;
  }

• Resultado na tela

um

dois

três

justify-content: flex-end

Alinha os elementos filhos a partir do final do eixo principal, rente à borda direita do contêiner flex, no sentido oposto ao alinhamento flex-start:

• CSS

  .box {
    display: flex;
    justify-content: flex-end;
  }

• Resultado HTML

um

dois

três

justify-content: center

• Alinha os elementos filhos ao centro do eixo principal;

justify-content: stretch

Se o tamanho combinado dos elementos filhos ao longo do eixo principal for menor que o tamanho do contêiner de alinhamento, qualquer item de tamanho automático terá seu tamanho aumentado igualmente (não proporcionalmente), embora ainda respeite as restrições impostas pela marcação max-height / max-width (ou funcionalidade equivalente). Com isso, o tamanho combinado dos elementos filhos preenche exatamente o contêiner de alinhamento ao longo do eixo principal.

justify-content: space-between

• Distribui e alinha os elementos filhos ao longo de todo o espaço do eixo principal, de modo que ocupem todo o espaço livre de forma uniforme. O elemento space-between mantém a mesma medida de espaço entre cada elemento filho.

justify-content: space-around

• O valor space-around é usado para gerar espaço equivalente, de mesma medida, à esquerda e à direita de cada elemento filho ao longo do eixo de alinhamento;

De modo geral, as propriedades de alinhamento e justificação do modelo flexbox cobrem a maioria dos casos e necessidades de uso. É recomendável avaliar as funcionalidades e recursos de modo mais detalhado.

Sintaxe justify-content

/* Alinhamento dos itens no contêiner no eixo transversal */
justify-content: center;     /* ao centro */
justify-content: start;      /* a partir do início */
justify-content: end;        /* a partir do final */
justify-content: flex-start; /* a partir do início */
justify-content: flex-end;   /* a partir do final */
justify-content: left;       /* a partir da esquerda */
justify-content: right;      /* a partir da direita */

/* Alinhamento de linha de base (baseline) */
/* Propriedade 'justify-content' não recebe valores de linha de base (baseline) */

/* Alinhamento normal */
justify-content: normal;

/* Distributed alignment */
justify-content: space-between; /* Distribue os itens uniformemente; 
                                   primeiro item é alinhado no início
                                   e o último ao final */
justify-content: space-around;  /* Distribue os itens uniformemente;
                                   espaço disponível é dividido entre os elementos:
                                   cada item recebe medida equivalente 
                                   à esquerda e à direita; */
justify-content: space-evenly;  /* Distribui os itens uniformemente;
                                   Itens têm espaço igual a seu redor; */
justify-content: stretch;       /* Distribui os itens uniformemente;
                                   itens são redimensionados; esticados
                                   para caber no contêiner flex; */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: unset;

Propriedade align-content

A propriedade align-content alinha as linhas do contêiner flex quando há espaço extra no eixo transversal (cross axis) de modo semelhante à forma como a propriedade justify-content alinha os itens-filhos no eixo principal (main axis).

Função das propriedades justify-content e align-content; Fonte: NTI/Cenargen

Observação: a propriedade align-content só tem efeito no contêiner flex que apresente várias linhas de ítens, na qual a propriedade flex-wrap esteja definida como wrap ou wrap-reverse. Um contêiner flex de linha única, onde flex-wrap esteja definida como o valor padrão, no-wrap, não refletirá o alinhamento de conteúdo.

Código CSS

.container {
   align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

Posição dos elementos a partir da propriedade align-content; fonte: NTI/Cenargen;

Posicionamento

• normal (default): os itens são posicionados na linha de forma padrão, como se nenhum valor fosse definido.
• flex-start / start: itens ficam posicionados no início do contêiner. O valor flex-start (mais suportado) respeita a direção do modelo flexbox, enquanto o start respeita a direção do modo de escrita.
• flex-end / end: itens são posicionados ao final do contêiner; A extremidade flexível (mais suporte) respeita a direção flexível, enquanto a extremidade respeita a direção do modo de escrita.
• center: o conjunto de linhas é centralizado no container;
• space-between: a primeira linha de elemento fica posicionada no início do contêiner, enquanto a última fica ao final; as linhas intermediárias são distribuídas com o mesmo espaço de separação, uniformemente;
• space-around: itens são distribuídos com o mesmo espaço de separação,uniformemente, em cada linha de elementos;
• space-evenly: os itens são distribuídos uniformemente com espaço igual ao seu redor;
• stretch: as linhas se estendem para ocupar o espaço restante do contêiner;

As palavras-chave modificadoras seguras e inseguras podem ser usadas em conjunto com todas as outras palavras-chave (embora observe o suporte do navegador) e ajudam a evitar o alinhamento de elementos de modo que o conteúdo se torne inacessível.

Alinhamento, justificação e distribuição de elementos

Um dos atributos chave no uso do modelo flexbox é a capacidade de alinhar e justificar os elementos flex nos eixos principal e transversal e distribuir o espaço entre eles.

Propriedade align-items

A propriedade align-items tem a função de alinhar os elementos no eixo transversal. Por padrão, o valor inicial da propriedade é stretch. Por esse motivo os elementos flex se estendem até a maior altura do elemento-pai, no qual o elemento-filho mais alto define a altura do contêiner flex.

A marcação da propriedade align-items deve ser feita no contêiner flex para orientar o alinhamento dos elementos-filhos. Os modos de alinhamento da propriedade align-items serão descritos nas próximas seções para fazer a diagramação do HTML a seguir. Os elementos-filhos estão aninhados na <div class="box"> e serão alinhados conforme a marcação da propriedade align-items.

Código HTML

  <div class="box">
     <div>um</div>
     <div>Dois</div>
     <div>três
        <br>texto
        <br>texto
        <br>texto
     </div>
   </div>

Abreviatura para os valores das propriedades flex

As propriedades flex-grow, flex-shrink, e flex-basis raramente são empregadas de forma individual. Usualmente, elas são combinadas por meio da propriedade flex, com a forma abreviada. A abreviatura flex permite definir os três valores na seguinte ordem: { flex: <flex-grow> <flex-shrink> <flex-basis>; }.

Outros valores de abreviação predefinidos podem cobrir a maioria dos casos de uso e suprir outras necessidades práticas.

• flex: initial;
• flex: auto;
• flex: none;
• flex: <positive-number>;

flex: initial

A propriedade { flex: initial; } reseta os elementos para valores-padrão do flexbox; equivale à marcação { flex: 0 1 auto; }'. No caso, o valor da propriedade flex-grow é 0, demarca que os elementos não irão crescer mais do que o tamanho base definido na propriedade <flex-basis>. O valor da propriedade <flex-shrink> é 1, indicando que o elemento pode ser reduzido caso seja necessário, para evitar que o limite do contêiner seja ultrapassado. Por fim, o valor da propriedade <flex-basis> é auto e assim será usado o tamanho mínimo necessário para preencher a dimensão do eixo principal.

• Contêiner flex possui 500px de largura { width: 500px; };
• Elementos-filhos, propriedade { flex: initial; };

um

dois

três
texto .
texto ..
texto ...

flex: auto

A propriedade { flex: auto; } equivale a { flex: 1 1 auto; }. Essa configuração é semelhante a { flex: initial; }, porém, nesse caso, os elementos podem aumentar para preencher o contêiner-flex ou diminuir se necessário, para evitar o transbordamento lateral do objeto no espaço do documento.

• Contêiner flex com 500px de largura { width: 500px; };
• Elementos-filhos, propriedade { flex: auto; };

um

dois

três
texto .
texto ..
texto ...

flex: none

A propriedade { flex: none; } cria um elemento flex totalmente inflexível. Equivale a marcação { flex: 0 0 auto; }. O elementos filhos não podem crescer ou diminuir, mas são criados com a propriedade flex-basis com valor auto.

• Contêiner flex com 500px de largura { width: 500px; };
• Elementos-filhos: propriedade { flex: none; };

um

dois

três
texto. texto.. texto... texto....

flex: 1

Outra abreviação possível é { flex: 1; } ou { flex: 2; } e assim por diante; equivale a { flex: 1 1 0; }. Os elementos podem crescer ou diminuir a partir da propriedade flex-basis com valor nulo.

• Contêiner flex possui 500px de largura { width: 500px; };
• Elementos-filhos, propriedade { flex: 1; };

um

dois

três
texto .
texto ..
texto ...

Próximos passos

Após ler este artigo, você deve ser capaz de compreender as características básicas do Flexbox. No próximo artigo, iremos examinar como essa especificação se relaciona com outras partes do CSS.