CSS: flexbox

Conceitos básicos

Flexible Box Module, geralmente chamado de flexbox, foi projetado como modelo de layout unidimensional, como método capaz de 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 do flexbox 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

Ao se utilizar o 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 básicas de orientação e diagramação dos elementos no desenho do elemento definido como flexbox e são fundamentais para sua compreensão.

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 desses elementos filhos (flex items). A partir dessa definição, um conjunto de propriedades flexbox vão alinhar e justificar o conteúdo ao longo de um eixo ou de outro, com diversas possibilidades de diagramação dos elementos.

[ Imagem exemplo ] 

Propriedade flex-direction

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

flex-direction: row; /* direção inline (em linha, horizontal) */

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

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

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

• row - direção inline (em linha, horizontal); itens posicionados em ordem natural;
• row-reverse - direção inline (em linha, horizontal), itens posicionados em ordem inversa;
• column - direção block (verticalmente, do topo para baixo); itens posicionados em ordem natural;
• column-reverse - direção block (verticalmente, do topo para baixo); itens posicionados em ordem inversa;

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

Outro fundamento importante no domínio do Flexbox é saber que o modelo não admite premissa quanto à orientação do modo de escrita dos elementos no documento HTML. 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. Atualmente, há possibilidades diversas do modelo de escrita ocidental, com início da direita para a esquerda, por exemplo. Por isso é importante evitar a abordagem 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), 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;

Se considerarmos outro idioma, 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 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

A área de um documento HTML que faz uso da modelo flexbox é chamada de contêiner flex. Para criar essa estrutura, define-se o valor da propriedade display do elemento, como flex ou inline-flex:

#element { 
   display: flex; /* ou inline-flex */
}

A partir dessa marcação, os elementos contidos dentro desse contêiner, serão ordenados e alinhados no modo flex. Como todas as propriedades no CSS possuem valores padrão, 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.

Exemplo 1. contêiner flex;

Código HTML

 
  <h3>Contêiner flex</h3>
  <div class="box">
     <div>Um</div>
     <div>Dois</div>
     <div>Três
       <br>Texto
       <br>extra
       <br>texto
     </div>
  

Código CSS

.box {
   display: flex; /* propriedade de marcação flexbox*/
   width: 500px; /* largura do elemento */
   margin: 10px; /* medida de margem externa, de distanciamento  */
   padding:10px; /* medida de espaço interno, complementar ao elemento */
   border: 2px dotted rgb(96, 139, 168); /* propriedades de linha de borda */
}
.box>* { /* A marcação ">*" se refere a qualquer objeto definido como classe="box" */
   border: 2px solid rgb(96, 139, 168); /* propriedades d,e linha de borda */
   border-radius: 5px; /* arredondamento de borda */
   background-color: rgba(126, 181, 218, 0.2); /* cor de fundo do objeto */
   margin: 0px; /* medida de margem externa, de distanciamento */
   padding: 8px; /* medida de espaço interno, complementar ao elemento */
}

Propriedade flex-direction

A propriedade flex-direction define a direção na qual os elementos flex serão exibidos dentro do contêiner flex, ao longo do eixo principal (main-axis):

*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. */

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.

Propriedade flex-direction: column;

*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; */

Quebra de linha com "flex-wrap"

Embora o modelo flexbox seja um modelo unidimensional, é possível fazer com que os elementos de um contêiner flex sejam agrupados em múltiplas linhas. Ao se fazer isso, considera-se cada linha como um novo contêiner flex. Qualquer distribuição espacial ocorrerá ao longo essa linha, sem referência às linhas laterais, de ambos os lados. Para gerar a quebra automática das linhas, deve ser adicionada à propriedade flex-wrap o valor wrap. Assim, se elementos forem muito grandes para serem exibidos em uma única linha, eles serão agrupados em outras linhas, conforme a figura a seguir:

Propriedade flex-wrap, valor wrap;

Código HTML

   
     <h3>Propriedade ''flex-wrap' com valor ''wrap''</h3>
      <div class="box2">
        <div>Um</div>
        <div>Dois</div>
        <div>Três
            <br>Texto extra
            <br>Texto extra
            <br>Texto extra
        </div>
      </div>
   

Código CSS

 .box2 {
   display: flex;
   flex-wrap:wrap;
   width: 500px;
 }
 .box2>* {
   margin: 0px;
   padding: 8px;
   width:200px;
 }

No exemplo a seguir os elementos flex têm largura determinada, cuja soma totaliza um valor maior do que o espaço do contêiner flex. Neste caso, é possível observar que a propriedade flex-wrap definida como wrap vai permitir que os itens sejam reorganizados em mais de uma linha dentro do contêiner flex. Trocando-se o valor da propriedade para nowrap, que também é o valor inicial padrão, os elementos flex 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. O uso do valor nowrap causaria um vazamento se os itens não encolhessem ou não diminuíssem o suficiente para caber no contêiner flex.

