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