Alinhamento de elementos empacotados no Flexbox - @CursoemVideo HTML5 CSS3

dando continuidade aos nossos estudos do capítulo 27 do nosso material de apoio vamos continuar falando de flexbox e agora eu vou falar sobre alinhamento de conteúdo [Música] [Aplausos] empacotado Olá tudo bem com você seja muito bem-vindo muito bem-vinda a mais um vídeo aqui do seu curso de html CSS nós estamos avançando aqui no capítulo 27 falando sobre flexbox é um capítulo muito importante né um capítulo bem recente da história do HTML da css3 né Principalmente e nós estamos se eu não me engano na sexta ou sétima aula acho que é a Sétima aula aqui desse

Capítulo falando sobre propriedades que se aplicam a flex containers nas aulas anteriores nós falamos sobre alinhamento no eixo principal alinhamento no eixo transversal falamos no vídeo anterior sobre centralização de itens em elementos flexes elementos flexíveis né e agora nós vamos falar sobre conteúdo empacotado basicamente contundo empacotado é aquele que se quebra vamos dizer assim quando eu uso Flex wrap com o valor no wrap a gente encolhe os elementos né até o seu limite até eles não poderem mais já quando eu utilizo o wrap né a gente já viu isso nas aulas anteriores a gente quebra

o conteúdo né o conteúdo tá eh quebra no bom sentido né eu tô com um elemento do lado do outro quando não cabe mais por exemplo quando foi para uma tela de tablet de celular ele vai pegar o elemento o último elemento e vai jogar pra parte de baixo nós nós já vimos bastante isso mas agora a gente tá retornando aqui para falar sobre o alinhamento desses elementos e é muito importante que você esteja com seu caderno em mãos para poder fazer suas anotações como sempre eu indico isso porque muita gente se confunde entre as

propriedades justify content align items e essa propriedade que a gente vai ver agora que é a align content muita gente confunde o justify content Aline content e Aline items que diabo é isso a gente vai aprender direitinho nessa aula aqui já mantém o seu material para você fazer suas anotações Então vamos diretamente pros slides e vamos aprender um pouco mais sobre isso você que tá aqui assistindo esse novo módulo do curso de html tá aprendendo agora ou já aprendeu há algum tempo não sei a que ponto você tá do curso a hospedar o seu site

gratuitamente utilizando o github pages só que você também deve ter notado que ele é bem limitado até porque ele é de graça então não tem como ter muitos recursos além do HTML básico CSS básico e o JavaScript Inicial Mas se você quiser uma hospedar profissional com suporte a PHP e muitas outras ferramentas Premium inclusive ganhando além da hospedagem ferramentas que são pagas ferramentas caras sem pagar mais nada por isso e também cursos para você aprender a utilizar a maioria dessas ferramentas Pois então torne-se agora mesmo um cliente uma cliente da hostnet e lá escolhendo o

plano Cloud a partir do plano trimestral você também ganha domínio grátis torne-se agora um assinante da hostnet e leve o seu site pros melhores servidores que a gente pode oferecer acesse agora o site da hostnet apontando o seu celular pro QR Code que tá aparecendo aqui na sua tela voltamos agora pra sua programação normal e já vem a tela do computador aí para você fazer sua prática de html então estamos aqui no nosso tão esperado slide Já estamos no momento falando sobre contêiners flexíveis essa é a última aula de propriedades sobre contêiners flexíveis no próximo

vídeo já na próxima aula nós vamos começar a falar sobre propriedades que se aplicam aos itens que são esses pontilhados aí que a gente colocou E como eu disse no início da aula e nessa abertura aí do nosso exemplo do nosso vídeo nós vamos falar sobre conteúdo empacotado o alinhamento de conteúdo empacotado apenas dando uma relembrada rápida porque eu expliquei sem esse grafismo aqui todo que a gente pode permitir eu tenho o conteúdo e com o flex flow quando eu tenho no caso aqui Desse exemplo Row isso é os elementos vão ficar em linhas um

do lado do outro né de forma deitada e vai ter a configuração wraap a gente até então a gente sempre usou o no durante esses exemplos agora eu tô colocando aqui wraap isso é quando ele diminuir ó enquanto ele tiver diminuindo e os elementos couberem nada muda agora se eu reduzir um pouquinho mais a largura desses elementos na tela a coisa muda um pouquinho então dá uma olhada aqui ó antes a gente tem uns elementos de anatomia aqui para poder lembrar quando nós temos o elemento flex flow utilizando o wraap a gente vai ter que