Propriedade flex-wrap, valor nowrap;

Código HTML

   
     <h3>Propriedade ''flex-wrap' com valor ''nowrap''</h3>
      <div class="box2">
        <div>Um (200px)</div>
        <div>Dois (200px)</div>
        <div>Três (200px)
            <br>Texto extra
            <br>Texto extra
            <br>Texto extra
        </div>
      </div>
   

Código CSS

 .box3 {
   display: flex;
   flex-wrap:nowrap;
   width: 500px;
   border: 2px dotted rgb(96, 139, 168);
   padding:10px;
   margin: 10px;
 }
 .box3>* {
   margin: 0px;
   padding: 8px;
   width:200px;
 }

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.

Código HTML

 <h3>Propriedade ''flex-flow'' com valor ''row wrap''</h3>
   <div class="box4">
      <div>Um</div>
      <div>Dois</div>
      <div>Três
         <br>Texto extra
         <br>Texto extra
         <br>Texto extra
      </div>
    </div>

Código CSS

.box4 {
   display: flex; flex-flow: row wrap;
   width: 500px; border: 2px dotted rgb(96, 139, 168);
   padding:10px; margin: 10px;
}
.box4>* {
   border: 2px solid rgb(96, 139, 168); border-radius: 5px; 
   background-color: rgba(126, 181, 218, 0.2);
   margin: 0px; padding: 8px; width: 200px;
}

Expansão, encolhimento e tamanho dos elementos flex

São propriedades de ajuste direto dos elementos flex:

• flex-grow (en-US)
• flex-shrink (en-US)
• flex-basis (en-US)

Antes que essas propriedades possam fazer sentido, é preciso compreender o conceito de espaço disponível. Quando se modifica o valor das propriedades acima, altera-se a forma que o espaço disponível é distribuído entre os elementos. Tal conceito de espaço disponível também é relevante quando se trata do alinhamento.

Conforme o exemplo abaixo, se houver três elementos com 100 pixels de comprimento em um contêiner de 500 pixels, então o espaço total necessário para acomodá-los será de 300 pixels. Desse modo, sobrarão 200 pixels de espaço útil. Se os valores iniciais não forem modificados, então o flexbox posicionará esse espaço após o último item.

um

dois

três
texto
texto
texto

Se for necessário que os elementos cresçam proporcionalmente, ou não, e preencham o espaço disponível, o modelo flex-box permite a definição de arranjos específicos, conforme as seções a seguir.

Propriedade flex-basis

A propriedade flex-basis define o tamanho inicial dos elementos em unidades de pixel, antes que o espaço disponível seja redistribuído. O valor inicial da propriedade é auto — neste caso o navegador observa se os itens possuem o mesmo tamanho. No exemplo anterior, os elementos-filhos têm a largura de 80 pixels, utilizada como valor da propriedade flex-basis.

Se os elementos não possuem um tamanho padrão, as dimensões de seus conteúdos (imagem, texto, etc) são passadas como parâmetro para propriedade flex-basis. Quando o elemento-pairecebe a marcação display: flex; para criar o contêiner flex, todos os elementos-filhos se organizam em linha e ocupam apenas o espaço necessário para exibir seu conteúdo, conforme o exemplo a seguir:

um

dois

três
texto
texto
texto

Propriedade flex-grow

A propriedade flex-grow é definida com um inteiro positivo. Ela define que os elementos flex podem crescer ao longo do eixo principal a partir do valor mínimo estabelecido no flex-basis. A propriedade faz com que o elemento se estique e ocupe qualquer espaço disponível nesse eixo, ou uma proporção dele, caso outros elementos-irmãos também possam crescer.

Atribuir o valor 1 à propriedade flex-grow fará com que o espaço disponível no contêiner flex seja igualmente distribuído entre todos os elementos dentro do contêiner. Logo, os elementos-filhos irão se expandir para preencher o contêiner no sentido do eixo principal.

Como visto no parágrafo anterior, a propriedade flex-grow pode ser empregada para distribuir o espaço proporcionalmente entre os elementos de um contêiner, contudo, se atribuirmos ao primeiro elemento o valor 2 e 1 aos elementos restantes, duas partes serão dadas ao primeiro elemento e uma parte para cada um dos outros dois elementos, conforme a distribuição a seguir.

• Contêiner flex possui 500px de largura;
• Elementos-filhos possuem 100px de largura cada; somam 300px,
• Espaço disponível no contêiner flex equivale a 200px;
• Elemento um: propriedade flex: 2 1 auto (flex-grow = 2);
• Elementos dois e três: propriedade flex: 1 1 auto (flex-grow = 1);
• Espaço disponível é dividido em partes:
  2 (div um) + 1 (div dois) + 1 (div três) = 4 (quatro) partes;
• Elemento um recebe 2/4 do espaço disponível = 100px. Tamanho final: 100px + 100px = 200px de largura;
• Elementos dois e três recebem cada um 1/4 do espaço disponível (200px/4 = 50px).
  Tamanho final: 100px + 50px = 150px.;

