Layout com caixa flexvel (Flexbox)

Luiz Fernando Picolo

1

Instituto Federal de Educao, Cincia e Tecnologia de Mato Grosso do Sul (IFMS) Nova Andradina MS Brasil
luizpicolo@luizpicolo.com.br

Atentar s discusses mais recentes em relao aos aspectos do CSS, a qual a abreviao para o termo em ingls Cascading Style Sheet, faz parte, ou deveria fazer, da rotina de todos os desenvolvedores web. Com as novas atualizaes, o CSS se tornou extremamente poderoso para o desenvolvimento de aplicaes web mais eficientes e com economia de tempo em sua criao e manuteno. Entretanto, adaptar as aplicaes para que as mesmas possam ser interpretadas pelos diversos agentes de usurios 1 era, e ainda , uma tarefa problemtica na medida em que vrios dispositivos de tamanhos variados surgem e, consequentemente, com diferentes resolues. Neste sentido, a World Wide Web Consortium (W3C) introduziu junto ao CSS3 a Flexible Box Layout Model (Modelo de Layout Caixas Flexveis) e com ela um novo paradigma, o de Layout de caixa flexvel ou layout flex. Em seu artigo CSS3 Flexible Box Layout Explained, Richard Shepherd expe que durante muito tempo as tabelas foram utilizadas para expor as pginas. Contudo, com o surgimento do CSS e o movimento Tableless, o HTML, que antes era usado de forma errnea, voltava seu propsito inicial, ou seja, o de ser uma linguagem exclusivamente de marcao e estruturao de contedos [SILVA, 2012]. Este novo paradigma realmente trouxe consigo benefcios. Entretanto, com o amadurecimento da web, necessitou-se de novas formas de dispor o contedo em resolues diversas. Neste sentido, Shepherd demostra que algumas solues foram implantadas para tentar sanar este problema. Uma delas a utilizao de porcentagem ao invs de valores fixos, ou seja, altura, largura, entre outros seriam proporcionais e no mais fixas. Esta uma abordagem interessante e bem utilizada at o momento, principalmente com a introduo da propriedade box-sizing: border-box a qual indica que tamanho total ser a soma do contedo com as bordas. Outra tcnica, relativamente mais nova que a anterior, a utilizao das Flexbox ou layout flexveis, as quais so o ponto chave deste texto e sero explanadas nos pargrafos posteriores. Para que o entendimento sobre layout flexveis, ou como ser tratado no decorrer deste texto, FlexBox, seja claro, primeiramente deve-se compreender os seus conceitos bsicos. As FlexBox segundo a W3C2 descrevem um modelo de caixa em CSS otimizado para o design da interface do usurio. Neste modelo de layout flexvel, os elementos filhos de um container flexvel podem ser definido em qualquer direo e, consequentemente, dobrar as suas dimenses, ou seja, crescente para preencher o espao no utilizado ou encolher para evitar transbordamento do elemento pai. Logo, ao se adaptar dois ou mais containers filhos dentro de um outro container pai, no seria
1 O termo agente de usurio empregado [] a qualquer dispositivo capaz de interpretar um documento escrito em linguagem de marcao. Leitores de tela, robs de indexao e busca, dispositivos mveis como tablets e smartphones so tambm alguns exemplos de agentes de usurio [SILVA, 2012]. 2 Em: http://www.w3.org/TR/css3-flexbox/ Acessado: 28/11/2012

necessria 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 contm. A Flexbox se soma aos quatro modos de layout bsicos definidos na CSS2.1 [] layout em bloco, layout embutido, layout de tabela e layout posicionado. O layout Flexbox destina-se criao de layouts para pginas da Web mais complexas. especialmente til para fazer a posio e o tamanho relativos dos elementos permanecerem constantes, mesmo quando os tamanhos das janelas de tela e navegador variam e mudam3. Shepherd (2011) elucida esta relao de propores, referindo-se ao calculo matemtica, feito pelo navegador, na qual toda diviso entre os containers feita de forma transparente para o usurio o qual no tem que se lembrar - ou mesmo particularmente entender - muito da matemtica. Enquanto o Projeto de Trabalho entra em detalhes sobre o clculo e distribuio de espao livre, voc pode trabalhar com a certeza de que o navegador ir cuidar disso [SHEPHERD, 2011]. Entretanto, alm dos benefcios, segundo o site Can I use4, nem todos os navegadores do suporte total as funcionalidades Flexible Box. O prprio Internet Explorer, que o navegador mais usado, somente incorporou este recurso a partir de sua verso 10. J navegadores mais modernos como o Firefox e o Chrome j suportam tal recurso. Deste modo, as FlexBox ainda no podero ser usadas em sua totalidade, pois, o desenvolvimento web alm de presar a semntica deve, prioritariamente, levar ao usurio a melhor experincia de navegao, independente do navegador a qual o mesmo esta utilizando. Conclui-se portanto que, a FlexBox um grande avano no desenvolvimento Front-End para layout. A adaptao que a mesma proporciona nos diversos agentes de usurios permite o controle com exatido, e menos esforo da parte do desenvolvedor, das direes em que os elementos sero dispostos na pgina, mantendo por conseguinte, sua posio e tamanho em ralao uns aos outros. Outro fato esta na reduo da dependncia das flutuaes, as quais so mais difceis de serem posicionadas e dimensionadas, evitando assim erros nos diversos agentes de usurios. Contudo, um ponto que no foi tratado neste texto, mas que fica aqui para futuras discusses, esta no fato da otimizao. Ao se otimizar determinada aplicao, o desenvolvedor deve proporcionar ao usurio que o software acessado funcione da melhor forma possvel tanto em navegadores desktop como tambm, relacionando-se aqui a velocidade e consumo de banda, nos mobiles. Portanto, para pginas mais complexas, deve-se refletir sobre a viabilidade de seu uso para os diversos agentes de usurios.

Referncias
Shepherd, Richard. (2011) CSS3 Flexible Box Layout Explained, http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layoutexplained, Novembro. Silva, Maurcio Samy. (2012) CSS3: desenvolva aplicaes web profissionais com uso dos poderosos recursos de estilizao das CSS3, [traduo Rafael Zanolli], So Paulo, Novatec Editora, Captulo 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