{"id":5493,"date":"2015-03-21T10:00:25","date_gmt":"2015-03-21T13:00:25","guid":{"rendered":"http:\/\/blogimpacta.com.br\/?p=5493"},"modified":"2015-03-21T10:00:25","modified_gmt":"2015-03-21T13:00:25","slug":"conheca-o-flexbox-do-css3-e-suas-funcionalidades","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/conheca-o-flexbox-do-css3-e-suas-funcionalidades\/","title":{"rendered":"Conhe\u00e7a o Flexbox do CSS3 e suas funcionalidades"},"content":{"rendered":"

O CSS Flexible Box Layout Module Level 1<\/em><\/strong>, tamb\u00e9m conhecido como Flexbox<\/strong>, \u00e9 uma recomenda\u00e7\u00e3o de padr\u00e3o em andamento no W3C – World Wide Web Consortium<\/span><\/a>, a comunidade internacional que cuida dos processos de desenvolvimento de padr\u00f5es abertos para a web. <\/span><\/p>\n

Caso voc\u00ea tenha se perguntado alguma vez de onde vem a padroniza\u00e7\u00e3o para HTML<\/a>, CSS<\/a>, XML, DOM<\/strong> e cia., esta \u00e9 a resposta sobre quem define o formato das ferramentas\u00a0que voc\u00ea traz em seu arsenal de desenvolvedor\/designer web.<\/span><\/p>\n

A ideia principal por tr\u00e1s do Flexbox \u00e9 fornecer um container com a habilidade de alterar a altura e a largura (e at\u00e9 mesmo a ordem) dos itens dentro dele, de maneira que ele preencha da melhor maneira poss\u00edvel o espa\u00e7o dispon\u00edvel\u00a0ou encolha para evitar sobreposi\u00e7\u00e3o. Muitas vezes isso \u00e9 necess\u00e1rio para poder se ajustar a diferentes dispositivos ou telas de diferentes tamanhos.<\/span><\/p>\n

Devo me preocupar com a compatibilidade?<\/strong><\/span><\/h3>\n

Apesar de ainda ser uma recomenda\u00e7\u00e3o, o Flexbox j\u00e1 \u00e9 amplamente suportado. Confira no Can I Use<\/span><\/a>, um site que fornece tabelas de compatibilidade atualizadas para v\u00e1rias tecnologias front-end da web. Leve sempre em considera\u00e7\u00e3o a utiliza\u00e7\u00e3o de prefixos de fornecedor como -webkit e -moz quando estiver em d\u00favida; testar ainda \u00e9 a melhor garantia.<\/span><\/p>\n

Como todo bom web designer, voc\u00ea vai preparar sua folha de estilos com “fallbacks” ou media queries, para que a exibi\u00e7\u00e3o da p\u00e1gina continue elegante mesmo quando o browser do visitante n\u00e3o tiver suporte ao flexbox (ou se esse for incompleto).<\/span><\/p>\n

A alternativa do design responsivo<\/strong><\/span><\/h2>\n

E j\u00e1 que tocamos no assunto de media queries, que \u00e9 um dos pilares do Design Responsivo <\/a>para Web<\/strong>, vamos relembrar a principal raz\u00e3o de sua exist\u00eancia. O Design Responsivo para Web \u2014 vamos chamar de DRW daqui para frente \u2014 \u00e9 um conjunto de conceitos que aplicamos em nossas produ\u00e7\u00f5es web com a inten\u00e7\u00e3o de promover a melhor experi\u00eancia poss\u00edvel aos visitantes, independente do dispositivo que estejam usando.<\/span><\/p>\n

O DRW tem tr\u00eas pilares: grids flu\u00eddos, imagens flex\u00edveis e media queries<\/strong>. <\/span><\/p>\n