Siga cinco técnicas de centralização enquanto elas passam por uma série de testes para saber qual é a mais resistente à mudança.
A centralização no CSS é um desafio notório, cheio de piadas e zombarias. O CSS de 2020 está mais maduro, e agora podemos rir dessas piadas sem ficar com os dentes cerrados.
Se preferir vídeos, confira a versão desta postagem no YouTube:
O desafio
Há diferentes tipos de centralização. De diferentes casos de uso, número de coisas para centralizar etc. Para demonstrar um raciocínio por trás de uma técnica de centralização "vencedora", criei o The Resilience Ringer. É uma série de testes de estresse para cada estratégia de centralização para equilibrar e observar o desempenho. No final, revelo a técnica de maior pontuação e a mais "valiosa". Esperamos que você aprenda novas técnicas e soluções de centralização.
A campainha da resiliência
O Resilience Ringer é uma representação das minhas crenças de que uma estratégia de centralização precisa ser resiliente a layouts internacionais, janelas de visualização de tamanho variável, edições de texto e conteúdo dinâmico. Esses princípios ajudaram a moldar os seguintes testes de resiliência para que as técnicas de centralização fossem duráveis:
- Apertado:o alinhamento central precisa ser capaz de processar mudanças na largura.
- Esmagado:o alinhamento central precisa ser capaz de processar mudanças na altura.
- Duplicado:a centralização precisa ser dinâmica em relação ao número de itens.
- Edit: o alinhamento precisa ser dinâmico de acordo com o comprimento e o idioma do conteúdo
- Fluxo:a centralização precisa ser independente da direção do documento e do modo de escrita.
A solução vencedora precisa demonstrar resiliência, mantendo o conteúdo no centro enquanto é comprimido, duplicado, editado e trocado para vários modos e direções de idioma. Um centro confiável e resiliente, um centro seguro.
Legenda
Forneci algumas dicas visuais de cores para ajudar você a manter algumas metainformações no contexto:
- Uma borda rosa indica a propriedade de estilos de centralização
- A caixa cinza é o plano de fundo do contêiner que busca centralizar os itens
- Cada filho tem uma cor de plano de fundo branca para que você possa conferir os efeitos da técnica de centralização nos tamanhos de caixa filhos (se houver).
Os 5 concorrentes
Cinco técnicas de centralização entram na Liga da Resiliência, e apenas uma vai receber a coroa 👸.
1. Central de conteúdo
- Squish: ótimo!
- Squash: ótimo!
- Duplicação: ótimo!
- Editar: ótimo!
- Fluxo: ótimo!
Vai ser difícil superar a concisão de display: grid
e a
abreviação place-content
. Como centraliza e justifica crianças coletivamente,
é uma técnica sólida para grupos de elementos que precisam ser lidos.
.content-center {
display: grid;
place-content: center;
gap: 1ch;
}
- O conteúdo fica centralizado mesmo com espaço limitado e transbordando
- As edições de centralização e a manutenção estão em um só lugar
- O intervalo garante o mesmo espaçamento entre n crianças
- A grade cria linhas por padrão
- A filha mais larga (
max-content
) define a largura para todas as outras. Isso será discutido mais detalhadamente em Flexibilidade suave.
Ótimo para layouts macro que contêm parágrafos e títulos, protótipos ou geralmente itens que precisam de centralização legível.
2. Flexível suave
- Squish:ótimo!
- Squash: ótimo!
- Duplicado:ótimo.
- Edit: ótimo!
- Flow:ótimo!
O Gentle Flex é uma estratégia de centralização mais verdadeira. Ele é suave e suave, porque
diferente de place-content: center
, nenhum tamanho de caixa de crianças é alterado durante a
centralização. Com cuidado, todos os itens são empilhados, centralizados e espaçados.
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- Processa apenas o alinhamento, a direção e a distribuição
- As edições e a manutenção ficam em um só lugar
- A lacuna garante o mesmo espaçamento entre n filhos
- A maioria das linhas de código
Ótimo para layouts macro e micro.
3. Autobot
- Squish:ótimo
- Squash:ótimo
- Duplicação:multa
- Edit: ótimo
- Fluxo: ótimo
O contêiner é definido como flexível sem estilos de alinhamento, enquanto os filhos diretos
são estilizados com margens automáticas. Há algo nostálgico e maravilhoso em
margin: auto
funcionando em todos os lados do elemento.
.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}
- Truque divertido
- Rápido e sujo
- Resultados estranhos quando há estouro
- A dependência da distribuição em vez do intervalo significa que os layouts podem ocorrer com filhos tocando nas laterais
- Ser "empurrado" para a posição não parece ideal e pode resultar em uma mudança no tamanho da caixa da criança.
Ótimo para centralizar ícones ou pseudoelementos.
4. Centro fofo
- Apertar:ruim
- Squash:ruim
- Duplicação:ruim
- Edit: ótimo!
- Flow:ótimo! (desde que você use propriedades lógicas)
O participante "fluffy center" é, de longe, o concorrente com o som mais agradável e é a única técnica de centralização que é totalmente de propriedade do elemento/filho. Você viu nossa borda rosa interna individual?
.fluffy-center {
padding: 10ch;
}
- Protege o conteúdo
- Atômico
- Cada teste contém secretamente essa estratégia de centralização
- O espaço entre as palavras é um espaço
- Ilusão de não ser útil
- Há um conflito entre o contêiner e os itens, naturalmente, já que cada um deles está sendo muito firme em relação ao tamanho.
Ideal para centralização centrada em palavras ou frases, tags, formatos em pílulas, botões, ícones e muito mais.
5. Pop e plop
- Squish: ok
- Squash:ok
- Duplicado:inválido
- Edit: fine
- Fluxo:bom
Isso "aparece" porque o posicionamento absoluto mostra o elemento fora do fluxo normal. A parte "plop" dos nomes vem de quando acho mais útil: colocando-o em cima de outras coisas. É uma técnica clássica e prática de centralização de sobreposições que é flexível e dinâmica em relação ao tamanho do conteúdo. Às vezes, você só precisa colocar a interface em cima de outra.
- Útil
- Confiável
- Quando você precisa, é inestimável
- Código com valores de porcentagem negativos
- Requer
position: relative
para forçar um bloco de contenção - Quebras de linha antecipadas e estranhas
- Pode haver apenas um por bloco contendo sem esforço adicional
Ótimo para modais, notificações e mensagens, pilhas e efeitos de profundidade, popovers.
O vencedor
Se eu estivesse em uma ilha e só pudesse ter uma técnica de centralização, seria…
[batida de tambor]
Flexibilidade suave 🎉
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
Ele sempre está nas minhas folhas de estilo porque é útil para layouts macro e micro. É uma solução confiável com resultados que correspondem às minhas expectativas. Além disso, como sou uma viciada em tamanhos intrínsecos, costumo me formar nessa solução. É verdade que há muito a ser digitado, mas os benefícios que ele oferece compensam o código extra.
MVP
Fluffy Center (link em inglês)
.fluffy-center {
padding: 2ch;
}
O Fluffy Center é tão micro que é fácil ignorar como uma técnica de centralização, mas é um item básico das minhas estratégias. Ele é tão atômico que às vezes me esqueço de que estou usando.
Conclusão
O que quebra suas estratégias de centralização? Quais outros desafios poderiam ser adicionados ao toque de resistência? Pensei em tradução e um interruptor de altura automática no contêiner… o que mais?
Agora que você sabe como eu fiz, como você faria? Vamos diversificar nossas abordagens e aprender todas as maneiras de criar na Web. Siga o codelab com esta postagem para criar seu próprio exemplo de centralização, assim como os desta postagem. Envie um tweet para mim com sua versão, e eu a adicionarei à seção Remixes da comunidade abaixo.
Remixes da comunidade
- Truques de CSS com uma postagem de blog