Alinhamento nos eixos Flexbox - @CursoemVideo HTML5 CSS3

vamos dar continuidade aos estudos do 27º Capítulo do nosso material de apoio vendo mais algumas propriedades dessa vez propriedades de alinhamento nos dois eixos tudo feito utilizando a nova tecnologia de [Aplausos] flexbox Olá tudo bem com você seja muito bem-vindo muito bem-vinda a mais uma aula aqui do seu curso de HTML e CSS nós estamos falando aqui no capítulo de flexbox e é muito importante que mais uma vez eu deixe muito bem claro que tem muita gente fal Ah não você se repete muito não cara olha só tem gente que decide falar assim ah não

ah eu eu já dei uma estudada em flexbox eu quero saber só por exemplo justify content e align items e aí perdeu um monte de explicação que teve antes para você entender essas duas propriedades que a gente vai ver agora o justify content e o align items você tem que saber o que que é um Flex container quais são as propriedades desse Flex container de acordo com a direção você tem que saber classificar Qual é o eixo principal o Main access e também classificar o que que é o cross ais né O que é o

eixo transversal pra gente poder entender o que que é justificar o conteúdo e alinhar os itens dentro de flexbox Então isso é uma caminhada esse capítulo aqui já é a quarta aula e se essa já é a quarta aula você deduz que você perdeu três aulas E caso não tenha visto é muito importante que você veja esse curso também tá todo sendo desenvolvido o utilizando versionamento utilizando Git E github então se por acaso você não viu o capítulo que fala sobre versionamento dentro do nosso curso também tá perdendo porque a gente vai utilizar aqui durante

a aula mas se você é uma pessoa que tá seguindo tudo bonitinho tá seguindo a sequência da forma perfeita que a gente planejou vamos para mais uma aula começando com algumas teorias em relação a flexbox vem comigo Olá Dá licença deixa eu interromper a sua aula só um minutinho eu dar um recado da recod que também é patrocinador do nosso curso ela oferece para você uma série de cursos também gratuitos que vão potencializar sua carreira pro futuro e por falar em futuro eu vou falar de uma trilha muito importante de aproximadamente 40 horas que a

recod oferece para você ela se chama justamente tecnologias pro futuro e como o próprio nome Sugere ela vai te apresentar uma série de tecnologias que você pode usar hoje para te ajudar a resolver problemas e idealizar novos projetos Ela conta com cursos como por exemplo de Inteligência Artificial internet das coisas biotecnologia realidade virtual realidade aumentada e muito mais então não perca tempo acessa agora mesmo recode.org.br ou então vai pelo QR Code que tá aparecendo na sua tela e lá no menu de cima do site da recode clica em cursos você vai ver essa e muitas

outras oportunidades para você obrigado recode pelo Patrocínio e você meu querido você minha querida vamos voltar pra aula então Ó esse vídeo ainda fala sobre a anatomia do Flex container né que é o pai né que quem vai conter todos os itens os itens vão estar dentro desse Flex container o contêiner o pai vai ditar Qual é o comportamento dos itens dos filhos e essas duas propriedades que a gente vai ver agora que eu já citei o justify content e o align items eles são configuráveis dentro do contêiner também E como sempre como exemplo nós

vamos utilizar esse contêiner que tá aparecendo aí que tem a propriedade flex flow né que você viu anteriormente também nos vídeos anteriores em Row no wrap isso é ele vai ficar em forma de linha linha do trem deitado já te ensinei esse macete e no wrap significa que mesmo eu diminuindo o tamanho desse contêiner ele não vai ter quebra desses itens internos eles não vão passar outra dimensão dentro do eixo transversal se por acaso a qualquer momento não não eu não entendi nada do que você falou aí ficou confuso é porque você não viu os

vídeos anteriores Então vai pra Playlist completa e assiste com muita calma com muita paciência e treina mais do que tudo treinar é o mais importante nós vimos também se eu não me engano na aula log na aula imediatamente anterior nós vimos que quando uma um um contêiner ele é flexfold Row e no wraap né só por ser Row não Row reverse nós temos os nossos dois eixos nós temos o eixo principal e nós temos o eixo transversal que é são o Main Axis e o cross Axis e o que nós vamos aprender nesse vídeo é

como alinhar esses itens nos dois eixos tanto no eixo principal quanto no eixo transversal e vamos começar com o alinhamento principal utilizando uma propriedade que o eu já citei algumas vezes aqui que é o justify content anota aí no seu caderno justify content ele vai fazer o alinhamento em relação ao Main aess ao eixo principal ah magua na bara é então o justify content ele faz o conteúdo ele alinha o conteúdo deitado não nem sempre se o seu Main ais for em pé né Por exemplo se você utilizar um Flow né se você utilizar um

flex flow do tipo colum ele vai alinhar verticalmente então é importante que você saiba identificar o eixos A aula imediatamente anterior ela faz isso você identificar Quais são os eixos então não deixa de assistir as aulas na sequência eu vou parar de falar esse negócio aqui e o Main ais ele tem dois pontos bem importantes o Main start que é exatamente o início do eixo principal e o Main end que é o final do eixo principal isso é importante porque quando você vai escrever justify content no CSS você tem que dizer qual é o tipo

de justify content que você vai utilizar e em boa parte o valor que você vai colocar vai depender desse Main start e desse Main end o primeiro valor que eu vou colocar aqui que a gente geralmente usa no justify content é o valor Flex start como Acabou de aparecer aí o que que significa utilizar justify content com Flex start significa que ele vai pegar o Main start Flex start está relacionado ao Main start então o Main start tá exatamente aí onde eu tô marcando com essa linha amarela o primeiro item vai ficar grudado exatamente no

Main start E caso exista um espaço livre né como você tá vendo aí do lado direito vou marcar de amarelo esse essa parte amarela que eu vou marcar aí é espaço livre o espaço livre vai ficar sempre no final sempre vai ficar perto do Main end e esse final não necessariamente é do lado direito isso fica bem claro o espaço em branco quando eu boto justify content Flex start o espaço em branco vai ficar no final do eixo principal sempre Ah mas se Oix principal for de baixo para cima de cima para baixo da esquerda

para direita da direita pra esquerda a gente já aprendeu isso então anota aí justify content Flex start o primeiro item vai ficar grudado no Main start vai ficar no início e o espaço em branco todos os outros vão ficar grudadinhos nele e o espaço em branco vai ser e jogado lá pro final do eixo principal sempre pro final do eixo principal não anota no seu caderno coisas do tipo em cima embaixo direita esquerda porque não faz sentido Esse é um grande problema que as pessoas TM quando vão estudar o módulo de flexbox é porque não

consegue classificar os eixos segundo valor que a gente vai ver em vez de Flex start é o Flex end então se eu colocar justify content Flex end a característica é exatamente essa considerando esse sentido de Main aess que tá aparecendo aí o último item vai ser grudado no Main end né o item vai vai est sempre colado no final né já que é Flex end e o espaço em branco vai ficar todo condensado lá no meu Main start então ele vai grudar ali no Main end e o espaço em branco vai ficar e junto lá

do Main start beleza estando ele na esquerda na direita em cima ou embaixo dependendo do Flow que você definir aí Pro box um outro justify contents muito importante é o Center Obviamente você tem o Main start o Main end o que que ele vai fazer ele vai calcular exatamente o centro do contêiner tá aí ó tá sendo representado sendo Riscado exatamente agora ele vai colocar todos os itens juntos nesse Center tá eles vão ficar alinhados um ao lado do outro nesse ou um em cima do outro um abaixo do outro dependendo do Flow ele vai

ficar Centralizado vai ficar no meio do Main ais e os espaços em branco vão ser distribuídos de forma igual no Main start do lado esquerdo e no Main end do lado direito nesse caso que eu tô fazendo aí mas pode ser que seja em cima e embaixo enfim vai depender do Flow um outro valor cara agora vem os alinhamentos de espaçamento que muita gente se confunde e acha que é a mesma coisa mas não é a mesma coisa só Descobre isso na hora de colocar no projeto na prática o primeiro que a gente vai ver

é o Space between justify contents Space between anota isso aí no seu caderno também o Space between vai fazer a coisa muito interessante ele vai colocar o primeiro item no Main start e o último item no Main end todos os outros itens vão estar no meio com o espaçamento entre eles igual Então olha só ele pegou o primeiro elemento botou no Main start pegou o último elemento botou no mend exatamente colado nos do nos dois extremos do eixo principal tá depende do sentido do eixo principal os outros vão ser distribuídos por igual Olha só o

espaço em branco como ele tá distribuído por igual Beleza então sempre que você utilizar o Space between o primeiro e o último elemento vão estar grudados exatamente grudados nas pontas aí do seu container todos os outros vão estar distribuídos por igual existem outros justified contents de espaçamento que são no lugar de Space between você colocar Space evenly que que é o Space evenly o Space evenly ele não vai grudar o primeiro e o último elemento nas extremidades do contêiner o que ele vai fazer é o seguinte ele vai colocar os elementos dispostos dentro do contêiner

