Justificar conteúdo versus alinhar itens no Flexbox

Eu escrevi a declaração display: flex mais vezes do que posso contar, e ainda ocasionalmente esqueço se é justify-content ou align-items isso controla o eixo vertical em uma linha. Isso não é ignorância; é a realidade honesta de um modelo de layout cujo comportamento muda dependendo flex-direction. Quando a direção é row, justify-content funciona horizontalmente. Mudar para column e a mesma propriedade agora funciona verticalmente Qualquer um que afirma que nunca abre as ferramentas de desenvolvimento do navegador para empurrar esses valores até que as caixas caiam onde eles querem está deitado ou tem uma memória muito melhor do que a minha.

o Gerador Flexbox é a ferramenta que EU gostaria de ter quando estava a aprender este modelo, e aquela que ainda procuro quando quero prototipar uma disposição sem tocar numa folha de estilo Você define as propriedades do recipiente, uma linha de caixas de amostras reflui em tempo real, e o CSS exacto que produz o que vê fica numa caixa pronta para copiar por baixo Ele vira o & quot; Lembre - se qual a propriedade que faz o quê & quot; no & quot; clique até parecer certo, depois leia a resposta."

tl;dr: Flexbox é um modelo de layout unidimensional O contêiner o conduz através de seis propriedades: flex-direction, flex-wrap, justify-content, align-items, align-content, e gap. Este gerador expõe todos eles, mostra uma visualização ao vivo e emite CSS limpo Como a visualização é renderizada com as mesmas declarações que ela gera, o que você vê é exatamente o que você cola. Ele é executado inteiramente no seu navegador sem inscrição.

Que problema resolve um gerador flexbox?

