Mudanças entre as edições de "CSS: flexbox"

De AleloWiki
Ir para: navegação, pesquisa
(→‎Conceitos básicos)
(→‎Propriedade flex-flow)
 
(307 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
 
==Conceitos básicos==
 
==Conceitos básicos==
  
−
''Flexible Box Module'', geralmente chamado de ''flexbox'', foi projetado como modelo de layout unidimensional, como método capaz de organizar espacialmente os elementos em uma interface, além de possuir capacidades avançadas de alinhamento dos elementos de um documento Web.
+
''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 específica: ''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.
+
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''==
 
==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 documento web e são fundamentais para sua compreensão.
+
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'' vão alinhar e justificar o conteúdo ao longo de um eixo ou de outro, com diversas possibilidades de diagramação dos elementos.
+
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.
  
−
[ Imagem exemplo ]  
+
[[Arquivo:Flexbox_01_conceito.png|540px|thumb|none|Flexbox: conceitos básicos;]]
  
−
===Eixo principal===
+
===Propriedade ''flex-direction''===
  
 
A propriedade ''flex-direction'' define a direção do eixo principal (''main-axis'') e possui quatro valores possíveis:
 
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) */
+
[[Arquivo:flexbox_main-axis.png|480px|thumb|none|Definição do eixo principal (''main-axis''); Fonte: NTI/Cenargen.]]
  
−
flex-direction: row-reverse; /* direção ''inline'' (em linha, horizontal) */
+
'''Sintaxe'''
  
−
  flex-direction: column; /* direção ''block'' (verticalmente, do topo para baixo) */
+
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) */
  
−
  flex-direction: column-reverse; /* direção ''block'' (verticalmente, do topo para baixo) */
+
===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:
 +
<br>
 +
<br>
 +
[[Arquivo:Flexbox_cross-axis_h.png|480px|thumb|none|Orientação ''cross-axis'' para o parâmetro ''flex-direction: row'';]]
 +
<br>
 +
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:
 +
<br>
 +
<br>
 +
