Aprenda Flexbox em 20 minutos - Tutorial de Flexbox

📗 Garanta o seu ebook de boas práticas com HTML e CSS gratuito: https://www.horadecodar.com.br/ebook-...

★ Nossos Cursos: https://www.horadecodar.com.br/cursos...

O que é o #Flexbox?

Primeiramente gostaria de apresentar alguns conceitos teóricos sobre o Flexbox, que são muito importantes para o entendimento do todo

Flexbox é um valor da propriedade display do #CSS, ou seja, uma adição de funcionalidade a esta antiga propriedade

Como os outros valores de display, o flex vai modificar o modo como os elementos são exibidos

Além disso, sempre estaremos colocando esta propriedade no elemento pai para afetar os elementos filhos

Precisamos criar uma espécie de container para envolver outros elementos e conseguir trabalhar com o flex

E ainda há uma particularidade interessante do Flexbox, que condiciona seus elemento sempre a uma direção

Por padrão os elementos são dispostos em linha (row), mas podemos alterar para a disposição colunar (column) também

Como adicionar o flex ao CSS?

Como dito anteriormente, vamos precisamos encapsular elementos a um elemento pai

Aplicando a propriedade display com flex a este elemento

Sobre o container do Flexbox

Podemos aplicar regras de posicionamento tanto para o elemento pai, como também para os elementos filhos

Primeiramente vamos aprender como alterar a disposição a partir do elemento pai, e depois veremos as regras individuais

Como você já entendeu, o padrão de disposição é em row, mas podemos alterar para colunas

Com a propriedade flex-direction, o valor default é row e podemos colocar column

Há casos que esta formatação atende melhor nossos elementos, e é muito semelhante ao comportamento de divs sem o flex

Vamos remover agora o layout colunar e continuar a falar de outras regras do flex

Alinhamento com Flexbox

Podemos alinhar os itens na horizontal e também na vertical

Para o alinhamento horizontal utilizaremos justify-content, com esta regra temos algumas possibilidades 🔷 Telegram: https://t.me/horadecodar .
🟣 Discord Hora de Codar:   / discord