saber aonde está o nosso eixo transversal então no nosso caso aqui como estamos em Row o eixo principal é deitado e o eixo transversal é em pé de cima para baixo Nós também já aprendemos isso várias vezes se você tiver confuso ou confusa Volta nas aulas anteriores e vem anotando tudo vai fazendo os desenhozinho que isso Vai facilitar muito a sua vida e quando eu tenho o eixo transversal o nosso Cross Axis isso nos gera dois posicionamentos que a gente tem que saber o cross start e o cross end Então a gente tem o início

do do do Cross aess e o o final do Cross access E como eu disse intermente se a gente der uma reduzida um pouquinho maior na largura desse bloco Branco aí que é o nosso contêiner Olha o que vai acontecer existe uma quebra o último elemento vem para baixo isso porque eu tô utilizando Row se eu utilizasse Row Reverse O Último elemento ia para cima também já explicamos isso mas até então nada mudou aqui eu não preciso me preocupar com o alinhamento do conteúdo empacotado o grande problema é que na maioria das vezes para acompanhar

outros conteúdos laterais existe uma ampliação desse meu container uma ampliação no sentido do Cross ais Então vamos tentar aumentar aqui o cross ais ó vou aumentar E aí ele aconteceu alguma coisa você vai falar é assim que acontece não é exatamente assim que acontece na prática você vai ver aí durante essa aula basicamente o que a gente vai falar de conteúdo empacotado o alinhamento desse conteúdo empacotado é decidir o que que vai acontecer com esse espaço em branco aí que acabou de aparecer e a decisão do que vai acontecer com esse conteúdo com esse espaço

livre é ditado pela propriedade que que eu já citei anteriormente que é a align content E aí olha só eu vim aqui em tela cheia chegando pertinho de você para te dar uma dica anota essa parada porque muita gente confunde Aline content com Aline items e também por ter a palavra content Tem muita gente que confunde Aline content com justify content de forma resumida aqui para você justify content vai alinhar o conteúdo vai alinhar os itens dentro do eixo principal o align items vai alinhar os itens dentro do eixo transversal e o align content Case

que a gente vai ver agora alinha os elementos no eixo transversal mas quando eles estão empacotados beleza Anota isso aí no seu caderno isso vai fazer toda diferença para você mais pra frente agora o que a gente vai fazer é ver todos os valores que são aceitos por essa propriedade align content que você tá vendo aqui do meu lado vamos começar pelo elemento padrão que como eu disse aquele resultado que fez ali na hora que a gente puxou não é o resultado oficial não é o resultado padrão o resultado padrão é dado pelo valor Stretch

isso porque a Line content por padrão tem o valor Stretch e o que como funciona o valor Stretch Você se lembra no slide anterior que a gente tinha uma linha só e quando diminuiu fez duas linhas já que a gente tem duas linhas nesse nosso exemplo como que vai calcular o Stretch como que vai funcionar o Stretch ele vai pegar a dimensão inteira que no nosso caso aqui no nosso exemplo que tá aparecendo aqui do lado é a altura e vai dividir em duas partes iguais Ah mas e se tiver quebrado para três linhas ele

vai dividir em três partes iguais se tiver em quatro linhas vai dividir em quatro partes iguais e assim sucessivamente tá o Stretch ele vai pegar primeiro toda a área disponível e vai dividir pelo número de linhas no nosso exemplo pode ser o número de colunas se a gente tiver trabalhando com colunas e vai dividir certo no nosso exemplo aqui duas linhas ele vai colocar os elementos dentro vai colocar os itens dentro mas não para por aí porque o nome é Stretch então ele vai pegar a dimensão do Cross aess de todos os itens e vai

fazer exatamente isso que vai acontecer aqui na setinha ó ele vai puxar para baixo para baixo ou pro lado né Depende da direção que a gente vai trabalhar esse é o valor padrão é assim que se comportaria Normalmente quando a gente quebra os elementos numa caixa que tem o cross Axis amplificado a gente vai ver isso já já na prática então marca aí também no seu caderno que Aine content por padrão se eu não fizer nada é tratch mas existem outros valores Como por exemplo o Flex start o Flex start vai fazer o seguinte ele

