PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

11/06/2019

Um guia definitivo de flexbox (CSS3)

http://www.visualdicas.com.br/transfer/Screenshot_4.jpg

O que é flexbox

Flexbox ou flex-box: “O layout de caixa flexível CSS, comumente conhecido como Flexbox, é um modelo de layout da Web CSS3. Está no estágio de recomendação do W3C. O layout flexível permite que elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela”. Wikipedia (inglês)

Portanto, o conceito de CSS Flexible Box Layout Model , ou simplesmente flexbox, faz parte da especificação do CSS3 para estruturar e organizar os elementos em uma página web, possibilitando que o layout seja visualizado em diversos aparelhos com diversos tamanhos de tela (layout responsivo).

Usando Flexbox

Se você está aprendendo CSS com certeza irá se deparar com o sistema de containers flexbox. Para isto, vamos apresentar neste artigo um guia completo para você aprender e/ou utilizar este guia como referência para os seus projetos com CSS.

Veja abaixo alguns exemplos de utilização com flexbox:

Guia definitivo de flexbox da Origamid

Acesse o link: https://origamid.com/projetos/flexbox-guia-completo/

http://www.visualdicas.com.br/transfer/Screenshot_5.jpg

Para visualizar os comandos que você deseja aprender basta utilizar o menu lateral.

http://www.visualdicas.com.br/transfer/Screenshot_6.jpg

Para testar e alterar os códigos HTML e CSS, clique em [Edit on CodePen].

http://www.visualdicas.com.br/transfer/Screenshot_7.jpg

Testes os códigos usando as especificações do CSS 3 para você treinar.

http://www.visualdicas.com.br/transfer/Screenshot_8.jpg

Se você criou algum layout usando o flexbox, deixe um comentário aqui com o link dos seus trabalhos.

byALF

0 comentários:

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Fique mais.... Leia os nossos artigos!!!

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Web Analytics