um

dois

três
texto
texto
texto

Propriedade flex-shrink

Enquanto a propriedade flex-grow permite aumentar a largura dos elementos dentro do contêiner flex para completar o espaço disponível no eixo principal, a propriedade flex-shrink faz o oposto, controlando a redução dos elementos filhos. Caso não haja espaço suficiente para acomodar todos os elementos e o valor da propriedade flex-shrink seja um inteiro positivo, a largura pode ser reduzida a um valor menor do que a definida na propriedade flex-basis. Assim como na propriedade flex-grow, diferentes valores podem ser atribuídos a um elemento de modo que ele encolha mais do que os outros. Um elemento cuja propriedade flex-shrink receba um valor inteiro maior irá diminuir mais do que os seus elementos irmãos definidos com valores menores.

O tamanho mínimo do elemento será levado em consideração ao se calcular a quantidade real de encolhimento definido, o que significa que a propriedade flex-shrink se comporta de modo potencialmente menos consistente do que a propriedade flex-grow. Recomenda-se o estudo mais detalhado do algorítimo da propriedade.

Os valores para as propriedades flex-grow e flex-shrink são proporcionais. Particularmente, se tivermos todos os nossos elementos definidos como { flex: 1 1 200px; } e então quisermos que um deles cresça o dobro, temos de definir o elemento como { flex: 2 1 200px; }. Entretanto, podemos escrever { flex: 10 1 200px; } e { flex: 20 1 200px; }, o resultado será o mesmo.

No exemplo a seguir, a propriedade flex de cada elemento filho tem os valores definidos conforme a ordem: { flex: <flex-grow> <flex-shrink> <flex-basis>; }:

• Contêiner flex possui 400px de largura { width: 400px; };
• Elementos-filhos possuem 200px de largura cada { flex: <grow> <shrink> 200px; }; somam 600px,
• A soma dos elementos filhos equivale a 600px: espaço extrapolado de 200px,
  a reduzir em relação à largura do contêiner flex, de 400px;
• Elemento um: propriedade { flex: 1 2 200px } (<flex-shrink> = 2);
• Elementos dois e três: propriedade { flex: 1 1 200px; } (flex-shrink = 1);
• O espaço a reduzir é dividido conforme a marcação do valor <flex-shrink>":
  2 (div um) + 1 (div dois) + 1 (div três) = 4 (quatro) partes a reduzir;
• Elemento um diminui 2/4 do espaço extra = 100px;
  tamanho final: 200px - 100px = 100px de largura;
• Elementos dois e três diminuem 1/4 do espaço extra (200px/4 = 50px);
  tamanho final = 150px cada (200px - 50px);

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>;

Valor abreviado { 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

Valor abreviado { 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

Valor abreviado { flex: none; }

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

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

um

dois

três
texto, texto, texto, texto

Valor abreviado { flex: 1; }

Outra abreviação possível é { flex: 1; } ou { flex: 2; } e assim por diante, equivalente 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

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>

align-items: strech

O valor strech é o valor padrão da propriedade align-items na qual os elementos-filhos se estendem até a maior altura do contêiner-flex e o elemento-filho mais alto define a altura do contêiner flex, conforme o exemplo a seguir:

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

um

dois

três
texto
texto
texto

align-items: flex-start

Na definição da propriedade align-items como flex-start, os elementos-filhos ficam alinhados a partir do topo do contêiner flex;

• Contêiner flex com 500px de largura { width: 500px; };
• Propriedade { align-items: flex-start; };

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;
  }

um

dois

três
texto
texto
texto

align-items: center

• { align-items: center; }: elementos-filhos ficam centralizados no eixo transversal do contêiner flex;

Propriedade justify-content

A propriedade justify-content (en-US) é empregada para alinhar os elementos ao longo do eixo principal, cuja direção (row ou column) é definida a partir da propriedade flex-direction. O valor inicial é flex-start, que alinha os elementos rente à borda esquerda do contêiner, mas também pode ser definido como flex-end, que resulta em um alinhamento oposto, rente à borda direita do contêiner, ou center, para alinhá-los ao centro.

O valor space-between pode ser usado pode ser usado para ocupar todo o espaço livre após a disposição dos itens e dividí-lo igualmente entre os itens, para que haja a mesma quantidade de espaço entre cada elemento. Para gerar uma quantidade igual de espaço à direita e à esquerda, usa-se o valor space-around.

Tente os seguintes valores da propriedada justify-content no exemplo prático abaixo:

stretch flex-start flex-end center space-around space-between

No artigo Alinhando Elementos em um Contêiner Flex (em inglês) tais propriedades serão abordadas mais detalhadamente, de modo a compreender melhor o seu funcionamento. Contudo, os exemplos simples abordados aqui serão úteis na maioria dos casos.

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 (em inglês).