CSS Flexbox de um jeito simples
Desisti de ser programadora quando dei um delet sem where(brincadeira, não cheguei a tanto). Porém, vi a necessidade de aprender css, porque sempre pingava sites para desenvolver. Pra quem faz sites, eu usava muito: float left, margin auto. O tempo passou e vi que estava desenvolvendo no passado. Demorei para me adaptar, mas depois que entendi o conceito de flexbox, o desenvolvimento facilitou bastante.
O flexbox é um módulo do css que facilita a distribuição dos elementos no contêiner. Quando for usar o flexbox, pense em eixos(horizontal e vertical). Ele distribui conforme as diretrizes que você dá. Isso é muito útil para layouts responsivos.
Duas coisas que precisam ser consideradas:
Contêiner flex: Torna o contêiner flexível. o atributo usado é o display: flex.
Direção: define a direção dos “comandos” que você quer dar: horizontal ou vertical. Para isso, são usados: flex-direction: row, row-reverse, column ou column-reverse. Respectivamente: linha, linha reversa, coluna, coluna reversa.
Se você entende o que expliquei acima, todos os outros atributos ficam simples de entender. Seguem alguns exemplos:
Linha 2: O contêiner é definido como flexível.
Linha 2: A direção é definida como horizontal.
Linha: o flex-wrap define que não haverá quebra de linhas.Ou seja, mantém todos os elementos na mesma linha.
No exemplo acima, a linha 4 centraliza os itens a partir do eixo principal. Row para horizontal, column para vertical. Você também pode usar flex-start (alinha os itens ao início do contêiner), flex-end(alinha os itens ao final do contêiner), space-between(distribui o espaço restante igualmente entre os itens, com o primeiro item no início e o último no final), space-around(distribui o espaço igualmente ao redor de cada item) e space-evenly(distribui o espaço igualmente, incluindo as extremidades do contêiner).
Mais um exemplo: a linha 5 alinha os itens na horizontal(porque eu defini o flex-direction como row). Esse recurso não tinha na época do float: left. Acho que facilita bastante.
Bom, esse post foi mais pra explicar pra mim mesma. Mas espero que ajude. A documentação completa do flexbox você pode encontrar em: https://developer.mozilla.org/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox