Como alinhar as coisas em CSS

Temos uma seleção completa de maneiras de alinhar as coisas em CSS hoje, e nem sempre é uma decisão óbvia qual usar. No entanto, saber o que está disponível significa que você sempre pode tentar algumas táticas se encontrar um problema de alinhamento específico.

Neste artigo, vou dar uma olhada nos diferentes métodos de alinhamento. Em vez de fornecer um guia abrangente para cada um, explicarei alguns dos pontos difíceis que as pessoas têm e indicarei referências mais completas para as propriedades e valores. Assim como em grande parte do CSS, você pode percorrer um longo caminho entendendo as coisas fundamentais sobre como os métodos se comportam e, em seguida, precisa de um lugar para procurar os detalhes mais sutis em termos de como obter o layout preciso desejado.

Alinhando texto e elementos embutidos

Quando temos algum texto e outros elementos embutidos em uma página, cada linha de conteúdo é tratada como uma caixa de linha. A propriedade text-align alinhará esse conteúdo na página, por exemplo, se você quiser que seu texto seja centralizado ou justificado. Às vezes, no entanto, você pode querer alinhar as coisas dentro dessa caixa de linha com outras coisas, por exemplo, se você tiver um ícone exibido ao lado do texto ou texto de tamanhos diferentes.

No exemplo abaixo, tenho algum texto com uma imagem embutida maior. Estou usando vertical-align: middle na imagem para alinhar o texto ao meio da imagem.

A propriedade e o alinhamento line-height da linha

Lembre-se de que a propriedade line-height alterará o tamanho da caixa de linha e, portanto, poderá alterar seu alinhamento. O exemplo a seguir usa um grande valor de altura de linha de 150px e alinhei a imagem para top . A imagem é alinhada à parte superior da caixa de linha e não à parte superior do texto, remova essa altura da linha ou torne-a menor que o tamanho da imagem e a imagem e o texto serão alinhados na parte superior do texto.

Acontece que line-height e, de fato, o tamanho do texto são bastante complicados, e não vou entrar na toca do coelho neste artigo. Se você está tentando alinhar elementos inline com precisão e quer realmente entender o que está acontecendo, eu recomendo ler “Deep Dive CSS: Font Metrics, line-height And vertical-align ”.

Quando posso usar a propriedade vertical-align ?

A propriedade vertical-align é útil se você estiver alinhando qualquer elemento embutido. Isso inclui elementos com display: inline-block . O conteúdo das células da tabela também pode ser alinhado com a propriedade vertical-align .

A propriedade vertical-align não tem efeito em itens flexíveis ou de grade e, portanto, se usada como parte de uma estratégia de fallback, deixará de ser aplicada no minuto em que o elemento pai for transformado em uma grade ou contêiner flexível. Por exemplo, na próxima caneta, tenho um conjunto de itens dispostos com display: inline-block e isso significa que consigo alinhar os itens mesmo que o navegador não tenha Flexbox:

Nesta próxima caneta, tratei o inline-block como um substituto para o layout Flex. As propriedades de alinhamento não se aplicam mais e posso adicionar align-items para alinhar os itens no Flexbox. Você pode dizer que o método Flexbox está em jogo porque a lacuna entre os itens que você obterá ao usar display: inline-block se foi.

O fato vertical-align funcionar em células de tabela é o motivo pelo qual o truque para centralizar verticalmente um item usando display: table-cell funciona.

Agora que temos maneiras melhores de alinhar caixas em CSS (como veremos na próxima seção), não precisamos empregar as propriedades vertical-align e text-align em outros lugares além dos elementos inline e text para que foram concebidos. No entanto, eles ainda são completamente válidos para usar nesses formatos de texto e inline, e lembre-se, se você estiver tentando alinhar algo inline, são essas propriedades e não as de alinhamento de caixa que você precisa alcançar.

Alinhamento da Caixa

A Especificação de Alinhamento de Caixa trata de como alinhamos todo o resto. A especificação detalha as seguintes propriedades de alinhamento:

• justify-content
• align-content
• justify-self
• align-self
• justify-items
• align-items

Você já deve pensar nessas propriedades como parte da especificação Flexbox, ou talvez Grid. A história das propriedades é que elas se originaram como parte do Flexbox, e ainda existem na especificação do Nível 1; no entanto, eles foram movidos para suas próprias especificações quando se tornou aparente que eram mais úteis em geral. Agora também os usamos no Grid Layout, e eles também são especificados para outros métodos de layout, embora o suporte atual do navegador signifique que você ainda não poderá usá-los.

Portanto, da próxima vez que alguém na Internet lhe disser que o alinhamento vertical é a parte mais difícil do CSS, você pode dizer isso (que até cabe em um tweet):

 .container { display: flex; align-items: center; justify-content: center; }

No futuro, poderemos até dispensar o display: flex , uma vez que as propriedades de alinhamento de caixa sejam implementadas para o layout de bloco. No momento, no entanto, tornar o pai da coisa que você deseja centralizar um contêiner flexível é a maneira de obter alinhamento horizontal e vertical.

Os dois tipos de alinhamento

Ao alinhar itens flexíveis e de grade, você tem duas coisas possíveis para alinhar:

1. Você tem o espaço livre na grade ou contêiner flexível (uma vez que os itens ou faixas tenham sido dispostos).
2. Você também tem o próprio item dentro da área de grade em que o colocou ou no eixo cruzado dentro do contêiner flexível.

Mostrei um conjunto de propriedades acima, e as propriedades de alinhamento podem ser consideradas como dois grupos. As que tratam da distribuição de espaço livre e as que alinham o próprio item.

Lidando com espaço livre: align-content e justify-content

As propriedades que terminam em -content são sobre distribuição de espaço, então quando você escolhe usar align-content ou justify-content você está distribuindo o espaço disponível entre grid tracks ou flex items. Eles não alteram o tamanho dos próprios itens flexíveis ou de grade; eles os movem porque mudam para onde vai o espaço livre.

Abaixo, tenho um exemplo de flex e um exemplo de grade. Ambos têm um contêiner maior do que o necessário para exibir os itens flexíveis ou faixas de grade, para que eu possa usar align-content e justify-content para distribuir esse espaço.

Movendo itens: justify-self , align-self , justify-items E align-items

Em seguida, temos align-self e justify-self aplicados a itens individuais de flex ou grid; você também pode usar align-items e justify-items no contêiner para definir todas as propriedades de uma só vez. Essas propriedades lidam com o flex real ou item de grade, ou seja, movendo o conteúdo dentro da área de grade ou linha flexível.

• Layout de grade
  Você obtém as duas propriedades, pois pode deslocar o item no bloco e no eixo embutido, pois temos uma área de grade definida na qual ele fica.
• Layout flexível
  Você só pode alinhar no eixo cruzado, pois o eixo principal é controlado apenas pela distribuição de espaço. Portanto, se seus itens são uma linha, você pode usar align-self para deslocá-los para cima e para baixo dentro da linha flexível, alinhando-os um contra o outro.

No meu exemplo abaixo, eu tenho um contêiner flex e grid e estou usando align-items e align-self no Flexbox para mover os itens para cima e para baixo uns contra os outros no eixo cruzado. Se você usa o Firefox e inspeciona o elemento usando o Firefox Flexbox Inspector, você pode ver o tamanho do contêiner flex e como os itens estão sendo movidos verticalmente dentro dele.

Na grade, posso usar todas as quatro propriedades para mover os itens dentro de sua área de grade. Mais uma vez, o Firefox DevTools Grid Inspector será útil ao jogar com alinhamento. Com as linhas de grade sobrepostas, você pode ver a área dentro da qual o conteúdo está sendo movido:

Brinque com os valores na demonstração do CodePen para ver como você pode mudar o conteúdo em cada método de layout:

Confuso Por align e justify

Um dos problemas citados com as pessoas lembrando as propriedades de alinhamento em Grid e Flexbox, é que ninguém consegue lembrar se deve alinhar ou justificar. Qual direção é qual?

Para Layout de Grade, você precisa saber se está alinhando no Bloco ou na Direção Inline. A direção do bloco é a direção dos blocos dispostos na sua página (no seu modo de escrita), ou seja, para o inglês que é vertical. A direção Inline é a direção na qual as frases são executadas (assim, para o inglês, é da esquerda para a direita horizontalmente).

Para alinhar as coisas na direção do bloco, você usará as propriedades que começam com align- . Você usa align-content para distribuir espaço entre as faixas de grade, se houver espaço livre no contêiner de grade, e align-items ou align-self para mover um item dentro da área de grade em que foi colocado.

O exemplo abaixo tem dois layouts de grade. Um tem writing-mode: horizontal-tb (que é o padrão para inglês) e o outro writing-mode: vertical-rl . Esta é a única diferença entre eles. Você pode ver que as propriedades de alinhamento que apliquei funcionam exatamente da mesma maneira no eixo do bloco em ambos os modos.

Para alinhar as coisas na direção inline, use as propriedades que começam com justify- . Use justify-content para distribuir o espaço entre as faixas de grade e justify-items ou justify-self para alinhar itens dentro de sua área de grade na direção em linha.

Mais uma vez, tenho dois exemplos de layout de grade para que você possa ver que inline está sempre inline - não importa qual modo de escrita você esteja usando.

O Flexbox é um pouco mais complicado devido ao fato de termos um eixo principal que pode ser alterado para row ou column . Então, vamos primeiro pensar sobre esse eixo principal. Ele é definido com a propriedade flex-direction . O valor inicial (ou padrão) dessa propriedade é row , que colocará os itens flexíveis como uma linha no modo de escrita atualmente em uso - é por isso que, ao trabalhar em inglês, acabamos com itens dispostos horizontalmente quando criamos um recipiente flexível. Você pode então alterar o eixo principal para flex-direction: column e os itens serão dispostos como uma coluna, o que significa que eles são dispostos na direção do bloco para esse modo de escrita.

Como podemos fazer essa troca de eixos, o fator mais importante no Flexbox é perguntar: “Qual eixo é meu eixo principal?” Uma vez que você sabe disso, então para alinhamento (quando no seu eixo principal) você simplesmente usa justify-content . Não importa se o seu eixo principal é linha ou coluna. Você controla o espaço entre os itens flexíveis com justify-content .

No eixo cruzado, você pode usar align-items que alinhará os itens dentro do contêiner flexível ou linha flexível em um contêiner flexível de várias linhas. Se você tiver um contêiner de várias linhas usando flex-wrap: wrap e tiver espaço nesse contêiner, poderá usar align-content para distribuir o espaço no eixo cruzado.

No exemplo abaixo, estamos fazendo ambos com um contêiner flex exibido como uma linha e uma coluna:

Quando justify-content ou align-content não funciona

As propriedades justify-content e align-content em Grid e Flexbox são sobre a distribuição de espaço extra . Portanto, a coisa a verificar é se você tem espaço extra.

Aqui está um exemplo Flex: Eu configurei flex-direction: row e eu tenho três itens. Eles não ocupam todo o espaço no contêiner flex, então eu tenho espaço livre no eixo principal, o valor inicial para justify-content é flex-start e, portanto, meus itens se alinham no início e no espaço extra está no final. Estou usando o Firefox Flex Inspector para destacar o espaço.

Se eu alterar flex-direction para space-between , esse espaço extra agora é distribuído entre os itens:

Se agora eu adicionar mais conteúdo aos meus itens para que eles se tornem maiores e não haja mais espaço adicional, justify-content não fará nada - simplesmente porque não há espaço para distribuir.

Uma pergunta comum que me fazem é por que justify-content não está funcionando quando flex-direction é column . Isso geralmente ocorre porque não há espaço para distribuir. Se você pegar o exemplo acima e torná-lo flex-direction: column , os itens serão exibidos como uma coluna, mas não haverá espaço adicional abaixo dos itens como há quando você faz flex-direction: row . Isso porque quando você faz um Flex Container com display: flex você tem um container flex em nível de bloco; isso ocupará todo o espaço possível na direção em linha. Em CSS, as coisas não se estendem na direção do bloco, então não há espaço extra.

Adicione uma altura ao contêiner e - contanto que seja mais do que o necessário para exibir os itens - você terá espaço extra e, portanto, justify-content funcionará em sua coluna.

Por que não existe justify-self no Flexbox?

Grid Layout implementa todas as propriedades para ambos os eixos porque sempre temos dois eixos para lidar no Grid Layout. Criamos trilhas (que podem deixar espaço adicional no contêiner de grade em qualquer dimensão) e assim podemos distribuir esse espaço com align-content ou justify-content . Também temos Grid Areas, e o elemento nessa área pode não ocupar todo o espaço da área, então podemos usar align-self ou justify-self para mover o conteúdo pela área (ou align-items , justify-items para alterar o alinhamento de todos os itens).

O Flexbox não possui faixas da mesma forma que o layout Grid. No eixo principal, tudo o que temos que jogar é a distribuição do espaço entre os itens. Não existe o conceito de uma pista na qual um item flexível é colocado. Portanto, não há uma área criada na qual mover o item. É por isso que não há propriedade justify-self nos eixos principais do Flexbox.

Às vezes, no entanto, você deseja alinhar um item ou parte do grupo de itens de uma maneira diferente. Um padrão comum seria uma barra de navegação dividida com um item separado do grupo. Nessa situação, a especificação aconselha o uso de margens automáticas.

Uma margem automática ocupará todo o espaço na direção em que é aplicada, e é por isso que podemos centralizar um bloco (como o layout da página principal) usando uma margem esquerda e direita de auto. Com uma margem automática em ambos os lados, cada margem tenta ocupar todo o espaço e, assim, empurra o bloco para o meio. Com nossa linha de itens flexíveis, podemos adicionar margin-left: auto ao item em que queremos que a divisão ocorra e, desde que haja espaço disponível no contêiner flexível, você obtém uma divisão. Isso funciona bem com o Flexbox porque assim que não há espaço disponível, os itens se comportam como os itens flex regulares.

Flexbox e microcomponentes

Uma das coisas que eu acho que muitas vezes é esquecida é como o Flexbox é útil para fazer pequenos trabalhos de layout, onde você pode pensar que usar vertical-align é o caminho a seguir. Costumo usar o Flexbox para obter um alinhamento perfeito de pequenos padrões; por exemplo, alinhando um ícone próximo ao texto, linha de base alinhando duas coisas com tamanhos de fonte diferentes ou fazendo campos de formulário e botões alinhados corretamente. Se você está lutando para conseguir que algo se alinhe bem com vertical-align , talvez tente fazer o trabalho com o Flexbox. Lembre-se de que você também pode criar um contêiner flex inline se quiser com display: inline-flex .

Não há razão para não usar Flexbox, ou mesmo Grid para pequenos trabalhos de layout. Eles não são apenas para grandes pedaços de layout. Experimente as diferentes coisas disponíveis para você e veja o que funciona melhor.

As pessoas muitas vezes estão muito interessadas em saber qual é a maneira certa ou errada de fazer as coisas. Na realidade, muitas vezes não há certo ou errado; uma pequena diferença em seu padrão pode significar a diferença entre o Flexbox funcionar melhor, caso contrário você usaria vertical-align .

Empacotando

Para encerrar, tenho um resumo rápido dos fundamentos do alinhamento. Se você se lembrar dessas poucas regras, você poderá alinhar a maioria das coisas com CSS:

1. Você está alinhando texto ou um elemento embutido? Nesse caso, você precisa usar text-align , vertical-align e line-height .
2. Você tem um item ou itens que deseja alinhar no centro da página ou do contêiner? Em caso afirmativo, torne o contêiner um contêiner flexível e defina align-items: center e justify-content: center .
3. Para Layouts de Grade, as propriedades que começam com align- funcionam na direção do Bloco; aqueles que começam com justify- trabalham na direção inline.
4. Para Flex Layouts, as propriedades que começam com align- funcionam no Cross Axis; aqueles que começam com justify- trabalham no eixo principal.
5. As propriedades justify-content e align-content distribuem espaço extra. Se você não tiver espaço extra em seu contêiner flexível ou de grade, eles não farão nada.
6. Se você acha que precisa justify-self no Flexbox, então usar uma margem automática provavelmente lhe dará o padrão que você procura.
7. Você pode usar Grid e Flexbox junto com as propriedades de alinhamento para pequenos trabalhos de layout, bem como componentes principais - experimente!

Para obter mais informações sobre alinhamento, consulte estes recursos:

• Alinhamento de caixa CSS (documentos da web MDN)
• Tudo o que você precisa saber sobre alinhamento no Flexbox
• Folha de referência de alinhamento de caixa