[[Arquivo:Flexbox_cross-axis_v.png|480px|thumb|none|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.
 +
 
 +
[[Arquivo:Flexbox_01_flex-direction_row1.png|480px|thumb|none|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.
 +
 
 +
[[Arquivo:Flexbox_01_flex-direction_row.png|480px|thumb|none|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''
 +
 
 +
  <nowiki>
 +
  <div class="box">
 +
    <div>Um</div>
 +
    <div>Dois</div>
 +
    <div>Três
 +
      <br>texto.
 +
      <br>texto..
 +
      <br>texto...
 +
    </div>
 +
  </div
 +
  </nowiki>
 +
 
 +
''Resultado em tela''
 +
 
 +
<div style="display: flex; width: 500px;
 +
    border: 2px dotted #ccc; padding:10px; margin: 10px;">
 +
    <div style="border: 2px solid #ccc; background:#ebebeb; padding:10px;">um</div>
 +
    <div style="border: 2px solid #ccc; background:#ebebeb; padding:10px;">dois</div>
 +
    <div style="border: 2px solid #ccc; background:#ebebeb; padding:10px;">três<br>texto.<br>texto..<br>texto...</div>
 +
</div>
 +
 
 +
==Propriedade ''flex-direction'' direciona a disposição dos elementos no contêiner==
 +
 
 +
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''
 +
 
 +
  <nowiki>
 +
  <div class="box">
 +
    <div>Um</div>
 +
    <div>Dois</div>
 +
    <div>Três
 +
      <br>texto.
 +
      <br>texto..
 +
      <br>texto...
 +
    </div>
 +
  </div
 +
  </nowiki>
 +
 
 +
''Resultado em tela''
 +
 
 +
<div style="display: flex; width: 500px; flex-direction: column;
 +
    border: 2px dotted #ccc; padding:10px; margin: 10px;">
 +
    <div style="border: 2px solid #ccc; background:#ebebeb; padding:10px;">um</div>
 +
    <div style="border: 2px solid #ccc; background:#ebebeb; padding:10px;">dois</div>
 +
    <div style="border: 2px solid #ccc; background:#ebebeb; padding:10px;">três<br>texto.<br>texto..<br>texto...</div>
 +
</div>
 +
 
 +
==Propriedade "flex-wrap" permite ou não a quebra de linha na disposição dos elementos==
 +
 
 +
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''
 +
 
 +
  <nowiki>
 +
  <div class="box">
 +
    <div>Um</div>
 +
    <div>Dois</div>
 +
    <div>Três
 +
      <br>texto.
 +
      <br>texto..
 +
      <br>texto...
 +
    </div>
 +
  </div
 +
  </nowiki>
 +
 
 +
''Resultado em tela''
 +
 
 +
<div style="display: flex; flex-wrap: wrap; width: 500px;
 +
    border: 2px dotted #ccc; padding:10px; margin: 10px;">
 +
    <div style="width:200px; border: 2px solid #ccc; background:#ebebeb; padding:10px;">um</div>
 +
    <div style="width:200px; border: 2px solid #ccc; background:#ebebeb; padding:10px;">dois</div>
 +
    <div style="width:200px; border: 2px solid #ccc; background:#ebebeb; padding:10px;">três<br>texto.<br>texto..<br>texto...</div>
 +
</div>
 +
 
 +
===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-wrap''e 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''
 +
 
 +
<div style="display: flex; width: 500px;
 +
    border: 2px dotted #ccc; padding:10px; margin: 10px;">
 +
    <div style="width:200px; border: 2px solid #ccc; background:#ebebeb; padding:10px;">um</div>
 +
    <div style="width:200px; border: 2px solid #ccc; background:#ebebeb; padding:10px;">dois</div>
 +
    <div style="width:200px; border: 2px solid #ccc; background:#ebebeb; padding:10px;">três<br>texto.<br>texto..<br>texto...</div>
 +
</div>
 +
 
 +
==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''.
  
−
*''row'' - direção ''inline'' (em linha, horizontal); itens posicionados em ordem natural;
+
*''Sintaxe''
−
*''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===
+
*flex-flow: <''flex-direction''> <''flex-wrap''>;
 +
/* Primeiro valor: ''flex-direction''; valores: ''row'', ''row-reverse'', ''column'' e ''column-reverse'';
 +
/* Segundo valor: ''flex-wrap''; valores: ''wrap'' e ''nowrap'';
 +
 
 +
*''Código HTML''
 +
 
 +
<nowiki>
 +
  <div class="box">
 +
      <div>Um</div>
 +
      <div>Dois</div>
 +
      <div>Três
 +
        <br>Texto .
 +
        <br>Texto ..
 +
        <br>Texto ...
 +
      </div>
 +
    </div></nowiki>
 +
 
 +
*''Código CSS''
 +
 
 +
.box {
 +
    display: flex;
 +
    flex-flow: row wrap;
 +
    width: 500px;
 +
}
 +
.box>* {
 +
    width: 200px;
 +
}
 +
 
 +
''Resultado em tela''
 +
 
 +
<div style="display: flex; flex-flow: column wrap; width: 500px;
 +
    border: 2px dotted #ccc; padding:10px; margin: 10px;">
 +
    <div style="width:200px; border: 2px solid #ccc; background:#ebebeb; padding:10px;">um</div>
 +
    <div style="width:200px; border: 2px solid #ccc; background:#ebebeb; padding:10px;">dois</div>
 +
    <div style="width:200px; border: 2px solid #ccc; background:#ebebeb; padding:10px;">três<br>texto .<br>texto ..<br>texto ...</div>
 +
</div>
 +
 
 +
==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.
  
−
Se o valor escolhido for ''row'' (linha) ou ''row-reverse'' (linha reversa), seu eixo principal se moverá ao longo da linha — na direção ''inline''.
+
==Propriedade ''justify-content'' alinha os elementos no eixo principal (''main-axis'')==
  
−
====flex-direction:row====
+
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''.
  
−
[[Arquivo:Flexbox_01_mainaxis.png|480px||none|Orientação ''cross-axix''; Fonte: Régis.]]
+
[[Arquivo:flexbox_justify-content.png|480px|thumb|none|Propriedade ''justify-content'' define o alinhamento dos elementos no eixo principal (''main-axis''); Fonte: NTI/Cenargen.]]
  
 +
Conjunto de valores admitidos na propriedade ''justify-content'':
  
−
O eixo transversal (''cross-axix'') é perpendicular ao eixo principal (''main-axis''), logo, se a propriedade ''flex-direction'' estiver definida nas linhas, como ''row'' ou ''row-reverse'', o eixo transversal estará na direção das colunas, como ''column'' ou ''column-reverse''.
+
*''flex-start;'' (*Valor padrão inicial)
 +
*''flex-end;''
 +
*''center;''
 +
*''stretch;''
 +
*''space-around;''
 +
*''space-between;''
  
−
Se o valor escolhido for ''column'' (coluna) ou ''column-reverse'' (coluna reversa), o eixo principal se moverá do topo até o fim da página — na direção ''block''.
+
===justify-content: ''flex-start''===
  
−
====flex-direction:column====
+
Valor inicial padrão; distribui os ''elementos filhos'' a partir do início do ''eixo principal'', rente à borda esquerda do ''contêiner flex'':
  
 +
*''CSS''
  
−
[[Arquivo:Flexbox_02_verticalaxix.png|480px| |none|Orientação ''cross-axix'';]]
+
  .box {
 +
    display: flex;
 +
    justify-content: ''flex-start'';
 +
  }
  
 +
*''Resultado na tela''
  
−
Do mesmo modo, se o eixo principal for definido nas colunas, como ''column'' ou ''column-reverse'', então o eixo transversal estará na direção das linhas, como ''row'' ou ''row-reverse''.
+
<div style="display: flex; width: 500px; justify-content: flex-start;
 +
    border: 2px dotted #ccc; padding:10px; margin: 10px;">
 +
    <div style="width: 100px; height: 60px; border: 2px solid #ccc; background:#ebebeb;">um</div>
 +
    <div style="width: 100px; height: 60px; border: 2px solid #ccc; background:#ebebeb;">dois</div>
 +
    <div style="width: 100px; height: 60px; border: 2px solid #ccc; background:#ebebeb;">três</div>
 +
</div>
  
−
===Linhas de Início e Fim===
+
===justify-content: ''flex-end''===
  
−
Outro fundamento importante para compreender o ''Flexbox'' é saber que o modelo não admite nenhuma premissa em relação ao modo de escrita dos elementos do documento HTML. Nas primeiras versões do CSS, os modelos de diagramação utilizavam a orientação da escrita horizontal, da esquerda para a direita. A Internet, em sua diversidade de usos, abrange uma variedade de modos de escrita na atualidade, com possibilidades que podem ter início diverso do modelo ocidental, com início da direita para a esquerda, por exemplo, com novas linhas aparecendo uma após a outra.
+
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'':
  
−
Outra área crítica em termos de compreensão é como o ''Flexbox'' não faz nenhuma premissa sobre o modo de escrita do documento. No passado, o CSS utilizava fortemente os modos de escrita horizontal e da esquerda para a direita. Métodos modernos de layout abrangem uma variedade de modos de escrita e, portanto, não assumimos mais que uma linha de texto começará no canto superior esquerdo do documento e sigará para o lado direito, com novas linhas aparecendo uma após a as outra.
+
*''CSS''
  
−
Essa discussão sobre a relação entre o ''flexbox'' e a especificação do modo de escrita será abordada um artigo posterior, contudo, a descrição a seguir explica brevemente porque não se fala sobre esquerda e direita/ acima e abaixo quando descreve-se a direção para a qual os elementos flex fluem.
+
  .box {
 +
    display: flex;
 +
    justify-content: ''flex-end'';
 +
  }
  
−
Se o valor da propriedade flex-direction for row (linha), considerando o estilo de escrita ocidental, a borda inicial do eixo principal estará localizada à esquerda e a borda final, à direita.
+
*''Resultado HTML''
  
−
Working in English the start edge is on the left.
+
<div style="display: flex; width: 500px; justify-content: flex-end;
 +
    border: 2px dotted #ccc; padding:10px; margin: 10px;">
 +
    <div style="width: 100px; height: 60px; border: 2px solid #ccc; background:#ebebeb;">um</div>
 +
    <div style="width: 100px; height: 60px; border: 2px solid #ccc; background:#ebebeb;">dois</div>
 +
    <div style="width: 100px; height: 60px; border: 2px solid #ccc; background:#ebebeb;">três</div>
 +
</div>
  
−
Considerando um idioma como o Árabe, que possui um estilo de escrita oriental, teremos o inverso: a borda inicia do eixo principal estará localizada à direita e a borda final, à esquerda.
+
===justify-content: ''center''===
  
−
The start edge in a RTL language is on the right.
+
*Alinha os ''elementos filhos'' ao centro do ''eixo principal'';
  
−
Em ambos os casos, a borda inicial do eixo transversal está na parte superior do contêiner flex e a borda final, na parte inferior, visto que ambos os idiomas têm um estilo de de escrita horizontal.
+
===justify-content: ''stretch''===
  
−
Após um tempo de prática, pensar em termos de início e final ao invés de esquerda e direita se tornará natural e será útil ao lidar com outros métodos de layout, como CSS Grid, que seguem os mesmos padrões.
+
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.<ref>''Justify-content'':  Developer Mozzila; disponível em [https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content Developer Mozzila]; Acessado em 21/11/2021;</ref>
  
−
==Contêiner Flex==
+
===justify-content: ''space-between''===
  
−
A área de um documento que faz uso do ''flexbox'' é chamada de contêiner flex. Para criar essa estrutura, define-se o valor da propriedade display do elemento representado pelo contêiner como flex ou inline-flex. Desse modo, os elementos-filhos desse contêiner tornar-se-ão do tipo flex. Como todas as propriedades no CSS possuem valores padrão, ao criar um contêiner flex, os elementos nele contidos apresentarão o seguinte comportamento:
+
*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''.
  
−
Exibição em linha (o padrão do flex-direction é row).
+
===justify-content: ''space-around''===
  
−
Alinhamento na borda inicial do eixo principal.
+
*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;
  
−
Não há expansão no eixo principal, mas pode haver contração.
+
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.
  
−
Haverá expansão vertical para preencher a altura do eixo transversal.
+
===Sintaxe ''justify-content''===
  
−
A propriedade flex-basis (en-US) estará definida como auto.
+
/* 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 */
  
−
A propriedade flex-wrap estará definida como nowrap.
+
/* Alinhamento de linha de base (baseline) */
 +
/* Propriedade 'justify-content' não recebe valores de linha de base (baseline) */
  
−
O resultado final é que todos os elementos serão alinhados em uma linha, usando o tamanho do conteúdo como o tamanho no eixo principal. Se houver mais itens do que é possível caber no container, não haverá uma quebra de linha; ao invés disso, irão 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.
+
/* Alinhamento normal */
 +
justify-content: normal;
  
−
É possível conferir essas questões no exemplo prático abaixo. Tente editar ou adicionar mais itens para testar o comportamento inicial do Flexbox.
+
/* 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 flex-direction==
+
==Propriedade ''align-content'' alinha os elementos no eixo transversal (''cross-axis'')==
  
−
A propriedade flex-direction permite alterar a direção na qual os elementos flex serão exibidos ao longo do eixo principal. Definindo a propriedade flex-direction como row-reverse (linha reversa) ainda teremos os elementos dispostos em uma linha, entretanto, as linhas inicial e final serão trocadas.
+
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'').
  
−
Se mudarmos a flex-direction para a column (coluna), o eixo principal exibirá os elemento em uma coluna. Trocando o valor para column-reverse (coluna reversa) fará com que as linhas inicial e final sejam novamente trocadas.
+
[[Arquivo:flexbox_propriedades_justify_e_align.png|480px|thumb|none|Função das propriedades ''justify-content'' e ''align-content''; Fonte: NTI/Cenargen]]
  
−
No exemplo prático abaixo tem-se a propriedade flex-direction definida como row-reverse. Experimente os outros valores - row, column e column-reverse - para ver o que acontece com o conteúdo.
+
'''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;
 +
}
  
−
==Quebra de linha com "flex-wrap"==
+
[[Arquivo:flexbox_align-content.png|480px|thumb|none|Posição dos elementos a partir da propriedade ''align-content''; fonte: NTI/Cenargen;]]
  
−
Embora o flexbox seja um modelo unidimensional, é possível fazer com que elementos flex sejam agrupados em múltiplas linhas. Ao 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 de ambos os lados. Para gerar a quebra automática das linhas adicione a propriedade flex-wrap com o valor wrap. Assim, se elementos forem muito grandes para serem exibidos em uma única linha, eles serão agrupados em outras linhas.
+
===Posicionamento===
  
−
O exemplo prático abaixo contém elementos flex aos quais foi dada uma determinada largura, cuja soma totaliza um valor grande demais para caber no container. Visto que a propriedade flex-wrap está definida como wrap, os itens serão reorganizados em mais de uma linha. Trocando-se para nowrap, que também é o valor inicial, eles encolherão para caber no contêiner, porque estão usando valores iniciais de flexbox que permitem que os itens encolham. O uso do nowrap causaria um vazamento se os itens não encolhessem ou não diminuíssem o suficiente para caber.
+
* 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.
  
 +
===Propriedade ''align-items''===
  
−
Saiba mais sobre o empacotamento de itens flexíveis no guia Masterização de Empacotamento de Itens Flexíveis (em Inglês).
+
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''.
  
−
Propriedade abreviada flex-flow
+
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 <nowiki><div class="box"></nowiki> e serão alinhados conforme a marcação da propriedade ''align-items''.
−
Pode-se combinar as propriedades flex-direction e flex-wrap de forma abreviada através da propriedade flex-flow. O primeiro valor especificado é o flex-direction e o segundo valor é o flex-wrap.
 
  
−
No exemplo prático abaixo, tente alterar o primeiro valor para um dos valores permitidos para a propriedade flex-direction - row, row-reverse, column ou column-reverse, e também altere o segundo para wrap e nowrap.
+
====Código HTML====
  
 +
  <nowiki><div class="box">
 +
    <div>um</div>
 +
    <div>Dois</div>
 +
    <div>três
 +
        <br>texto
 +
        <br>texto
 +
        <br>texto
 +
    </div>
 +
  </div></nowiki>
  
 +
==Expansão, encolhimento e tamanho dos elementos flex==
  
−
Expansão, encolhimento e tamanho dos elementos flex
+
São propriedades de ajuste direto dos elementos ''flex'':
−
Para ter mais controle sobre os elementos flex é possível alterá-los diretamente utilizando as três propriedades abaixo:
 
  
−
flex-grow (en-US)
+
*''flex-grow''
−
flex-shrink (en-US)
+
*''flex-shrink''
−
flex-basis (en-US)
+
*''flex-basis''
−
Na presente seção, examinar-se-á brevemente tais propriedades. Para se aprofundar neste conteúdo sugete-se o tutorial Taxas de Controle de Elementos Flex ao Longo do Eixo Principal (em inglês).
 
  
 
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.
 
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.
Linha 130: Linha 447:
 
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.
 
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.
  
−
This flex container has available space after laying out the items.
+
<div style="display: flex; width: 500px; border: 2px dotted rgb(96, 139, 168); padding:10px; margin: 10px;">
 +
    <div style="border: 2px solid #ccc; background-color: #efefef; margin: 0px; padding: 8px; width: 100px;">um</div>
 +
    <div style="border: 2px solid #ccc; background-color: #efefef; margin: 0px; padding: 8px; width: 100px;">dois</div>
 +
    <div style="border: 2px solid #ccc; background-color: #efefef; margin: 0px; padding: 8px; width: 100px;">três<br>texto<br>texto<br>texto</div>
 +
</div>
 +
 
 +
Se for necessário que os elementos cresçam proporcionalmente, ou não, e preencham o espaço disponível, o modelo ''flexbox'' 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-pai''recebe 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:
 +
 
 +
<div style="display: flex; width: 500px; border: 2px dotted #ccc; padding:10px; margin: 10px;">
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px;">um</div>
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px;">dois</div>
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px;">três<br>texto<br>texto<br>texto</div>
 +
</div>
 +
 
 +
===Propriedade ''flex-grow''===
  
−
Se for necessário que os elementos cresçam proprocionamente ou não e preencham o espaço disponível, deverá haver método que faça essa distribuição espacial entre eles, conforme será visto nas seções subsequentes.
+
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.
  
−
Propriedade flex-basis
+
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.
−
A propriedade flex-basis define o tamanho inicial dos elementos, em unidades de pixel, antes que o espaço remanescente seja redistribuído. O valor inicial desta propriedade é auto — neste caso o navegador observa se os itens possuem o mesmo tamanho. No exemplo acima, todos os itens têm uma largura de 100 pixels, que é utilizada como padrão na propriedade flex-basis.
 
  
−
Se os elementos não possuírem um tamanho padrão, então as dimensões dos seus conteúdos (imagem, texto, etc) serão passadas como parâmetro para propriedade flex-basis. É por isso que quando escreve-se display: flex no elemento-pai para criar o contêiner, todos os elementos-filhos se organizam em linha e ocupam apenas o espaço necessário para exibir seu conteúdo.
+
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.
  
−
Propriedade flex-grow
+
*''Contêiner flex'' possui 500px de largura;
−
Com a propriedade flex-grow definida como um inteiro positivo, os elementos flex podem crescer ao longo do eixo principal, a partir do valor mínimo estabelecido no flex-basis. Isto fará 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.
+
*''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: <br>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). <br>Tamanho final: 100px + 50px = 150px.;
  
−
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 do exemplo acima. Logo, os elementos-filhos irão se expandir para preencher o contêiner no sentido do eixo principal.
+
<div style="display: flex; width: 640px; border: 2px dotted #ccc; padding:10px; margin: 10px;">
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px; width: 100px; flex: 2 1 auto;">um</div>
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px; width: 100px; flex: 1 1 auto;">dois</div>
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px; width: 100px; flex: 1 1 auto;">três<br>texto<br>texto<br>texto</div>
 +
</div>
  
−
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 parae 1 aos elementos restantes, duas partes serão dadas ao primeiro elemento (100px de 200px totais) e uma parte para cada um dos outros dois elementos (50px de 200px totais).
+
===Propriedade ''flex-shrink''===
  
−
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.
−
Enquanto a propriedade flex-grow permite aumentar a largura dos elementos dentro do contêiner para completar o espaço disponível no eixo principal, a propriedade flex-shrink faz o oposto, controlando a redução dos mesmos. 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 irmão que tenham valores menores.
 
  
−
O tamanho mínimo do elemento será levado em consideração ao se calcular a quantidade real de encolhimento que ocorrerá, o que significa que a propriedade flex-shrink se comporta de modo potencialmente menos consistente do que a propriedade flex-grow. Examinar-se-á mais detalhadamente o funcionamento desse algoritmo no artigo Taxas de Controle de Elementos Flex ao Longo do Eixo Principal.
+
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.
  
−
Note que 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 se quisermos.
+
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.
  
−
Abreviatura para os valores das propriedades flex
+
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''>; }:
−
As propriedades flex-grow, flex-shrink, and flex-basis raramente são empregas de forma individual. Usualmente, elas são combinadas através da propriedade de abreviação flex. A abreviatura flex permite definir os três valores na seguinte ordem: flex-grow, flex-shrink, flex-basis.
 
  
−
O exemplo prático abaixo permite que sejam testados diferentes valores com a propriedade de abreviação flex; lembre-se que o primeiro campo corresponde à propriedade flex-grow, onde um valor inteiro e positivo faz-se o elemento crescer. O segundo campo é a propriedade flex-shrink e, ao contrário do anterior, um valor inteiro e positivo pode fazer os elementos encolherem, mas  somente se o seu comprimento total ultrapassar o limite horizontal do contêiner, no sentido do eixo principal. O último campo contém a propriedade flex-basis, que define o valor base, em unidades de pixel, para aumentar e diminuir o elemento quando da aplicação das propriedades anteriores.
+
*''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, <br>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>": <br>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;<br> tamanho final: 200px - 100px = 100px de largura;
 +
*Elementos ''dois'' e ''três'' diminuem 1/4 do ''espaço extra'' (200px/4 = 50px); <br>tamanho final = 150px cada (200px - 50px);
  
 +
<div style="display: flex; width: 400px; border: 2px dotted #ccc; padding:10px; margin: 10px;">
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px; flex: 1 2 200px;">um</div>
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px; flex: 1 1 200px;">dois</div>
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px; flex: 1 1 200px;">três<br>texto<br>texto<br>texto</div>
 +
</div>
  
 +
==Abreviatura para os valores da propriedade ''flex''==
  
−
Há ainda alguns valores de abreviação predefinidos, que cobrem a maioria dos casos de uso. São aplicados com frequência em turoriais e, normalmente, suprem todas as necessidades práticas. Os valores predefinidos podem ser vistos abaixo:
+
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''>; }.
  
−
flex: initial
+
Outros valores de abreviação predefinidos podem cobrir a maioria dos casos de uso e suprir outras necessidades práticas.
−
flex: auto
 
−
flex: none
 
−
flex: <positive-number>
 
−
Definir flex: initial reseta os elementos para valores-padrão do Flexbox, sendo equivale a flex: 0 1 auto. Neste ultimo caso, o valor da propriedade flex-grow é 0, então 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á usad o tamanho mínimo necessário para preencher a dimensão do eixo principal.
 
  
−
Definir flex: auto é equivalente a flex: 1 1 auto. Essa configuração é semelhante a flex:initial, mas nesse caso os elementos podem aumentar para preencher o contêiner ou diminuir se necessário, para evitar o transbordamento lateral da tela.
+
*''flex: initial;''
 +
*''flex: auto;''
 +
*''flex: none;''
 +
*''flex: <positive-number>;''
  
−
Definir flex: none irá criar um elemento flex totalmente inflexível, sendo o equivalente a escrever 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.
+
===flex: ''initial''===
  
−
Outra abreviação normalmente vista em tutoriais é flex: 1 ou flex: 2 e assim por diante, o que equipara-se a flex: 1 1 0. Os elementos podem crescer ou diminuir a partir da propriedade flex-basis com valor nulo.
+
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.
  
−
Teste essas formas abreviadas no exemplo prático abaixo:
+
*''Contêiner flex'' possui 500px de largura ''{ width: 500px; }'';
 +
*''Elementos-filhos'', propriedade ''{ flex: initial; }'';
  
 +
<div style="display: flex; width: 500px; border: 2px dotted #ccc; padding:10px; margin: 10px;">
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px; flex: initial;">um</div>
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px; flex: initial;">dois</div>
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px; flex: initial;">três<br>texto .<br>texto ..<br>texto ...</div>
 +
</div>
  
 +
===flex: ''auto''===
  
−
Alinhamento, justificação e distribuição de espaço livre  entre os elementos
+
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.
−
Um atributo chave do 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
+
*''Contêiner flex'' com 500px de largura ''{ width: 500px; }'';
−
A propriedade align-items irá alinhar os elementos no eixo transversal.
+
*''Elementos-filhos'', propriedade ''{ flex: auto; }'';
  
−
O valor inicial desta propriedade é stretch e é por essa razão que, por padrão, os elementos flex se estendem até a maior altura. De fato, eles se esticam para preencher o contêiner flex - o item mais alto define a altura deste.
+
<div style="display: flex; width: 500px; border: 2px dotted #ccc; padding:10px; margin: 10px;">
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px; flex: auto;">um</div>
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px; flex: auto;">dois</div>
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px; flex: auto;">três<br>texto .<br>texto ..<br>texto ...</div>
 +
</div>
  
−
Pode-se definir a propriedade align-items como flex-start, de modo que os elementos fiquem alinhados com topo do contêiner, flex-end para alinhá-los a partir da base ou center, para que o alinhamento seja centralizado.
+
===flex: ''none''===
  
−
Teste essa propriedade e seus possíveis valores no exemplo prático abaixo — colocou-se uma determinada  altura no contêiner flex, de modo que se perceba como os elementos podem ser movidos no interior do mesmo. Veja o que acontece ao definir cada um dos possíveis valores da propriedade align-items:
+
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''.
  
−
stretch
+
*''Contêiner flex'' com 500px de largura ''{ width: 500px; }'';
−
flex-start
+
*''Elementos-filhos'': propriedade ''{ flex: none; }'';
−
flex-end
 
−
center
 
  
 +
<div style="display: flex; width: 500px; border: 2px dotted #ccc; padding:10px; margin: 10px;">
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px; flex: none;">um</div>
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px; flex: none;">dois</div>
 +
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px; flex: none;">três<br>texto. texto.. texto... texto....</div>
 +
</div>
  
−
Propriedade justify-content
+
===flex: ''1''===
−
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.
+
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''.
  
−
Tente os seguintes valores da propriedada justify-content no exemplo prático abaixo:
+
*''Contêiner flex'' possui 500px de largura ''{ width: 500px; }'';
 +
*''Elementos-filhos'', propriedade ''{ flex: 1; }'';
  
−
stretch
+
<div style="display: flex; width: 500px; border: 2px dotted #ccc; padding:10px; margin: 10px;">
−
flex-start
+
    <div style="border: 2px solid #ccc; background-color: #efefef;
−
flex-end
+
        margin: 0px; padding: 8px; flex: 1;">um</div>
−
center
+
    <div style="border: 2px solid #ccc; background-color: #efefef;
−
space-around
+
        margin: 0px; padding: 8px; flex: 1;">dois</div>
−
space-between
+
    <div style="border: 2px solid #ccc; background-color: #efefef;
 +
        margin: 0px; padding: 8px; flex: 1;">três<br>texto .<br>texto ..<br>texto ...</div>
 +
</div>
  
 +
==Próximos passos==
  
−
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.
+
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.
  
−
Próximos passos
+
==Referências==
−
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).
 
  
 
[[Categoria:Glossário]]
 
[[Categoria:Glossário]]
−
[[Categoria:Desenvolvimento]]
+
[[Categoria:Informática]]

Edição atual tal como às 10h59min de 12 de setembro de 2023

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 direciona a disposição dos elementos no contêiner

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

Propriedade "flex-wrap" permite ou não a quebra de linha na disposição dos elementos

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-flow: <flex-direction> <flex-wrap>;
/* Primeiro valor: flex-direction; 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 ...

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 justify-content alinha os elementos no eixo principal (main-axis)

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.[1]

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 alinha os elementos no eixo transversal (cross-axis)

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.

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>

Expansão, encolhimento e tamanho dos elementos flex

São propriedades de ajuste direto dos elementos flex:

  • flex-grow
  • flex-shrink
  • flex-basis

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 flexbox 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 da propriedade 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.

Referências

  1. ↑ Justify-content: Developer Mozzila; disponível em Developer Mozzila; Acessado em 21/11/2021;
Disponível em "https://alelowiki.cenargen.embrapa.br/index.php?title=CSS:_flexbox&oldid=22189"