Solucionado
Peguei o flex-box, tive um pouco de dificuldade e fui fazendo projetos sozinho, é normal sentir um pou de dificuldade ? E se alguém quiser falar um pouco de como funciona essa propriedade, eu aceito. Apesar de parecer ter entendido, ainda sinto uma puga atrás na orelha, mas talvez isso se resolva com prática.
Claro que sim, como qualquer coisa que seja inicial para nossa mente, terá muitas barreiras, por mais que eu tenha um excelente conhecimento sobre coisas técnicas, existem coisas novas que foram incrivelmente chatas de entender no inicio, como:
Ou seja, se preocupe em repetir aquilo todos os dias possíveis, pode demorar até dias, mas saiba que tudo começa com um html e css mal feito.
A propriedade display: flex define o elemento pai como um contêiner flexível. Isso permite que você use outras propriedades do flexbox para controlar a forma como os elementos são distribuídos dentro do contêiner.
Por exemplo:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>.container {
display: flex;
}A propriedade flex-direction controla a direção em que os itens são posicionados dentro do contêiner. Os valores possíveis são row (padrão), column, row-reverse e column-reverse.
Por exemplo:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>.container {
display: flex;
flex-direction: column;
}A propriedade justify-content controla o alinhamento horizontal dos itens dentro do contêiner. Os valores possíveis são flex-start (padrão), flex-end, center, space-between, space-around e space-evenly.
Por exemplo:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>.container {
display: flex;
justify-content: center;
}A propriedade align-items controla o alinhamento vertical dos itens dentro do contêiner. Os valores possíveis são stretch (padrão), flex-start, flex-end, center e baseline.
Por exemplo:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>.container {
display: flex;
align-items: center;
}A propriedade flex-grow controla a capacidade de um item crescer dentro do contêiner. O valor padrão é 0, o que significa que o item não crescerá. Se você definir o valor para 1, o item crescerá proporcionalmente aos outros itens.
Por exemplo:
<div class="container">
<div class="item grow">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>.container {
display: flex;
}
.grow {
flex-grow: 1;
}Claro que eu simpliquei bastante os poderes do flexbox, você pode ir muito mais além, mas acredito que isso seja um básico para sua motivação. Pode acompanhar um artigo melhor feito pela Juliana Amoasei: