Minha Conta
Recuperar Senha

Digite seu endereço de e-mail que foi cadastrado e enviaremos seus dados de acesso.

Minha Conta

A senha deve conter no mínimo 6 caracteres.

Ao se cadastrar, você concorda com a Política de Privacidade e Segurança

Mudar Data: Photoshop CS6 Módulo I
Preço
15/09 a 26/09 Manhã 4000,00
15/09 a 26/09 Manhã 4000,00
15/09 a 26/09 Manhã 4000,00
15/09 a 26/09 Manhã 4000,00
  Itens Preço
Carrinho de Compras
O carrinho está vazio.
INVESTIMENTO TOTAL:0,00

Esqueci minha senha

Foi enviado um e-mail para com os dados de acesso.

Conheça o Flexbox do CSS3 e suas funcionalidades

O CSS Flexible Box Layout Module Level 1, também conhecido como Flexbox, é uma recomendação de padrão em andamento no W3C - World Wide Web Consortium, a comunidade internacional que cuida dos processos de desenvolvimento de padrões abertos para a web.

Caso você tenha se perguntado alguma vez de onde vem a padronização para HTML, CSS, XML, DOM e cia., esta é a resposta sobre quem define o formato das ferramentas que você traz em seu arsenal de desenvolvedor/designer web.

A ideia principal por trás do Flexbox é fornecer um container com a habilidade de alterar a altura e a largura (e até mesmo a ordem) dos itens dentro dele, de maneira que ele preencha da melhor maneira possível o espaço disponível ou encolha para evitar sobreposição. Muitas vezes isso é necessário para poder se ajustar a diferentes dispositivos ou telas de diferentes tamanhos.

Devo me preocupar com a compatibilidade?

Apesar de ainda ser uma recomendação, o Flexbox já é amplamente suportado. Confira no Can I Use, um site que fornece tabelas de compatibilidade atualizadas para várias tecnologias front-end da web. Leve sempre em consideração a utilização de prefixos de fornecedor como -webkit e -moz quando estiver em dúvida; testar ainda é a melhor garantia.

Como todo bom web designer, você vai preparar sua folha de estilos com "fallbacks" ou media queries, para que a exibição da página continue elegante mesmo quando o browser do visitante não tiver suporte ao flexbox (ou se esse for incompleto).

A alternativa do design responsivo

E já que tocamos no assunto de media queries, que é um dos pilares do Design Responsivo para Web, vamos relembrar a principal razão de sua existência. O Design Responsivo para Web — vamos chamar de DRW daqui para frente — é um conjunto de conceitos que aplicamos em nossas produções web com a intenção de promover a melhor experiência possível aos visitantes, independente do dispositivo que estejam usando.

O DRW tem três pilares: grids fluídos, imagens flexíveis e media queries.

  • As media queries permitem que você carregue folhas de estilos condicionalmente de acordo com o dispositivo usado para acessar o site. 
  • O uso de imagens flexíveis se refere ao uso de técnicas que evitem a degradação da qualidade das imagens enquanto elas acompanham o redimensionamento e os ajustes do layout da sua página. 
  • E finalmente, grids fluídos trata do conceito de dispor o seu conteúdo em grades e colunas. A propriedade grid do CSS geralmente é usada em layouts maiores, enquanto o Flexbox é melhor para componentes de uma aplicação ou um pequeno layout. Independente da sua escolha, é importante conhecer o que o Flexbox tem a oferecer, na busca de projetos que sejam impressionantes em várias telas diferentes.

Elementos básicos do Flexbox

Antes de colocar a mão na massa, vamos dar nome aos bois. Conheça um pouco do vocabulário do Flexbox:

Container flex

É o elemento pai que vai conter os itens flex. Você pode definir um container flex definindo o valor da propriedade 'display' como 'flex' ou 'inline-flex'.

Item flex

Cada filho de um container flex se torna um item flex. Se um texto for incluído diretamente no container ele será encapsulado em um item flex anônimo.

Eixos

  • O layout de todas as caixas flex segue dois eixos. Os itens flex seguirão ao longo do eixo horizontal (main axis). O eixo vertical (cross axis) é perpendicular ao eixo horizontal.
  • A propriedade 'flex-direction' estabelece o eixo horizontal (main axis).
  • A propriedade 'justify-content' define como os itens flex serão dispostos no eixo horizontal da linha onde estiverem.
  • A propriedade 'align-items' define qual será a maneira padrão de disposição dos itens flex ao longo do eixo vertical na linha atual.
  • A propriedade 'align-self' define individualmente como cada um dos itens flex vai se alinhar em relação ao eixo vertical, podendo sobrepor o que foi definido por padrão em 'align-items'.

Direções

  • Os lados início/fim (main start/main end) marcam o começo e o fim do fluxo de itens flex. O início vertical e o fim vertical (cross start/cross end) marcam o topo e a base. Eles seguem o eixo horizontal (main axis) e o eixo vertical (cross axis) do container flex seguindo o vetor estabelecido pelo 'writing-mode' (left-to-right, right-to-left, etc.).
  • A propriedade 'order' atribui elementos a grupos ordenados e determina qual elemento aparece primeiro.
  • A propriedade 'flex-flow' afeta simultaneamente as propriedades 'flex-direction' e 'flex-wrap' na distribuição dos itens flex.

Linhas

  • Itens flex podem ser distribuídos tanto numa única linha quanto em várias, de acordo com a propriedade 'flex-wrap', que controla a direção do eixo vertical e a direção em que novas linhas são empilhadas.

Dimensões

  • Os equivalentes de 'height' e 'width' nos itens flex são tamanho (main size) e tamanho vertical (cross size), seguindo respectivamente os eixos horizontal (main axis) e vertical (cross axis) do container flex.
  • As propriedades 'min-height' e 'min-width' têm um novo valor, 'auto', que estabelece o tamanho mínimo de um item flex.
  • A propriedade 'flex' agrupa as propriedades 'flex-basis', 'flex-grow', e 'flex-shrink' para estabelecer a flexibilidade do item flex.

E então, pronto para usar o Flexbox? Ainda tem dúvidas? Deixe um comentário e participe da conversa!

 
[fbcomments url="" width="100%" count="off" num="3" countmsg="wonderful comments!"]

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Artigos Relacionados