Guia rápido de flexbox e grid (interativo) com Tailwind | We.Inc
Todas as propriedades de flexbox e CSS grid em um contêiner ao vivo que você pode alterar, um construtor de grid-template-areas, um guia para decidir entre flex e grid e as classes Tailwind.
Guia rápido de flexbox e grid
O flexbox organiza os itens em uma só direção, uma linha ou uma coluna, e é ideal para barras de ferramentas, menus de navegação e centralização. O grid posiciona os itens em linhas e colunas ao mesmo tempo e serve para layouts de página e galerias de cards. Defina display: flex ou display: grid no elemento pai e use as propriedades abaixo; cada uma delas atualiza um contêiner ao vivo aqui.
Flexbox ou grid?
Layout
Escolha
Centralizar uma coisa dentro de uma caixa
Qualquer um: grid com place-items: center é o mais curto
Uma linha de botões ou links de navegação
Flexbox
Itens de largura desconhecida que devem quebrar linha
Flexbox com flex-wrap
Cards em colunas iguais
Grid com repeat(auto-fill, minmax())
Cabeçalho, barra lateral, conteúdo principal, rodapé
Grid com grid-template-areas
Alinhar itens entre linhas e colunas
Grid
Dois contêineres ao vivo, um flex e um grid, com um controle para cada propriedade do contêiner e para um item escolhido. Cada alteração mostra o CSS e a classe Tailwind. Logo abaixo, pinte um layout de página no construtor de grid-template-areas e copie o resultado. As tabelas de referência saem bem na impressão.
Use os controles de flexbox para mudar o contêiner e depois escolha um item para testar grow, shrink, basis, order e align-self.
Faça o mesmo no playground de grid, incluindo spans que estendem um item por várias colunas ou linhas.
No construtor de áreas, escolha um nome de área e clique nas células para pintá-las. O CSS do contêiner e de cada área aparece abaixo.
Clique em Imprimir para ter as tabelas de propriedades no papel ou em PDF.
Comece usando gap para o espaçamento entre itens em vez de margens. Ele só adiciona espaço entre os itens, nunca nas bordas externas.
flex: 1 em todos os itens cria colunas de largura igual que ainda respondem ao conteúdo; grid com colunas 1fr ignora a largura do conteúdo.
Use order e o posicionamento do grid só para ajustes visuais. Quem usa teclado e leitor de tela segue a ordem do código, então a ordem do HTML ainda precisa fazer sentido.
minmax(0, 1fr) em vez de 1fr impede que uma palavra longa ou uma imagem larga estoure uma coluna do grid além da sua parte.
Perguntas frequentes
Qual é a diferença entre justify-content e align-items?
justify-content atua ao longo do eixo principal, que em uma linha flex vai da esquerda para a direita. align-items atua no eixo transversal, de cima para baixo em uma linha. Mude flex-direction para column e os dois trocam de direção física, e é por isso que às vezes a centralização parece usar a propriedade errada.
Por que justify-content não faz nada?
Ele só tem efeito quando sobra espaço no eixo principal. Se um item tem flex-grow: 1 ou os itens preenchem a linha, não sobra nada para distribuir. No grid, justify-content move o conjunto inteiro de trilhas, enquanto justify-items alinha os itens dentro das suas próprias células.
Como funcionam as grid-template-areas?
Você desenha o layout como strings, uma por linha, com um nome para cada célula, como "header header" "side main". Cada filho então reivindica um nome com grid-area: header. As áreas precisam formar retângulos, e um ponto marca uma célula vazia.
Posso usar flexbox dentro de grid?
Sim, e é comum. O grid posiciona as grandes regiões ou os cards, e o flexbox organiza o conteúdo dentro de cada um, como um ícone ao lado de um rótulo ou um rodapé fixado na parte de baixo de um card.
O gap funciona no flexbox?
Sim. Todos os principais navegadores atuais suportam gap em contêineres flex, além do grid, então o velho truque de margens negativas no contêiner não é mais necessário.
Os dois eixos
Todo contêiner flex tem um eixo principal definido por flex-direction e um eixo transversal perpendicular a ele. As propriedades que começam com justify atuam no eixo principal e as que começam com align atuam no eixo transversal. Depois que isso fica claro, a maioria dos quebra-cabeças de flexbox vira uma questão de qual eixo você quer dizer.
O grid tem um par fixo de eixos: inline (geralmente horizontal) e block (geralmente vertical). justify-* alinha ao longo do eixo inline e align-* ao longo do eixo block, tanto para o grid inteiro quanto para os itens dentro das células.
Como os itens flex decidem o seu tamanho
Cada item começa no seu flex-basis, ou no tamanho do conteúdo quando basis é auto. Se sobrar espaço na linha, o espaço livre é dividido na proporção de flex-grow. Se a linha estiver cheia demais, os itens encolhem na proporção de flex-shrink multiplicado pelo seu basis.
O atalho flex: 1 significa grow 1, shrink 1, basis 0%, então todos os itens terminam com a mesma largura, seja qual for o conteúdo. flex: auto mantém o tamanho do conteúdo como ponto de partida, então rótulos mais longos ganham caixas mais largas.
Grids responsivos sem media queries
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) encaixa quantas colunas de pelo menos 220 pixels o contêiner permitir e as estica para preencher a linha. Os cards se reorganizam de uma coluna no celular para quatro ou cinco em uma tela larga, sem breakpoints.
auto-fit se comporta da mesma forma até haver menos itens do que colunas: auto-fill mantém as colunas vazias, enquanto auto-fit as recolhe para que os itens existentes se estiquem pela linha.