CSS Flexbox de um jeito simples

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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *