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
Смотрите видео Aprenda Flexbox em 20 minutos - Tutorial de Flexbox онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Matheus Battisti - Hora de Codar 18 Август 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 51,958 раз и оно понравилось 3.6 тысяч людям.