de forma que antes e depois dos itens nós tenhamos espaçamentos iguais então dá uma olhada lá ó Entre todos os itens inclusive antes e depois antes do primeiro e depois do último tá ele vai criar exatamente o mesmo espacinho e esse espacinho vai ser exatamente o mesmo também calculado que vai ficar entre os elementos então todos esses espacinhos amarelos que você tá vendo vendo aí eles tmm exatamente o mesmo espaço entre eles incluindo antes do primeiro e depois do último a imagem tá bem explicativa aí E o último que a gente vai ver agora desse

espacejamento aí entre itens é o Space around que que é o Space around Space around ele vai fazer uma conta diferente tá aí o contêiner Branco aí Quantos elementos o meu flexbox vai ter Ah eu tenho três elementos três itens N é isso então ele vai pegar o contêiner o espaço útil do contêiner vai dividir esses espaços em trê três vezes em três espaços em três pedaços iguais e vai centralizar os itens dentro desses espaços Beleza então dá uma olhada aí o que que tá acontecendo antes e depois você percebe que ele tem um espaço

antes do primeiro elemento e um espaço no final do último elemento então ele não fica grudado né como o o Space Bet porém entre os elementos existem dois espaços um que é o final do anterior e o outro que é o início do posterior dá uma olhada aí graficamente você consegue perceber e se nesse momento você tá fal pô Guanabara eu dou uma olhada aí Space between Space around Space evenly é tudo igual não é tudo igual eu vou botar os três aí na tela para você conseguir ver então esse último aí é o Space

around mas eu vou colocar todos os outros dois n vou colocar o Space between o Space eveling e o Space around falei evenly errado mas enfim deixa quieto aí dá uma olhada na posição dos itens dá uma olhada na posição dos elementos e você vai ver que existe sim diferença entre eles eles não estão calculados exatamente da mesma maneira e isso vai fazer diferença na hora de você construir um site Pode ser que o Space EV e se adapte melhor numa situação o Space bituin se adapte melhor em outra E aí a tua experiência é

que vai ditar anota isso daí ó esse esse gráfico aí que tá aí tá no nosso PDF mas faz a sua anotação aí no caderno porque esse desenho ele é muito importante para que você possa entender e como eu falei anteriormente o justify content ele alinha Sempre Em Forma do Main aess esse exemplo que tá aparecendo aí ele é Main aess tá aparecendo dessa maneira porque nós colocamos o Direction n a direção como Row porém se você colocar como colum por exemplo esse daqui ó vou botar um flex flow do tipo column no wrap então

o Direction dele é colum então o eixo principal ele é de cima para baixo Então vou botar lá o meu Main Axis é de cima para baixo tá representado ali logo se eu colocar Flex start se o Main x está de cima para baixo o Main start está em cima e o Main end está emb baixo não mais na esquerda e direita respectivamente então o que que vai acontecer o espaço em branco vai ficar em baixo então volto a dizer não adianta dizer que quando eu uso o Flex start o justify content Flex start o

espaço em branco fica na direita não tem direita nesse caso aqui já ficou embaixo se fosse colum Reverse O espaço em branco ia ficar em cima certo então cuidado com isso aí assiste as aulas iniciais de flexbox porque a gente tá repetindo muito para que você possa fixar na caixola se eu utilizar Flex end o espaço em branco vai ficar em cima porque os itens vão ficar alinhados ao Main end como a gente viu anteriormente se você colocar Center ele vai calcular espaços iguais em cima e embaixo no caso do Main ais aí para Direction

column e vai colocar os dois se for Space between ele vai colar o primeiro em cima colar o último embaixo nesse caso que o eixo é de cima para baixo e vai calcular espaços no meio se você utilizar o spacing evenly ele vai fazer a mesma coisa né vai criar espaçamentos iguais entre eles Esse é o mais simétrico de todos vamos dizer assim e o Space around vai criar três áreas vai dividir esse essa coluna em três áreas e vai centralizar os elementos dentro dele beleza vamos pro computador agora pro nosso projeto pra gente ver

como funciona o justify content na Prática eu sei eu sei que todo mundo que tem um canal no YouTube vive enchendo o saco para se inscrever no canal para curtir o vídeo para manda comentário pois saiba que isso é muito importante e eu vou ser mais uma dessas pessoas cara se você acredita no projeto do curso em vídeo e essas aulas estão te ajudando muito ajuda a gente deixando um like compartilhando nas suas redes sociais deixando um comentário de incentivo nesse vídeo isso ajuda muito a gente num fator chamado engajamento que o YouTube Tem e

quanto mais engajamento a gente tem maior é a abrangência do vídeo mais ele é oferecido pra comunidade então ó por favor ajuda a gente não custa nada não leva tempo nenhum e você De quer ajuda a gente PR Caramba então ó pro exercício dessa aula já estou com o meu github desktop aberto se você não sabe usar veja lá os vídeos que a gente ensina a utilizar Ah vou abrir o visual Studio code e vou abrir o Explorer deixa eu abrir o Explorer aqui embaixo eu vou abrir a pasta de exercícios vou no Exercício 27

vou pegar o Flex 001 aquele basicão copiar e colar cont control ctrl v e vou renomear ele para Flex 004 a gente poder fazer os exercícios dessa aula tá uma vez que eu tenha feito isso vou pegar esse daqui ó já Ten o Flex 004 vou fechar o index da aula anterior e vou abrir o índex da aula 004 pra gente trabalhar Então beleza vamos abrir também o index que a gente acabou de criar copiando né no Google Chrome vou dar uma arrumada aqui na tela para ficar bonitinho e vou tirar esse Flex alo aqui

do item tá do elemento para poder ficar desse jeito aqui então você tá vendo aqui ó que ele já está alinhado à esquerda Isso significa que o seu contêiner o display Flex além do display Flex e do flex flow estar como Row no Wap né você vai ver que não vai mudar nada ele também está com o justify content no seu valor padrão o seu valor padrão é Flex start que é esse lado aqui tá que tá do lado esquerdo no caso aqui porque ele está como Row se fosse Row reverse ó ele automaticamente já

colocou aqui ó do lado direito e botou o espaço todo do lado esquerdo esse espaço é o laranja e use elementos os itens estão em azul tá então vai fazer toda a diferença também então ok já está lá agora o que eu vou fazer é o seguinte vou testar os outros valores Flex start no caso Row no Wap esquerdao se eu botar Flex end ele vai ficar no meu Main end o meu Main end é exatamente aqui onde eu tô botando o mouse aqui no finalzinho Então vou atualizar ó e ele colocou aqui no final

você vai falar ah é a mesma coisa que botar Row reverse aqui não faz os testes aí na sua casa que você vai ver que não vai ficar a b CD FG aqui né velho ele vai ficar invertido né não é a mesma coisa se eu colocar em vez de Flex start Flex send posso usar Center no Center ó ele centralizou ele colocou o mesmo espaço na esquerda o mesmo espaço na direita né No No início e no fim do meu Main aess que nem sempre a esquerda e direita pelo amor de Deus eu tô

cansando de ficar falando isso várias vezes também posso colocar o o Space ó tá vendo quando eu boto Space ele vai me dar between around ou evenly vamos ver o biten primeiro o bituin como eu falei ele cola o primeiro no início do eixo o último no Fin final do eixo e fica calculando o espaço entre eles automaticamente se eu colocar no lugar de Space between Space evenly ó viu o que ele fez ele esse espaço é exatamente igual a esse espaço que é exatamente igual a esse espaço que é exatamente igual a esse espaço

e assim sucessivamente ele não colou o último ele não colou o primeiro no início nem o último no final ele calculou os passos automaticamente se eu aumentar e diminuir ó ele vai aumentando e diminuindo os espaços não os elementos E se eu colocar o Space around você vai ver que vai ficar ligeiramente diferente ó lá ó você viu ah vou botar aqui ó Space evenly pra galera que diz que é a mesma coisa ó você vai ver que vai mudar posicionamento ó lá mudou o posicionamento Então não é a mesma coisa então isso faz diferença

Space around vai mudar de novo ó atualizei faz diferença Então esse espaço aqui é metade desse espaço aqui porque ele dividiu aqui ó aquele quadradinho aqui Imaginário e centralizou o item lá dentro Beleza então com isso eu consegui ver todos os valores de justify content que é o espa no eixo principal que no meu caso aqui está deitado da esquerda pra direita porque eu usei palavrinha Row aqui Belê mas não para por aí não porque além do alinhamento no eixo principal eu também tenho o alinhamento no eixo transversal no Cross access Vem comigo que também

tem slide para isso daí então ó de volta aqui com o nosso contêiner deitado em forma de Row né Nós vamos utilizar o align items no lugar de justify items no justify items eu acabei de expc é sempre no eixo principal no align items é sempre no sentido do Cross Axis do eixo transversal então no nosso caso se a gente tá utilizando o Row o nosso Cross Axis é de cima para baixo você viu isso na aula anterior onde a gente classificou os eixos Então o que nós vamos fazer é que quando temos o cross

