Desde a introdução das funções de Web Design Responsivo no GeneXus X Evolution 3, conseguimos criar aplicações web responsivas com GeneXus.
O control Responsive Table tem sido o pilar de nossos
designs
responsivos, o que nos permite especificar a aparência de um aplicativo em diferentes tamanhos de tela. No entanto, esse controle tem algumas desvantagens:

• Em alguns casos, são necessárias mais de 12 colunas.
• O desenvolvedor deseja que os elementos fluam livremente de uma linha para outra quando não há lugar na linha.
• A largura das células não é conhecida em tempo de
  design
  .
• Há um espaço padrão de 15px entre as células de uma tabela responsiva e, às vezes, isso não é o desejado (pode ser eliminado pelas classes de Tema).

Controles Flex

Os controles Flex nos permitem criar layouts flexíveis que “classificam, alinham e distribuem o espaço entre os elementos de um container, mesmo que seu tamanho seja desconhecido e / ou dinâmico (é por isso que eles são” flexíveis “)
1
“.
GeneXus 15 Upgrade 12 introduziu dois novos controles: Flex e Flex Grid.
Flex é um container para uma quantidade estática de elementos, que é conhecida em tempo de design, enquanto Flex Grid é um tipo de FreeStyle grid onde podemos carregar o número de elementos que queremos dinamicamente.
Ambos os controles flexíveis têm controles secundários, como vemos nessas cinco propriedades: Flex Direction
, Flex Wrap
, Justify Content
, Align Items
e Align Content
.

Flex Direction

Especifica a direção dos elementos, que podem ser ordenados horizontalmente (Rows e Rows Reverse) ou verticalmente (Column e Column Reverse).  

Flex Wrap

Permite especificar se os elementos devem se ajustar ou se devem caber em uma única linha.

Justify Content

Define o alinhamento dos elementos nas linhas (alinhamento horizontal se Flex Direction for especificada como linha e alinhamento vertical se a Flex Direction for especificada como uma coluna).

Align Items

Define o alinhamento dos elementos nas linhas (alinhamento vertical se Flex Direction for especificada como linha e alinhamento horizontal se a Flex Direction for especificada como uma coluna.

Align Content Aligns the row when there is extra space in the container.

Exemplo: PhotosGallery

Para mostrar ese novo recurso, criamos uma galeria de fotos usando os controles Flex e Flex Grid.
A galería mostra um conjunto de fotos e uma barra de ferramentas para cada foto, com algumas ações.
Algumas fotos foram tiradas em formato paisagem, outras em retrato e outras são panorâmicas, portanto as dimensões das fotos são desconhecidas em tempo de
design
.
Para otimizar a experiência dos usuários com telas mais pequenas, queremos mostrar a barra de ferramentas na horizontal, abaixo da foto. Em telas maiores, mostraremos as ações verticalmente no lado direito da foto.
 

Vamos ver como isso pode ser feito facilmente usando os controles Flex e Flex Grid. Vamos começar com uma abordagem de cima para baixo, pensando em como as fotos serão apresentadas e, em seguida, continuaremos com a maneira como cada elemento será apresentado.

Grid

Queremos que as fotos fluam horizontalmente e se ajustem automaticamente a uma nova linha para evitar a rolagem horizontal. Para conseguir isso, usaremos um Flex Grid, onde Flex Direction é “Row” e Flex Wrap é “Wrap”. Essas propriedades podem ser configuradas no controle e na classe de tema do controle.

Elementos de grid

Então devemos decidir como apresentar cada elemento do grid. Usaremos um controle Flex, onde seu primeiro controle filho será a foto e o segundo será a barra de ferramentas.
Neste caso, em ecrãs extra pequenos (<768px – Extra Small) queremos que a barra de ferramentas fique por baixo da foto e em outros tamanhos de ecrã, queremos que a barra de ferramentas esteja ao lado da foto. Como precisamos de diferentes comportamentos em diferentes tamanhos de tela, teremos que configurar as propriedades através da classeTheme do controle Flex. O valor geral para Flex Direction será Row, mas para as telas ExtraSmall, será Column.
Também queremos que os dois itens tenham a mesma altura, quando são colocados horizontalmente ou com a mesma largura, quando são colocados verticalmente, portanto, configuraremos o controle Flex para alongar os elementos usando Align Items = Stretch.

Barra de ferramentas de elementos

Finalmente, temos que pensar na barra de ferramentas que contém as ações. Isso é semelhante ao caso anterior, pois queremos que os ícones de ação sejam organizados horizontalmente para telas ExtraSmall (quando a barra de ferramentas está abaixo da foto) e verticalmente em outros tamanhos de tela (quando a barra de ferramentas está localizada à direita da foto).
Para a barra de ferramentas, também usaremos um controle Flex e configuraremos a propriedade Flex Direction da classeTheme nas telas Row for ExtraSmall e Column em geral.

E isso é quase tudo. Um último detalhe importante é definir uma altura máxima para as fotos. Se eles não estiverem configurados, todas as fotos serão exibidas em tamanho real e não ficarão bonitas.

Conclusão

Tabelas responsivas por um tempo nos permitiram criar aplicativos responsivos. Agora, com a introdução dos controles Flex e Flex Grid, temos um acompanhamento perfeito para os casos em que as tabelas responsivas não eram suficientes ou ofereciam muitas funções.
Eu intencionalmente omiti alguns detalhes menores da implementação de exemplo para manter o foco em controles flexíveis, mas esse exemplo pode ser visto
aqui
.
https://apps5.genexus.com/Id930752bb17fb042b2ab01730ebf4ef53/photosgallery.aspx
Você também pode tentar a demonstração ao vivo ou continuar lendo sobre esses novos controles no wiki da comunidade
aqui
.
E se você quiser saber sobre a tecnologia subjacente que esse recurso permite, este artigo é essencial:
Um Guia Completo para o Flexbox