Crie layouts de flexbox perfeitos

Visualize, personalize e gere código flexbox CSS com nossa interface intuitiva de arrastar e soltar.

Propriedades do contêiner

Propriedades do item

3 items

Preview

Item 1
Item 2
Item 3
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
Código CSS gerado

Predefinições populares do Flexbox

Centralize horizontalmente e verticalmente

Content

Perfeito para centralizar um logotipo, botão ou qualquer elemento horizontal e verticalmente.

Espaçamento igual

Item 1
Item 2
Item 3

Crie espaçamento igual entre os elementos com espaçamento intermediário ou ao redor.

Vertical Menu

Home
About
Contact

Crie um menu de navegação vertical com espaçamento e alinhamento consistentes.

Grade responsiva

Box 1
Box 2
Box 3
Box 4
Box 5

Crie um layout de grade responsivo que envolva itens com base no espaço disponível.

Estandarte de Herói

Título principal

Seção de heróis com call to action

Crie um banner de herói com título, subtítulo e um botão de chamada para ação.

Layout do rodapé

Company

About Us

Careers

Support

Central de Ajuda

Contate-nos

© Gerador Flexbox 2023

Crie um rodapé responsivo com colunas que se acumulam em telas menores.

Exemplos do mundo real

Barra de navegação

Logo
Home
Products
About
Contact

Um layout de barra de navegação comum com logotipo à esquerda, itens de menu no centro e um ícone de carrinho à direita.

Card Grid

Título do cartão

Texto da descrição do cartão aqui

Título do cartão

Texto da descrição do cartão aqui

Título do cartão

Texto da descrição do cartão aqui

Uma grade de cartão responsiva que se adapta a diferentes tamanhos de tela usando propriedades flexbox.

Layout do artigo

Título do artigo

Postado em 1 de janeiro de 2023 · 5 min de leitura

Conteúdo do artigo aqui. Pode ser um breve resumo ou o texto completo do artigo. O Flexbox ajuda a alinhar a imagem e o texto de maneira visualmente atraente.

Um layout de artigo comum com uma imagem à esquerda e conteúdo de texto à direita, empilhado em dispositivos móveis.

Layout do painel

Header
Sidebar
Conteúdo principal
Footer

Um layout de painel com cabeçalho, barra lateral, área de conteúdo principal e rodapé usando flexbox para alinhamento horizontal e vertical.

Fundamentos do Flexbox

O que é Flexbox?

O Layout de Caixa Flexível, comumente conhecido como Flexbox, é um modelo de layout CSS3 que fornece uma maneira eficiente de distribuir e alinhar o espaço entre os itens em um contêiner, mesmo quando seu tamanho é desconhecido ou dinâmico.

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

Conceitos-chave:O Flexbox introduz dois conceitos principais: oContêiner flexível and the itens flexíveis. O contêiner é o elemento pai e os itens são seus filhos diretos.

Eixo Principal vs Eixo Cruzado

Os layouts do Flexbox são baseados em dois eixos: omain axis and the eixo cruzado.

  • Eixo principal:O eixo principal ao longo do qual os itens flexíveis são dispostos. Definido porflex-direction.
  • Linha central transversal:O eixo perpendicular ao eixo principal. Sua direção depende da direção do eixo principal.
Eixo Principal →
← Eixo Cruzado
Start
Main
End

Propriedades do contêiner

Property Description
display Define um contêiner flexível; inline ou block, dependendo do valor fornecido.
flex-direction Estabelece o eixo principal, definindo assim a direção em que os itens flexíveis são colocados no contêiner flexível.
flex-wrap Por padrão, todos os itens flexíveis tentarão caber em uma linha. Você pode alterar isso e permitir que os itens sejam encapsulados conforme necessário com essa propriedade.
justify-content Alinha os itens flexíveis ao longo do eixo principal da linha atual do contêiner flexível.
align-items Alinha os itens flexíveis ao longo do eixo cruzado da linha atual do contêiner flexível.
align-content Alinha as linhas de um contêiner flexível quando há espaço extra no eixo cruzado.

Propriedades do item

Property Description
order Por padrão, os itens flexíveis são dispostos na ordem de origem. No entanto, oordercontrola a ordem em que eles aparecem no contêiner Flex.
flex-grow Define a capacidade de um item flexível crescer, se necessário. Ele aceita um valor sem unidade que serve como uma proporção.
flex-shrink Define a capacidade de um item flexível ser reduzido, se necessário.
flex-basis Define o tamanho inicial de um item flexível antes que qualquer espaço disponível seja distribuído de acordo com os fatores flexíveis.
align-self Permite o alinhamento padrão (ou o especificado poralign-items) a ser substituído para itens flexíveis individuais.

Related Tools

Conversor de caneta para CSS

Transforme seu código SCSS em CSS. Rápido, fácil e seguro.

Conversor SCSS para CSS

Transforme seu código SCSS em CSS. Rápido, fácil e seguro.

Conversor de Sass para CSS

Transforme seu código Sass em CSS. Rápido, fácil e seguro.

Texto para ASCII

Converta texto em código ASCII sem esforço

Pantone para CMYK

Converter cores Pantone em valores CMYK para design de impressão

Conversor de Número para Palavra

Converta valores numéricos em suas representações de palavras em vários idiomas