ais você também viu na aula anterior que nós temos o cross start e nós temos também o cross end no nosso caso aqui no nosso exemplo o start em cima e o end embaixo na verdade para alinhar no Cross Axis tem que dar uma aumentada na altura do contêiner tá pra gente poder entender Inclusive a gente vai fazer isso também durante essa aula aumentando a gente vai dar um distanciamento entre o cross start e o cross end e você viu ali que quando aumentou ele deu uma puxada nos itens os itens se esticaram isso porque

por padrão o align items ele não tem o valor Flex start como você pode imaginar não ele tem por padrão o valor Stretch Stretch quer dizer esticar então o padrão do Aline items se você aumentar o seu Cross Axis que no nosso exemplo aqui de cima para baixo você aumentar o cross Axis ele vai esticar os elementos Fechou então El ele vai sempre esticar o elemento aí no sentido do Cross Axis beleza e existe também o a opção do Flex start no align items existe o Flex start o Flex start vai fazer ele grudar sempre

na parte do início do eixo transversal então o início do eixo transversal que é o cross start tá ali então ele vai deixar o o espaço em branco o espaço vazio vai ficar embaixo e ainda você vai falar assim ah mas agora bar eu tô olhando ali na Imagem e do lado direito também tem um espaço em branco quem vai resolver esse espaço em branco não é o Aline items é o justify content que a gente acabou de ver beleza não confunda uma coisa com a outra aquele espaço em branco na direita ele faz parte

do nosso Main aess não do Cross aess beleza cuidado aí treinando bastante você consegue entender além do Flex start também existe como o justify content o Flex end vai fazer os itens colar no final do Cross ais né do nosso eixo transversal o espaço em branco aqui no caso vai ficar grudado no Cross start Belê também temos o Center o Center mais uma vez vai pegar o cross Axis vai dividir na metade vai pegar o espaço restante o espaço livre vai colocar no início e vai colocar no final do Cross Axis Fechou então o align

items ele não tem as opções de espaçamento n de espaçamento o Space between Space evenly e o Space around mas existe uma uma outra propriedade que faz isso para o cross access Tá mas no nosso caso aqui o align items ele tem a opção Stretch que não existia no outro né no justify content Flex start Flex end e Center Fechou então vamos voltar mais uma vez lá no exercício e ver como is tudo funciona então ó Lembrando que para eu poder entender o align items eu tenho que aumentar a altura do Meu Container Então vou

vir aqui ó no meu contêiner vou aumentar a altura vou colocar de 300 pixels por exemplo exemplo não sei se 300 é muito viu aumentei lembra automaticamente como eu falei ó automaticamente ele usou o Stretch no Aline items tá então eu posso vir aqui e colocar embaixo do justify contents align items vou colocar como Stretch ó Stretch ele mantém dessa maneira se eu colocar Flex start Flex start ele vai colar lá em cima certo Flex and Flex and ele vai colar lá embaixo embaixo que eu digo no final do Cross Axis né que o nosso

Cross Axis está de cima para baixo aqui porque eu estou utilizando Row aqui no meu Flex Direction né ou utilizando flex flow aqui para mim também tem a opção de Center ó centralizou aqui ó no meu Cross ais E se eu botar Stretch de novo ele vai puxar para fazer ocupar né o elemento cada elemento ocupou exatamente o tamanho completo do nosso Cross access Então é isso nessa aula nós vimos duas formas de alinhar os elementos os itens né dentro de um e Flex container nós vimos o justify content que alinha sempre no eixo principal

e o a Line items que alinha sempre no seu Cross Axis ou no eixo transversal vai por mim eu vou te dar um conselho se por acaso tá começando a ficar confuso Porque você só tá assistindo o vídeo de braço cruzado ou apoiando o cotovelo na mesa é confuso mesmo você só vai aprender na hora que você colocar isso em prática com esses exercícios mais simples mas você só vai aprender mesmo quando você fizer um exercício bem maior e nós vamos fazer exercício vamos fazer alguns exercícios um pouco maiores nesse capítulo ainda nesse curso que

eu preciso é que você Se dedique que você pratique não adianta ficar só assistindo olhando porque daqui a pouco você vai olhar e vai falar assim nossa mas é muita propriedade para decorar você não precisa decorar Você precisa aprender e a gente só aprende na prática eu me despeço por aqui mas não antes de dizer o que a gente vai fazer no próximo vídeo no próximo vídeo eu vou te ensinar como fazer um alinhamento Centralizado perfeito como a gente fez anteriormente utilizando flutuação nós vamos agora utilizar flexbox para centralizar Um item exatamente no meio de

uma tela ou exatamente no meio de um contêiner qualquer não se esquece de treinar Não esquece de anotar tudo no seu caderno a gente se vê na próxima aula um grande abraço e até já [Música] [Aplausos] [Música] [Aplausos] já n [Música]