O Flexbox é poderoso precisamente porque é relativo Você descreve a intenção (& quot; espalhe estes itens com igual espaço entre eles, o & quot; o & quot; centre isto em ambos os eixos") e o navegador calcula os pixels Mas os sistemas relativos são difíceis de segurar na sua cabeça, porque o efeito de cada propriedade depende do estado dos outros. align-content não faz nada até que os itens se embrulhem O eixo principal e o eixo cruzado trocam quando você muda de direção. space-between e space-around pareça semelhante até compará-los lado a lado.

A maneira mais rápida de construir intuição para um sistema relativo é manipulá-lo e assistir Um gerador colapsa o loop editar-salvar-atualizar em uma única interação: altere um dropdown, veja as caixas se moverem Depois de dez minutos com uma visualização ao vivo, a propriedade que controla o eixo cruzado deixa de ser um fato que você memoriza e se torna algo que você sente E quando você termina de explorar, você não fica com uma nota mental para transcrever; o CSS de trabalho já está escrito para você.

Quais propriedades o contêiner controla?

Flexbox divide a responsabilidade entre o contêiner e seus itens O contêiner decide o arranjo geral, e é aí que o gerador se concentra porque é onde a maioria das decisões de layout vivem Aqui está o que cada propriedade do contêiner faz.

Propriedade	O que controla	Valores comuns
flex-direction	O eixo principal e sua direção	row, column, row-reverse, column-reverse
flex-wrap	Se os itens transbordam para novas linhas	nowrap, wrap, wrap-reverse
justify-content	Espaçamento ao longo do eixo principal	flex-start, center, space-between, space-evenly
align-items	Posicionamento no eixo transversal	stretch, center, flex-start, baseline
align-content	Espaçamento das linhas enroladas no eixo transversal	stretch, center, space-between
gap	Espaço entre itens	qualquer comprimento, por exemplo 16px

O modelo mental que faz este bastão é a ideia de dois eixos da especificação Os itens fluem ao longo do eixo principal, que flex-direction conjuntos. O eixo transversal é sempre perpendicular a ele. justify-content distribui o espaço no eixo principal; align-items posições no eixo transversal. Uma vez flex-direction é column, o eixo principal é vertical, então justify-content agora empilha itens de cima para baixo e align-items posiciona-os da esquerda para a direita Nada sobre as propriedades mudou; os eixos giraram por baixo deles.

Como centralizo um div com flexbox?

Esta é a única pergunta flexbox mais pesquisada, e a resposta é três linhas Defina o contêiner para display: flex, então justify-content: center e align-items: center. Isso centraliza a criança no eixo principal e no eixo transversal de uma só vez, o que para uma linha padrão significa ponto morto horizontal e verticalmente.

No gerador, você escolhe center para ambos os controles de alinhamento e as caixas de amostra saltar para o meio da área de visualização A caixa de saída, em seguida, mostra:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

A razão pela qual vale a pena construir esta receita clicando em vez de memorizar é que no momento em que sua necessidade muda ligeiramente, por exemplo, você deseja que o item seja fixado na parte superior, mas centrado horizontalmente, você altera um menu suspenso e vê o resultado, em vez de adivinhar qual dos as duas propriedades a serem editadas.

Quando o conteúdo alinhado é importante?

align-content a propriedade que as pessoas definem e então se perguntam por que nada acontece A resposta está na especificação: ela só afeta o layout quando há várias linhas de itens flexíveis Com flex-wrap: nowrap, cada item fica em uma única linha, então não há conjunto de linhas para distribuir e a propriedade é inerte.

O gerador codifica esta regra para que você não possa ser enganado por ela Quando o wrap estiver desligado, o align-content o controle é desativado e a propriedade é omitida do CSS gerado inteiramente, Vire o wrapping on e ele se torna ativo, e você pode vê-lo empurrar as linhas de itens embrulhados juntos ou espalhá-los no eixo transversal Emitir a propriedade somente quando ele faz algo mantém a saída honesta: cada declaração na regra copiada é aquela que tem um efeito visível em seu layout.

Qual é a diferença entre os valores de justify-content?

o justify-content as palavras-chave são onde uma prévia ao vivo ganha seu sustento, porque as diferenças são espaciais e difíceis de descrever em prosa. flex-start embala itens no início do eixo principal. center embala-os no meio. space-between empurra o primeiro e o último itens para as bordas e distribui o espaço restante igualmente entre os outros, de modo que não há espaço nas bordas externas. space-around dá a cada item uma quantidade igual de espaço em ambos os lados, o que significa que a lacuna entre dois itens é o dobro da lacuna nas bordas. space-evenly torna cada lacuna igual, incluindo as bordas.

Ler esse parágrafo não ensina quase nada Clicar nos cinco valores com cinco caixas na tela ensina em segundos, e você nunca vai confundir space-between por space-around novamente, uma vez que você viu o comportamento das bordas lado a lado Esse é o argumento para construir o layout por manipulação e não por memorização, e é o mesmo argumento por trás de manter um conjunto de ferramentas visuais CSS próximas: o gerador gradiente e o gerador caixa-sombra existem pela mesma razão, porque gradientes e sombras também são mais fáceis de discar a olho nu do que escrever às cegas O caso mais amplo para montar esse tipo de kit de ferramentas está nesta peça no Kit de ferramentas para desenvolvedores web.

Flexbox ou CSS Grid?

Esta questão surge constantemente, e o enquadramento de que é uma competição é o erro Flexbox é unidimensional: ele coloca itens ao longo de um único eixo, envolvendo quando dito para, e ele se destaca em linhas de coisas cujo tamanho você quer que o navegador negocie Barras de ferramentas, barras de navegação, grupos de botões e linhas de cartão são trabalhos flexbox naturais CSS Grid é bidimensional: ele controla linhas e colunas juntas, e ele se destaca na estrutura de nível de página, onde você quer faixas explícitas.

Em projetos reais eles nidificam constantemente Uma grade define as regiões da página, e um contêiner flexível organiza os itens dentro de uma dessas regiões Aprender flexbox completamente não torna a grade redundante e vice-versa; ele torna você fluente na ferramenta que se encaixa em cada trabalho Um gerador é uma maneira rápida de alcançar essa fluência para o caso unidimensional, e uma vez que as propriedades do contêiner são de segunda natureza, ler e escrever layouts flexíveis manualmente pára de precisar de uma referência.

Como uso o Gerador Flexbox?

O fluxo reflete como você pensa sobre um layout.

1. Escolher flex-direction e se os itens devem ser embrulhados. Isso define os eixos e o comportamento do estouro, as duas decisões das quais todo o resto depende.
2. Definir alinhamento. Ajustar justify-content no eixo principal e align-items no eixo transversal até que a visualização corresponda ao arranjo em sua cabeça.
3. Afinar espaçamento. Defina o gap entre os itens com o controle deslizante e quando o invólucro estiver ligado, defina align-content para espaçar as linhas.
4. Copiar o CSS. a regra gerada tem como alvo a .container aula e atualizações ao vivo Copie-o com um clique e cole-o em sua folha de estilo.

Você também pode adicionar ou remover itens de visualização para testar como um layout se comporta sob diferentes conteúdos. A space-between navbar parece bem com três itens e muito diferente com sete que envolvem, e ser capaz de alterar a contagem enquanto assiste é como você pega isso antes de chegar à produção.

A lacuna substitui as margens de espaçamento?

Principalmente, sim, e é uma melhoria real Antes gap era apoiado em recipientes flexíveis, espaçar itens significava adicionar margens a cada criança e depois lutar contra a margem extra na primeira ou na última, geralmente com a :last-child substituição ou uma margem negativa no pai. gap define o espaço entre os itens diretamente, aplica-se também entre linhas embrulhadas e não adiciona nada nas bordas externas, de modo que toda a classe de bugs nas margens das bordas desaparece.

O gerador trata gap como um controle de primeira classe com um controle deslizante de pixel, e omite a declaração quando o intervalo é zero para que a saída permaneça mínima Para o trabalho de produção, gap em contêineres flexíveis é bem suportado em todos os navegadores atuais, por isso raramente há uma razão para voltar para a abordagem de margem Se você estiver convertendo um valor de espaçamento entre unidades enquanto trabalha, o Conversor de unidade CSS lida com o px até rem aritmética sem calculadora.

Quais são os limites do CSS gerado?

O gerador produz a regra do recipiente Não define propriedades por item como flex-grow, flex-shrink, ou flex-basis, que controlam como itens individuais se expandem e contraem para preencher espaço Essas são decisões em nível de item que dependem do seu conteúdo específico e, para a maioria dos layouts, das propriedades do contêiner plus flex: 1 nos itens que devem crescer é tudo o que você precisa Quando você precisa de controle fino por item, a regra do contêiner gerado ainda é a base correta para construir.

A saída usa propriedades padrão e sem prefixo Os prefixos de fornecedor para flexbox eram necessários para navegadores que estão anos fora de suporte, então uma folha de estilo moderna não deve carregá-los, e adicioná-los hoje é ruído O CSS gerado está pronto para produção como escrito, que é o ponto: você sai com uma regra que você pode colar, não um esboço inicial que você tem que terminar Para o conjunto mais amplo de pequenos utilitários que fazem o trabalho front-end mais rápido, este resumo de Ferramentas de produtividade do desenvolve é um bom companheiro, assim como o guia gerador gradiente se o CSS visual é a parte que você deseja acelerar.

Quais layouts comuns posso construir com ele?

Um punhado de receitas cobrem a maioria do trabalho flexbox do dia-a-dia, e cada um é alguns cliques no gerador Uma barra de navegação com um logotipo à esquerda e links à direita é justify-content: space-between por align-items: center em uma linha. Um herói perfeitamente centrado, o clássico & quot; centralize uma caixa na página, & quot; é justify-content: center e align-items: center. Uma pilha vertical de campos de formulário é flex-direction: column com um gap para espaçamento consistente, que é mais limpo do que as margens em cada campo Uma linha responsiva de cartas que envolve novas linhas em telas estreitas é uma linha com flex-wrap: wrap e um gap, então flex: 1 nas próprias cartas para que cresçam para preencher a linha.

O valor de construí-los no gerador, em vez de copiá-los da memória, é que você vê os casos de borda imediatamente. A space-between navbar com apenas um item fixa esse item no início, o que pode parecer um bug até que você entenda isso space-between não tem nada para distribuir com um único item Uma linha de cartão de embrulho se comporta de maneira diferente em dois cartões versus seis, e a visualização & #39; s contagem de itens ajustável permite verificar ambos antes de enviar Construir o layout por manipulação significa que os casos surpreendentes surgem enquanto você ainda está na ferramenta, não depois que um usuário os relata.

Uma vez que uma receita está em seus dedos, você para de precisar do gerador para ele e escreve as cinco linhas diretamente Esse é o estado final saudável A ferramenta é um professor tanto quanto um produtor: cada layout que você constrói clicando é um que você entende um pouco melhor na próxima vez que você escrevê-lo à mão, que é exatamente como um bom utilitário visual deve tornar-se gradualmente desnecessário para o básico, mantendo-se à mão para os casos complicados.

FAQ

O que é um gerador flexbox CSS?

Um gerador flexbox CSS é uma ferramenta visual que permite definir propriedades flex container e copiar o CSS resultante. Você ajusta justify-content, alinha-itens, direção, wrap e gap, vê uma visualização ao vivo e cola a regra gerada em sua folha de estilo.

Como centralizo um div com flexbox?

Defina o contêiner para exibir: flex, depois justifique-conteúdo: centralize e alinhe-itens: centre. Que centraliza os itens em ambos os eixos principal e transversal Nesta ferramenta, escolha o centro para ambos os controles de alinhamento e copie o CSS.

Qual é a diferença entre justify-content e align-items?

justify-content distribui itens ao longo do eixo principal, que é horizontal para uma linha e vertical para uma coluna. alinhar-itens posiciona itens no eixo transversal, perpendicular ao eixo principal Alterando swaps flex-direction que eixo cada um controla.

Quando o conteúdo alinhado tem efeito?

o conteúdo de alinhamento afeta apenas o layout quando os itens se envolvem em mais de uma linha, porque espaça essas linhas no eixo transversal. Com o flex-wrap definido para nowrap há uma única linha, então a propriedade não faz nada e esta ferramenta o omite da saída.

O que a propriedade gap faz no flexbox?

gap define um espaço consistente entre itens flexíveis sem adicionar margens a cada item. Aplica-se entre itens na mesma linha e entre linhas embrulhadas e evita os problemas de margem de borda que o espaçamento baseado em margem cria.

Qual é a diferença entre flex e inline-flex?

display: flex faz do contêiner uma caixa no nível do bloco que ocupa toda a largura disponível. exibir: inline-flex o torna uma caixa no nível em linha que fica no fluxo de texto e é tão larga quanto seu conteúdo, enquanto ambos estabelecem seus filhos com as mesmas regras flexíveis.

O flexbox substitui o CSS Grid?

No. Flexbox é um modelo unidimensional para colocar itens ao longo de um único eixo, ideal para barras de ferramentas, navegação e linhas de cartões A grade CSS é bidimensional para linhas e colunas juntas Elas são complementares e frequentemente usadas no mesmo layout.

O CSS gerado é seguro para uso na produção?

Sim. Flexbox é suportado em todos os navegadores modernos e a ferramenta emite propriedades CSS padrão e sem prefixo Todo o processamento acontece no seu navegador, então nada é carregado e a ferramenta funciona offline uma vez carregada.