Layout com caixa flexível (Flexbox

)
Luiz Fernando Picolo¹
1

Instituto Federal de Educação, Ciência e Tecnologia de Mato Grosso do Sul (IFMS) Nova Andradina – MS – Brasil
luizpicolo@luizpicolo.com.br

Atentar às discussões mais recentes em relação aos aspectos do CSS, a qual é a abreviação para o termo em inglês Cascading Style Sheet, faz parte, ou deveria fazer, da rotina de todos os desenvolvedores web. Com as novas atualizações, o CSS se tornou extremamente poderoso para o desenvolvimento de aplicações web mais eficientes e com economia de tempo em sua criação e manutenção. Entretanto, adaptar as aplicações para que as mesmas possam ser interpretadas pelos diversos agentes de usuários 1 era, e ainda é, uma tarefa problemática na medida em que vários dispositivos de tamanhos variados surgem e, consequentemente, com diferentes resoluções. Neste sentido, a World Wide Web Consortium (W3C) introduziu junto ao CSS3 a Flexible Box Layout Model (Modelo de Layout Caixas Flexíveis) e com ela um novo paradigma, o de Layout de caixa flexível ou layout flex. Em seu artigo CSS3 Flexible Box Layout Explained, Richard Shepherd expõe que durante muito tempo as tabelas foram utilizadas para expor as páginas. Contudo, com o surgimento do CSS e o movimento Tableless, o HTML, que antes era usado de forma errônea, voltava à seu propósito inicial, ou seja, o de ser “uma linguagem exclusivamente de marcação e estruturação de conteúdos” [SILVA, 2012]. Este novo paradigma realmente trouxe consigo benefícios. Entretanto, com o amadurecimento da web, necessitou-se de novas formas de dispor o conteúdo em resoluções diversas. Neste sentido, Shepherd demostra que algumas soluções foram implantadas para tentar sanar este problema. Uma delas é a utilização de porcentagem ao invés de valores fixos, ou seja, altura, largura, entre outros seriam proporcionais e não mais fixas. Esta é uma abordagem interessante e bem utilizada até o momento, principalmente com a introdução da propriedade box-sizing: border-box a qual indica que tamanho total será a soma do conteúdo com as bordas. Outra técnica, relativamente mais nova que a anterior, é a utilização das Flexbox ou layout flexíveis, as quais são o ponto chave deste texto e serão explanadas nos parágrafos posteriores. Para que o entendimento sobre layout flexíveis, ou como será tratado no decorrer deste texto, FlexBox, seja claro, primeiramente deve-se compreender os seus conceitos básicos. As FlexBox segundo a W3C2 descrevem um modelo de caixa em CSS otimizado para o design da interface do usuário. Neste modelo de layout flexível, os elementos filhos de um container flexível podem ser definido em qualquer direção e, consequentemente, “dobrar” as suas dimensões, ou seja, crescente para preencher o espaço não utilizado ou encolher para evitar transbordamento do elemento pai. Logo, ao se adaptar dois ou mais containers filhos dentro de um outro container pai, não seria
1 O termo agente de usuário é empregado […] a qualquer dispositivo capaz de interpretar um documento escrito em linguagem de marcação. Leitores de tela, robôs de indexação e busca, dispositivos móveis como tablets e smartphones são também alguns exemplos de agentes de usuário [SILVA, 2012]. 2 Em: http://www.w3.org/TR/css3-flexbox/ Acessado: 28/11/2012

necessária especificar largura em pixel e nem percentual para os mesmos, a qual tiraria a flexibilidade, mas os mesmos se adaptariam conforme a largura do container que os contém. A “Flexbox se soma aos quatro modos de layout básicos definidos na CSS2.1 […] layout em bloco, layout embutido, layout de tabela e layout posicionado. O layout Flexbox destina-se à criação de layouts para páginas da Web mais complexas. É especialmente útil para fazer a posição e o tamanho relativos dos elementos permanecerem constantes, mesmo quando os tamanhos das janelas de tela e navegador variam e mudam”3. Shepherd (2011) elucida esta relação de proporções, referindo-se ao calculo matemática, é feito pelo navegador, na qual toda divisão entre os containers é feita de forma transparente para o usuário o qual “não tem que se lembrar - ou mesmo particularmente entender - muito da matemática. Enquanto o Projeto de Trabalho entra em detalhes sobre o cálculo e distribuição de espaço livre, você pode trabalhar com a certeza de que o navegador irá cuidar disso” [SHEPHERD, 2011]. Entretanto, além dos benefícios, segundo o site Can I use4, nem todos os navegadores dão suporte total as funcionalidades Flexible Box. O próprio Internet Explorer, que é o navegador mais usado, somente incorporou este recurso a partir de sua versão 10. Já navegadores mais modernos como o Firefox e o Chrome já suportam tal recurso. Deste modo, as FlexBox ainda não poderão ser usadas em sua totalidade, pois, o desenvolvimento web além de presar a semântica deve, prioritariamente, levar ao usuário a melhor experiência de navegação, independente do navegador a qual o mesmo esta utilizando. Conclui-se portanto que, a FlexBox é um grande avanço no desenvolvimento Front-End para layout. A adaptação que a mesma proporciona nos diversos agentes de usuários permite o controle com exatidão, e menos esforço da parte do desenvolvedor, das direções em que os elementos serão dispostos na página, mantendo por conseguinte, sua posição e tamanho em ralação uns aos outros. Outro fato esta na redução da dependência das flutuações, as quais são mais difíceis de serem posicionadas e dimensionadas, evitando assim erros nos diversos agentes de usuários. Contudo, um ponto que não foi tratado neste texto, mas que fica aqui para futuras discussões, esta no fato da otimização. Ao se otimizar determinada aplicação, o desenvolvedor deve proporcionar ao usuário que o software acessado funcione da melhor forma possível tanto em navegadores desktop como também, relacionando-se aqui a velocidade e consumo de banda, nos mobiles. Portanto, para páginas mais complexas, deve-se refletir sobre a viabilidade de seu uso para os diversos agentes de usuários.

Referências
Shepherd, Richard. (2011) “CSS3 Flexible Box Layout Explained”, http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layoutexplained, Novembro. Silva, Maurício Samy. (2012) “CSS3: desenvolva aplicações web profissionais com uso dos poderosos recursos de estilização das CSS3”, [tradução Rafael Zanolli], São Paulo, Novatec Editora, Capítulo 1.

3 Em: http://msdn.microsoft.com/pt-br/library/ie/hh673531%28v=vs.85%29.aspx Acessado: 04/12/2012 4 Em: http://caniuse.com/#search=flexbox Acessado: 28/11/2012

Sign up to vote on this title
UsefulNot useful