Flexbox - o santo remdio do alinhamento

Em um mundo no muito distante a grande maioria dos desenvolvedores web detestavam alinhamento no CSS pela sua dificuldade em fazer algo simples.

Os cdigos eram cheio de float, absolute, relative que deixava tudo muito frgil medida que a responsividade ia ganhando mais espao, at que alguma alma iluminada - ou almas - introduziram uma nova feature para o CSS o display: flex;.

to fcil assim mesmo?

Extremamente, ouso a dizer que voc aprendendo uma nica vez - e pondo em prtica -, conseguir criar, editar e dar manuteno em 90% dos layouts web.

Vou tentar ser o mais direto possvel aqui a fim de ajudar de maneira mais rpida os principais conceitos, mas tambm sugiro voc se aprofundar um pouco mais na documentao oficial.

Documentao oficial

O pai, o filho e o flexbox

O conceito principal que voc precisa saber no incio que o display flexbox trabalha da seguinte forma:

• Voc precisa atribuir um flex-container
• Automaticamente tudo que estiver dentro dele vai ser um flex-item

Mas que diabos flex container e flex item?

Veja o seguinte cdigo HTML.

<div class="pai">    <div class="filho>    <p> Sou um filho </p>    </di></div>

`

Existe um div que envolve tudo, ela recebeu a classe "pai" e a outra div que est dentro dela, recebeu a classe de "filho".

No momento em que voc aplicar o display: flex; via CSS na classe "pai" ela se transformar em um "Flex Container", e todo o resto - seja <div>, <h1>, <p>, TUDO - ser um flex item


.pai {
display: flex;
}


Resumindo: Todo elemento no qual voc atribuir o display: flex; se transformar em um container. Tudo que estiver dentro dele se transformar em um item.

Alinhamento do flex item dentro do container

No momento em que um elemento se transforma em um flex-item ele consegue se alinhar apenas dentro do flex-container.

Vou utilizar o cdigo HTML acima pra exemplificar, melhor:
`

<p> Sou um filho </p>

Se voc atribuir - via CSS - que a <div class="pai"> tenha um width de 120px o flex-item dele que a <div class="filho"> s conseguir se mover dentro dos 120px do pai, percebeu que maravilha?

Agora basta voc pedir a seguinte coisa para o CSS:

"Meu querido, voc poderia alinhar o flex-item ao centro"

E voc ver a mgica acontecendo!

A <div class="filho"> ficar alinhada exatamente ao centro dos 120px atribudos <div class="pai">.

E sabe qual a melhor parte disso tudo? Voc tambm consegue atribuir o display: flex; a <div class="filho"> e tudo que est dentro dela, no caso o <p> Sou um filho </p> se transformar em um flex-item e voc poder alinhar da mesma forma.

a herana do flexbox.

Como pedir ao CSS que trabalhe no flexbox?

O display: flex; possui diversas propriedades, que recomendo fortemente que voc ao menos leia sobre elas, mas nesse repositrio vou explicar as principais para se comear a usar o flebox de maneira prtica.

flex-direction: essa propriedade configura se os elementos filhos flex-item sero alinhados em forma de linha(row) ou coluna(column).

justify-content: essa propriedade utilizada para voc alinhar todos os elementos filhos em uma linha horizontal(da esquerda para a direita) dentro do flex-container.

align-items: essa propriedade utilizada para voc alinhar todos os elementos filhos em uma linha vertical(de cima para baixo) dentro do flex-container.

Essas duas propriedades recebem os mesmos parmetros de configurao, que so:
center: alinha tudo ao centro.
flex-start: alinha tudo ao nicio.
flex-item: alinha tudo ao final.

o justify-content, recebe tambm os seguintes parmetros caso voc queria:
space-between: espaa os elementos na vertical para que eles preencham todo o espao do elemento pai, sem esticar os componentes.
space-around: espaa os elementos filhos dentro do elemento pai, porm deixando uma pequena margem entre as pontas, como se voc tivesse atribudo propriedade margin aos elementos filhos.
space-evenly: espaa da mesma forma como o space-around porm criando um espaamento maior ao final.

Utilizando o HTML base que criamos, a atribuio do CSS para que o elemento filho seja alinhado ao centro ser:

`
.pai {
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 50px;
border: 1px solid black;
}
`
Os comandos de alinhamento devem ser atribudos ao elemento pai, como fiz a no exemplo. Aps isso voc ver que em apenas poucas linhas o alinhamento estar perfeitamente alinhado ao centro.

Aproveitei e tambm inseri propriedades de altura e borda para voc ver o elemento se alinhando na vertical tambm.

Por fim

Volto a comentar que esse um tutorial bem simples de como comear a usar o flexbox na prtica e aconselho que voc estude e pratique as outras propriedades dele.

Alm do mais eu preparei esse repositrio para ajudar principalmente quem est comeando a programar, uma das minhas principais motivaes a estudar sempre foi perceber o quanto a comunidade me abraou e ensinou de graa e sem questionamentos.

Um vez um amigo meu me disse:

"Aprendeu? agora ensine!"

Sei que tenho muito a aprender, s de saber que passar adiante esse conhecimento pode ajudar outra pessoa, o que me move a acordar cedo todos os dias para estudar.

Bons estudos!