vai pegar todos os elementos e colocar grudados no Cross start no nosso caso o cross start está em cima então ele vai pegar todos os elementos Inclusive a quebra colocar tudo em cima e reservar o espaço de baixo grudado no Cross Hand para colocar o espaço em branco beleza Esse foi o caso que eu representei ali anteriormente lá no início quando eu tava falando de Aline content então se você quiser esse resultado aquele resultado que apareceu com esse espaço em branco aí Amarelinho com uma interrogação grandona você vai ter que utilizar Line content Flex start

que não é o valor padrão o valor padrão é Stretch existe também se a gente tem o Flex start também existe o Flex end então o Flex end é o raciocínio é óbvio nós vamos pegar todos os elementos e colocar próximos aos Cross end n então ele vai ficar quebrado Note que ele quebrou normalmente como uma linha com wraap né ele foi para baixo né do tipo Row normal se fosse Row reverse o elemento Extra ali que tá ali embaixo estaria em cima né estaria logo acima dos elementos ali e o espaço em branco o

espaço restante fica perto do Cross start ali representado existe também a opção fácil de identificar Center que que o Center vai fazer ele vai pegar os três elementos inclusive quebrados mas vai criar no Cross start e no Cross end ele vai criar espaços em branco esses espaços em branco vai fazer com que os itens fiquem alinhados ao centro do Cross access certo ele vai ficar quebradinho mas lá no meio e essas três primeiras esses três primeiros valores de Aline content são muito fáceis de entender né o Flex start Flex end e Center é tranquilo depois

se você entendeu no justify content a gente tem aquelas aqueles valores de espacejamento a gente tem o Space between a gente começar com Space between que que é o Space between lembra que a gente falou isso no justify content é a mesma coisa só que no eixo das transversais né no eixo transversal ele vai pegar os primeiros elementos e colocar perto do Cross start vai pegar os últimos elementos vai botar perto do Cross end e esse espaço no meio ele vai dividir com outros itens que porventura venham a existir no nosso caso aqui a gente

tem três elementos Então esse espaço do meio vai ser todo espaço livre Então o espaço livre fica no meio e os elementos ficam grudados Nas extremidades Lembrando que se a gente tivesse três linhas se o conteúdo tivesse quebrado em três linhas ele ia pegar esse espaço amarelinho aí ia colocar os itens extras no meio e separando o espacinho acima e abaixo deles também existe no meu ver aqui o mais simétrico de todos que é o Space evenly que também existia no justify content e a forma de trabalhar é exatamente a mesma ele coloca um espaço

no Cross start coloca um espaço no Cross Hand esse espaço ele é milimetricamente calculado para que que eu coloque os elementos e entre esses elementos também exista exatamente o mesmo espaçamento então se você olhar essas targas amarelinhas aí todas as três as três targas tanto a de cima quanto a de baixo quanto do Meio possuem o mesmo tamanho então o cálculo é feito milimetricamente para que os elementos fiquem visualmente distribuídos mas ele cria um espaço antes e depois também se você não quiser esse espaço antes e depois você vai ter que utilizar o Space Bet

e por fim a gente tem o Space round que foi o último valor também que a gente viu lá no justify contents também tá aí mais um motivo pra galera confundir align content e justify content então anota anota essa parada vai por mim o Space around ele faz basicamente bem parecido com o Stretch ele vai começar dividindo o o o eixo transversal em partes iguais no nosso caso como são duas linhas dois espaços iguais só que ele não vai colocar os elementos e espichar ele vai colocar os elementos vai colocar os itens dentro dessas áreas

demarcadas e ele vai dentro dessa área demarcada centralizar os valores na verdade centralizar os elementos né os itens ele não vai fazer aquela puxadinha que o Stretch faz não sei se você reparou mas em todos os recados que eu tô fazendo aqui todas as minhas aparições dentro desse novo módulo aqui do curso de html eu tô utilizando essa máquina poderosa aqui ó Na verdade eu venho te dar a dica se você tiver precisando de uma máquina para aprender reprogramação para rodar todas as ferramentas e de quebra nas horas vagas D aquela jogadinha aqui ó vivobook

15 polegadas da Asus esse modelo que eu tô aqui ele tem processador de 11ª geração i7 de 11ª geração 16 GB de memória um SSD ultra rápido padrão nvme e tem duas placas de vídeo uma integrada na máquina e outra dedicada com 2 GB de memória Então essa é uma máquina perfeita para você aprender muito trabalhar e estudar e também jogar para maiores informações sobre essa senhora máquina aqui você pode acessar em dois sites ou vivobook.com.br ou Aprenda com asus.com.br E como sempre toda a aula que a gente tá fazendo aqui todas as aulas desde

o início do curso né quando eu faço essa teoria eu coloco lá as exemplificações né Principalmente durante todo esse capítulo aí de flexbox e agora nós vamos diretamente pro computador para fazer isso funcionar na prática vem comigo então ó já estou aqui no meu ambiente Já estou com o meu repositório totalmente atualizado agora eu vou abrir o código né aqui é o meu repositório de html CSS vou abrir no visual Studio code e vou abrir no Explorer uma coisa que a gente quase não falou é o seguinte ó se você tá aqui no no github

desktop se você apertar ctrl shift f de file ele vai abrir os arquivos certo voltando aqui no github desktop pressionando contrl shift a ele vai abrir o código diretamente no nosso editor padrão que no meu caso aqui é o visual Studio code primeira coisa que nós vamos fazer é abrir os arquivos aqui exercícios vamos lá no e027 vamos pegar a flex 001 que foi aquele exemplo Inicial que a gente fez CRL ctrl v para ele criar uma cópia vamos renomear essa cópia dessa pasta para Flex 006 E aí nós vamos fazer pequenas alterações nele então

vou abrir o 006 vou abrir o index aqui no nosso ah browser no caso do Chrome e v vamos dividir a tela aqui em duas partes pra gente poder ficar com tudo arrumadinho primeira coisa que eu vou ter que fazer é tirar o Flex alto que foi colocado nos elementos desse exercício seis ó seis tá aqui ah eu tenho esse Flex alto aqui a gente vai ter que tirar outra coisa que a gente vai ter que fazer para causar essa quebra é aumentar o tamanho dos elementos aqui vamos dar uma aumentada nos elementos pra gente

poder entender então você vai vir aqui ó no div item nós vamos colocar manualmente um tamanho tá depois a gente vai falar sobre tamanho Quando a gente tiver falando sobre anatomia dos itens Vamos botar um pading de 40 pixels eu acredito que já dê para quebrar bastante ele vai quebrar não quebrou porque né obviamente a gente não fez a aqui tá display Flex no container a gente tem que colocar o flex flow é do tipo Row e wrap já aprendemos também essa propriedade atualizando eu tenho a b c d e f e g e eu

posso aumentar e diminuir quando diminuir ele vai quebrar certo tá quebrando aqui exatamente outra coisa que eu vou fazer é aumentar o tamanho desse contêiner dessa parte aqui que tá Coral né salmão no caso então meu contêiner vai ter uma altura de sei lá 400 pixels não sei se vai ser suficiente tá ótimo mais que suficiente Então tá vendo aqui ó ele já tá como stretched né ele tá como puxado né então nós vamos vir aqui também no align items e nós vamos colocar Flex start Ah isso vai fazer com que os elementos fiquem aqui

em cima exatamente do jeito que eu quero Aline items foi outra aula tá o que a gente tá fazendo agora é Aline content quando eu quebrar o elemento ó vou diminuir para quebrar tá vendo ele quebrou aqui ó com o Stretch no caso aqui ele tá como Flex start ele vai ficar grudadinho né ele vai ficar ele dividiu em duas partes né mas ele não puxou porque eu estou com o align items como Flex start Deixa eu tirar aqui para ver se ele vai causar exatamente aquele resultado que fizemos ó lá exatamente aquele resultado tá

então é uma conjunção entre o align content e o align items e como eu disse por padrão ele tá quebrado assim né ó ele tá puxado e depois ele quebra assim porque o padrão é Stretch o padrão é esse daqui ó Aline content Stretch que é o padrão certo não mudou nada atualizei aqui não mudou nada se por acaso você colocar no lugar de Stretch col Flex start ele fica exatamente daquele jeito que eu falei tá vendo mas é importante que você retire nesse caso aqui o Aline items tá para você conseguir ver o resultado

Então Aline content Flex start ele fez exatamente o que eu tinha falado ó ele ficou inteirinho e quebrou conforme foi necessário aqui tá eu vou fazer o seguinte ainda aqui ó eu vou fazer mais elementos vou te mostrar com qu com três linhas G H deixa eu ver se é satisfatório se é necessário se já é suficiente JK e l deixa eu ver se já é o suficiente para fazer três linhas é suficiente eu vou fazer mais um aqui só l e m tá aumentei aqui o número de itens para você poder entender então ó

se eu aumentar ele fica tudo numa linha For diminuindo ele vai quebrando em linhas diferentes Se eu colocar o valor Stretch aqui ó em vez de Flex start no Aline content colocar Stretch é é importante dizer o seguinte o align content é quando eu tô usando wraap né anota isso aí também se é que você já não anotou se eu botar Stretch ó ele vai ficar sempre ocupando a altura total do contêiner o seu contêiner você vai ter que configurar a altura dele tá porque senão no caso aqui de Row né Se fosse colum você

ia ter que modificar a o width né que é a largura para ficar maior do que o normal então ele fez caber isso aqui tudo tá vendo Então ele Coube os elementos todos aqui tá do início ao fim se for Flex start ele vai ficar todo colado na parte de cima se for Flex end ele vai ficar todo colado na parte de baixo tá vendo e a quebra é a quebra natural certo então ele tá ó aumentando e diminuindo conforme a gente planejou lá durante a aula outra coisa que nós podemos colocar no Aline content

podemos botar Center aí quando eu boto Center o que que ele vai fazer ele vai pegar esse espaço em branco aqui vai dividir em dois ó vai botar um em cima um embaixo ó lá certo vamos colocar agora deixa eu colocar aqui em duas linhas para você poder ver um negócio negócio Vamos colocar no lugar de Center Vamos colocar o Space between atualizando ó lá Space between ele coloca a parte de cima e a parte de baixo e o resto do espaço aqui mas se forem três linhas ó o que ele vai fazer se for

três linhas ele lembra que eu falei ele vai colar o primeiro o primeiro os primeiros itens na parte de cima os últimos itens na parte de baixo o que tiver no meio ele vai fazer exatamente no meio e vai calcular os espaços certo que eu tinha explicado anteriormente fizemos também o Space even que ele vai fazer aquilo ó que eu falei ó esse espaço é igual a esse espaço que é igual a esse espaço que é igual a esse espaço Ele sempre vai fazer quando for duas linhas ó esse espaço é igual a esse espaço

que é igual a esse espaço então é o evenly é o que pega mais simetricamente os elementos dentro do do nosso contêiner e por fim o Space around ele vai pegar ó aquilo que eu falei ele dividiu tudo em três partes então ó anota aí também esse espaço aqui é o dobro desse espaço de cima e o dobro desse espaço de baixo tá esse espaço é igual a esse espaço então ele não é tão simétrico mas ele fica bem bonitinho ele fica mais grudado na parte de cima na de baixo com espaçamento simples e aqui

ele fica com espaçamento duplo porque você viu que ele divide em três áreas né dá para fazer até um pontilhado aqui no meio que seria as áreas separadas três áreas separadas Beleza então você verifica aí que a gente conseguiu provar que o align content funciona quando o flex flow quando o o o Flex Wap é Wap ou Wap reverse Beleza então tá aí exemplificado na prática o nosso exercício se volto a dizer ó fez o exercício funcionou vamos voltar no nosso github desktop ele viu aqui que tá a o exercício seis de flexbox então eu

posso também comitar eu posso botar assim ó Flex Box exercício 006 cometei pro Master ele comit dentro da minha máquina eu vou dar push e ele vai mandar lá para o servidor do github e o nosso código já está disponível na nuvem Fechou então é isso meu querido é isso minha querida finalizamos aqui todas as propriedades que estão disponíveis agora para contêiners flexíveis e no próximo vídeo na próxima aula nós vamos começar a falar sobre as propriedades que se aplicam aos itens então não adianta você colocar o align content o align e o justify content

dentro de filhos dentro de itens Flex A não ser que ele seja Flex também mas a gente não vai entrar nisso não isso você vai aprender com tempo mas sabendo que essas três propriedades de alinhamento justify content pro eixo principal Aine items pro eixo transversal e Aine content para os elementos que são empacotados todos esses e todos os outros que a gente viu até aqui né o Flex Wap o Flex Direction o flex flow enfim todos eles são aplicáveis aos contêiners no próximo vídeo nós vamos começar a ver as propriedades aplicadas aos itens aos filhos

dos contêiners quero pedir para que você se inscreva no canal mostre pras pessoas a evolução desse curso olha quanta aula olha quanta dica olha quanto exercício a gente já fez até aqui e o que eu peço encarecidamente a vocês é que valorizem os nossos patrocinadores assistam as nossas aulas e compartilhem nas redes sociais eu me despeço por aqui e no próximo vídeo A gente já tem Encontro Marcado um grande abraço e até a próxima [Música] [Aplausos] [Música] [Aplausos] [Música] [Aplausos]