Toolypet
Tools
Blog
Alterar idioma
Alternar tema
Ferramentas CSS
/
Flexbox Playground
Flexbox Playground
Construa layouts responsivos com CSS Flexbox usando controles visuais interativos
Visualização
Redefinir
Adicionar Item
1
2
3
Propriedades do Contêiner
Direção Flex
row
row-reverse
column
column-reverse
Flex Wrap
nowrap
wrap
wrap-reverse
Justificar Conteúdo
flex-start
flex-end
center
space-between
space-around
space-evenly
Alinhar Itens
flex-start
flex-end
center
stretch
baseline
Alinhar Conteúdo
flex-start
flex-end
center
stretch
space-between
space-around
Espaço
10px
Presets
Fileira Básica
Centralizar Tudo
Espaço Entre
Espaço Ao Redor
Espaço Uniforme
Layout de Coluna
Fileira Reversa
Coluna Reversa
Quebrar Itens
Itens
Item 1
Crescimento Flex
Encolhimento Flex
Alinhar Próprio
auto
flex-start
flex-end
center
stretch
baseline
Ordem
Item 2
Crescimento Flex
Encolhimento Flex
Alinhar Próprio
auto
flex-start
flex-end
center
stretch
baseline
Ordem
Item 3
Crescimento Flex
Encolhimento Flex
Alinhar Próprio
auto
flex-start
flex-end
center
stretch
baseline
Ordem
Código CSS
Loading...