segunda-feira, 6 de janeiro de 2020

Flexbox

O desafio atual no mundo da construção das interfaces, Web principalmente, é a questão do posicionamento dos elementos em tempos de responsividade das interfaces, o que comumente chamamos de layout. Foi se o tempo em que sabiamos quem era o dispositivo consumidor, nossa preocuação era se a resolução da máquina cliente suportava a largura que definiamos como padrão para as as interfaces. Atualmente não conhecemos o dispositivo, a resolução, a orientação da interface, portanto, criar interfaces se tornou uma tarefa mais complexa.

Alguns modelos e frameworks foram disponibilizados para ajudar e o Bootstrap foi um que colou no mundo Genexus. Recentemente também recebemos mais um modelo de layout, o FlexBox (Flexible Box Module), enterrando de vez interfaces tradicionais criadas com
. Neste cenário temos dois elementos fundamentais para construir o layout
e CSS.


Bootstrap utiliza o conceito das 12 colunas para posicionar os elementos e em Genexus o editor 'abstract' possui uma área Responsive Sizes que permite definir para quatro tamanhos de dispositivo a organização das colunas. O conceito objetiva definir o total de 1/12 colunas que serão utilizados para comportar a largura máxima do elemento que se deseja alocar no layout da linha. Sendo assim se um elemento possui 6 colunas, podemos dizer que ele ocupará 50% da largura disponivel no dispositivo. Se 4 colunas, o mesmo dividirá a linha com mais elementos que ocuparão dois terços da tela, 4/12=1/3 (restando 2/3 para outros elementos). Tirando a lentidão do editor abstrato, definir interfaces responsivas com Bootstrap é relativamente simples.

Flexbox é um cenário mais livre, no qual temos os eixos principal (main-axis) e transversal (cross-axis), e os elementos que são inseridos na linha sem a preocupação de reservar aos mesmos um espaço que nem sempre saberemos se será ocupado ou não. flex-wrap fará com que ocorra a quebra da linha quando não houver mais espaço disponivel,  flex-direction definirá se o conteúdo percorrerá o sentido horizontal ou vertical. Os demais elementos vao permitir o alinhamento e justificação dos conteúdos, a largura dos elementos e se os mesmos terão a capacidade de crescer ou reduzir.

São dois cenários completamente diferentes de se planejar o layout, Bootstrap foca no conceito de reserva do espaço para um eventual conteúdo. Flexbox trabalha com o conceito de incluir conteúdo até quando a largura do dispositivo suportar. Em ambos os cenários, a incerteza de não nos apegarmos à confortável dimensão fixa em pixels dos elementos e prateleira de células que compunha as <table>.

Bootstrap já foi amplamente publicado aqui no Genexandoo, que tal limparmos a poeira do blog com artigos sobre flexbox? Vamos fazer isso.


Nenhum comentário: