Três dicas para seu flexbox funcionar corretamente

Saiba como utilizar umas das melhores propriedades do CSS para alinhar seus elementos com perfeição

No css, uma das propriedades para realizar o alinhamento de componentes de forma responsiva é a flexbox. Assim, se você tem conhecimentos básicos sobre flexbox, mas ele não está funcionando por algum motivo, esse artigo é para você! Agora, se você é totalmente iniciante em flexbox, sugiro que leia este guia.

Dica: se você desejar estilizar no próprio código enquanto lê este artigo, pode acessar o codepen no final desta página.

Abaixo falarei sobre os três principais motivos que fazem com que o flexbox não esteja funcionando corretamente no seu CSS, vamos lá?

1. Flexbox deve sempre ser aplicado ao elemento mãe do que você pretende alinhar

A primeira coisa e que mais esquecemos quando estamos iniciando é que devemos aplicar o flexbox na tag container dos elemento que queremos alinhar.

Por exemplo, se temos uma lista não ordenada (ul) e queremos centralizar os itens (li) dentro dela, devemos aplicar a flexbox na ul, pois do contrário a flexbox não irá funcionar. Caso esses elementos não estejam dentro de outra tag, basta criarmos uma div e inserir os elementos lá dentro, para estilizar essa div com a flexbox e alinhar os elementos contidos nessa div.

Código no HTML:

¬
<ul class=”container-elementos”>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

2. É necessário utilizar display: flex em conjunto com o tipo de alinhamento desejado

Agora que sabemos em qual classe da tag HTML devemos aplicar a flexbox, é necessário especificar duas coisas no css: o tipo de display e qual o tipo de alinhamento. Por padrão, o tipo de display sempre será flex e serve para sinalizamos que estamos utilizando flexbox.

Ex: display: flex;

Para o tipo de alinhamento, usa-se a propriedade com o valor para o alinhamento desejado.

Ex: justify-content: center;

Tanto a propriedade: justify-content, como o valor: center, podem ser modificadas. Há diversos tipos de alinhamentos, porém aqui nesse post não entrarei nos detalhes para cada um deles.

Então, o css deve ficar assim:

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

Os tipos de alinhamentos são: justify-content, align-items, align-content, flex-wrap, flex-flow e flex-direction.

Vale lembrar que cada alinhamento aceita um conjunto de valores (center, flex-start, flex-end) que não serão abordados no momento. Entretanto, se você desejar se aprofundar mais no assunto, pode clicar aqui.

3. Fique atento ao usar flex-direction!

Vamos supor que você tem três elementos um ao lado do outro e deseja colocá-los na vertical.

Elementos um ao lado do outro com display:flex.

Para isso, você utilizaria flex-direction: column; pois mudaria a orientação que antes era em uma linha, para uma coluna. Eles ficariam assim:

Elementos alinhados com flex-direction: column.

Agora vamos supor que você também deseja centralizar horizontalmente esses elementos na página. Para isso, bastaria utilizar justify-content: center, correto? Em teoria sim, uma vez que isso faz com que os elementos fiquem centralizados no meio da página.

Porém, como invertemos anteriormente a direção dos elementos com flex-direction, também é necessário inverter a direção do alinhamento, pois flex-direction inverte os eixos x e y no css. Parece bem confuso explicando assim, mas na verdade é bem simples: é só pensar que se você deseja alinhar na vertical, basta utilizar o comando que alinha na horizontal e vice-e -versa.

Então, nesse caso, ao invés de utilizar justify-content: center, iremos utilizar align-items: center. O código ficará assim:

.nome-da-classe{
display: flex;
flex-direction: column;
align-items: center;
}

E o resultado final ficará assim:

Elementos centralizados horizontalmente.

Assim, sabendo desses três detalhes podemos tornar o uso de flexbox muito mais fácil e descomplicado.

Se quiser praticar, basta acessar o codepen abaixo.

Espero ter ajudado um pouco com essas dicas e bons estudos!