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:
- Como alinhar listas HTML utilizando flexbox
- Como centralizar um texto horizontalmente e verticalmente usando o Flexbox
- Criar uma lista HTML horizontal com Flexbox
Guia definitivo de flexbox da Origamid
Para visualizar os comandos que você deseja aprender basta utilizar o menu lateral.
Para testar e alterar os códigos HTML e CSS, clique em [Edit on CodePen].
Testes os códigos usando as especificações do CSS 3 para você treinar.
Se você criou algum layout usando o flexbox, deixe um comentário aqui com o link dos seus trabalhos.
Nenhum comentário:
Postar um comentário