Propriedades do flexbox conteiner

agora que a gente já entende o que que é o flexbox container o que que são os flexbox items eu vou te apresentar agora algumas propriedades que a gente usa nos contêiners Ou seja no flexbox P tá isso aqui é importante que você entenda na realidade assim isso aqui já é aplicado no elementor Mas agora você vai entender como que isso aqui pode ser aplicado direto na linha de código do CSS mesmo tá certo Olha lá é aqui ao invés de gente usar e o site do Mozilla né pra gente ver a documentação vamos ver

agora no site do W3 cools tá então tô aqui no site da W3 cools e as propriedades que a gente tem são essas aqui ó é o Flex Direction Flex R flex flow E também temos o o justify contents e o align itens e o align content Tá certo então a gente vai explorar como que elas funcionam tá Primeiro vamos entender o flexbox Direction tá então o flexbox Direction ele é literalmente direção né Então olha só quando a gente tá trabalhando aqui com coners por exemplo dentro do elementor de forma visual Então vou colocar um

aqui em cima ó eu vou fazer o seguinte esse de cima aqui eu vou pintar ele com um cinza um pouco clarinho só pra gente entender e eu vou duplicar ele só que esse aqui de baixo é a gente vai e vou deixar ele numa outra cor pra gente conseguir identificar tá então esse aqui eu tô trabalhando direto no elemento esse aqui a gente vai trabalhar com programação que eu vou te mostrar tá olha só Então esse aqui de cima a primeira coisa o flexbox Direction é justamente isso aqui ó a direção tá então aqui

nesse caso desse flexbox ele tá com a direção para baixo tá mas eu tenho além da direção para baixo ten colocar Vamos colocar alguns objetos aqui só para você ver né Então deixa eu pegar um índice por exemplo de Eh vamos pegar um ícone aqui tá então joguei um ícone aqui eu vou duplicar esse ícone ó Então eu tenho aqui o meu objeto eu tenho três ícones eles estão ó na direção do coluna seja de cima para baixo eu posso colocar em linha que é de um lado pro outro posso colocar linha inversa que é

de de outro lado para um vamos dizer assim e aqui que ele vai de baixo para cima tá vamos deixar de cima para baixo vamos deixar em linha primeiro tá aí agora nesse aqui de baixo a gente vai fazer o seguinte eu vou pegar um objeto de HTML e a gente vai vai jogar ele aqui tá só para você conseguir visualizar só vou deixar esse aqui Centralizado não não deixar Centralizado não dá para ver assim tá ok aí aqui eu vou colocar uma div nele ó div Class e vamos dizer que ela vai chamar container

Pie Tá certo então aqui tem uma div é com a classe container Pie eu vou abrir aqui um Style vou colocar o CSS aqui mesmo tá Vou Colocar assim container Pie aí esse container Pie aqui eu vou dizer que ele tem um display Flex ou seja nós estamos trabalhando com flexbox Tá certo e beleza aí dentro desse container P Deixa eu só dar um espaçamento pra gente conseguir visualizar melhor né aí dentro desse container Pie eu vou colocar alguns objetos aqui vamos colocar por exemplo e botões né então V colocar buttons Ó coloquei um Button

é botão um Opa dois não um Então aqui tem um botão um é vou colocar o botão 2 3 e 4 tá então 2 3 e 4 tá então lembrando isso aqui é o flexbox é contêiner isso aqui são os flexbox items que são os filhos diretos do contêiner Tá certo então vamos lá agora que eu tenho esse eu tô dizendo que ele tá no display Flex por padrão perceba que ele já veio em linha tá então se eu quisesse mudar a direção disso aqui eu ficasse e de cima para baixo como é que eu

faria aqui nesse caso Eu mudaria aqui o eh Flex Direction né então Flex Direction eu colocaria por exemplo Row tá Row significa não Row é o que já tá linha né então Row significa linha em inglês presta atenção Row significa linha agora se eu coloco column ó column é coluna perceba que agora que ele fez ó ele já deixou os objetos de cima para baixo tá Ah Marcelo mas ele deixou com a largura eh Total tá Depois a gente vai ver esse negócio de largura Vai com calma tá mas o ponto é Eh Ou melhor

vamos em vez de colocar um botão Vamos colocar um outro objeto aqui só para não te confundir Vamos colocar um H1 aqui esse aqui também vai ser um H1 tá esse aqui também vai ser H1 H1 H1 e aqui em vez de ser botões vão ser h1s tá E aqui em vez de Botão colocar exemplo tá então aqui ok exemplo exemplo exemplo exemplo Tá beleza então quando ele tá como coluna ó perceba que ele ficou nessa direção de cima para baixo agora se eu coloco Row que é linha ele fica como ele já vem por

padrão que é de um lado pro outro tá ó lá exemplo um ó exemplo um exemplo dois exemplo TR Opa exemplo três e exemplo 4 na direção de linha certo e aí eu também tenho o colum que é a coluna só que eu coloco um reverse na frente aí o que acontece em vez de ficar de de cima para baixo ele fica de baixo para cima tá então perceba que quando eu tô apenas com colum ele começa no 1 2 3 4 agora que eu coloco colum reverse ele começa de baixo para cima o 1

2 3 4 que seria o mesmo que você vim aqui no contêiner e fazer isso aqui ó de baixo para cima percebeu então só para não confundir aqui as ordens também em vez de deixar três estrelinhas esse aqui vou mudar vamos colocar um quadrado e esse outro aqui vamos colocar um círculo só para você ver a direção que elas vêm tá eh vou colocar esse Spinner não colocar uma aranha aqui tá ok beleza então olha só aqui esse de cima ele tá como linha então começa na estrelinha quadrado e Aranha agora quando eu coloco coluna

ó estrelinha quadrado e Aranha quando eu coloco linha reversa é o contrário ele vem de baixo para cima do mesmo jeito que a gente tá fazendo ali embaixo só que via programação tá aí aqui ó em vez de ser colum reverso Vamos colocar Row reverse agora que é linha in inversa né então o que aconteceu na linha inversa ó ele vem do 1 2 3 e 4 nessa direção aqui fechou Beleza então essa aqui é a primeira propriedade que a gente tem no Flex e da no no flexbox container né que é o Row reverse

Vamos colocar aqui como colum só pra gente continuar a aula Ok então ele tá em coluna Agora eu tenho também outra que é o Flex wop tá então a própria próxima propriedade aqui do flexbox container é o Flex wop Tá o que que é o Flex drop Flex drop é ele é esse objeto ele vai nem vez de colocar coluna vamos deixar linha tá é no Flex drop a gente identifica se esse objeto vai quebrar linha ou não Tá então como assim olha só vamos ver isso aqui agora e de forma visual no elementor depois

a gente vê de novo na programação Então eu tenho aqui esses esses Eh esses três objetos tá E aí ó o Flex rop ele é exatamente essa opção de envolver tá então se eu deixo marcado essa opção ó vamos vamos supor que eu vou vamos colocar uma coisa diferente aqui né então vamos deixar esse objeto aqui com uma uma largura vamos pegar a largura dele aqui e deixar em por exemplo 45% Esse aqui também vamos deixar em com uma largura de 45% e a aranha aqui também vamos deixar com largura de 45% tá 45 se

você fizer as contas 45 45 com 45 vai dar 125 então ele passou do 100% né mas ele não quebrou por quê Porque aqui ó por padrão nesse contêiner ele ele vem como essa opção sem envolver mas se eu marco essa opção envolver ó ele quebra pra linha de baixo tá para entender isso aqui você precisa entender sobre o flexbox tá Inclusive tem uma live aqui que eu ensino sobre o flexbox container mas entendeu então sem envolver ele não quebra linha e com o envolver ele quebra linha Tá certo agora aplicando isso aqui no CSS

ele tem o Flex drop então é a mesma coisa tá só que aqui em vez de vamos fazer o seguinte deixa eu sutilizar esse h um aqui vamos deixar ele com uma largura vou vou colocar uma largura dele aqui ó colocar um background primeiro colocar um background vermelho só pra gente CONSEG não acho que não vai dar certo colocar um background vermelho nele aqui eh ué deveria dar né Ah tá porque não é uma classe né então ó agora tá com blackground vermelho e Vamos definir uma largura o de 45% tá então beleza ele tem

45% eu vou colocar uma borda nele também pra gente conseguir identificar então border eh dois pixels Sid Vamos colocar um um verde aqui tá Então olha lá ele tá com uma borda Verde cada um desses objetos tá deixar vermelho vamos deixar um branco senão não vai dar para ver direito Olha lá beleza então aqui tá cada um dos objetos se eu deixo o Flex rop como no Wap então ele é a mesma coisa de deixar a essa opção aqui ó no Wap é a mesma coisa deixar essa opção aqui para ele não quebrar sem envolver

tá agora se eu mudo de no Wap para wop então ele quebra então ele é a mesma coisa aqui eu tivesse marcado essa opção aqui de envolver percebeu então ele passou a quebrar a linha tá só que aqui a gente tem opção R aí tem uma outra terceira opção aqui que não tem aqui no no no elementor pro padrão o elementor El tem essa daqui o sem envolver e o envolver mas aqui dentro do do CSS tem também o r reverse tá então o que que o r reverse Em vez dele quebrar pra linha de

baixo né então por padrão ele quebra pra linha de baixo ó Opa melhor aqui ó por padrão se ele passar da largura ele quebra ele joga aranhinha pra a pra pra linha de baixo só que o Up verse em vez de jogar pra linha de baixo ele jogaria pra linha de cima então ele cria uma linha em cima tá Então olha lá ele fez isso aqui ó tá se eu deixo só WP ó então ele quebrou beleza ele quebrou só que aqui tá o um aqui tá o dois aqui tá o três e aqui tá

o quatro certo só que se eu quisesse com esse três e o quatro em vez de quebrar para baixo ele quebrasse para cima como é que eu faria eu faria justamente isso aqui então colocaria um reverse na frente tá Então olha lá agora ele ele ficou quebrando pra linha de cima Em vez de quebrar pra linha de baixo tá certo então isso que faz é o valor WP reverse dentro da propriedade Flex wop Ok beleza então essa foi a terceira propriedade aí ó eu tenho uma outra propriedade aqui também que é o né esse aqui

foi o Flex R né eu t mostrando aqui mas acabei mostrando lá direto né se você quiser também pode testar aqui né tá o Flex R que ele mostra essa quebra de linhas e também tem o flex flow que que é o flex flow flex flow ele é um short Hand então ele é a mesma coisa que eu usasse o Flex Direction com o Flex wrap só que lembra que que é short hand eu reduzi esse código né então ele em vez de usar ele em em Long Hand como tá sendo aqui nesse caso eu

uso ele em short Hand em apenas uma linha tá então eu poderia fazer simplesmente assim ó então Digamos que esses quatro exemplos aqui ó aí eu uso o flex flow né então Digamos que eu quero que eles fiquem por exemplo em coluna e no Rap OK então eu coloco aqui em uma linha apenas tá ele funciona da mesma forma como funcionaria se eu tivesse deixado esses dois aqui tá então só que talvez eu possa colocar uma outra aqui por exemplo ó em vez de coluna vou deixar Row e no wrap Ok então no wrap ele

não quebra ou wrap ele quebra tá então é a mesma coisa só que eu uso ele no formato short Hand ou seja em uma linha só tá legal isso é o flex flow agora tem uma outra propriedade aqui dentro do flexbox container que é o justify contents tá ou justificar o conteúdo o que que essa propriedade faz ela é mais ou menos o que que isso aqui faz né Deixa eu só em vez de colocar esses ícones agora vamos colocar um outro objeto aqui deixa eu ver vou colocar um botão tá então vou colocar um

botão aqui em cima só para exemplificar tá então duplicar esse botão duplicar duplicar vamos deixar esse aqui como uma cor azulzinha esse aqui vou deixar com uma cor roxinha e esse aqui vou deixar com uma cor vermelhinha só para você entender tá ok Deixa vermelhinho lá beleza então vamos lá aí aqui ó eu tenho esse justificar conteúdo tá então aqui dentro do elemento ó início ele vai deixar os conteúdos alinhados para cá mesmo né É é eu tenho também a direção centro tá que ele vai deixar os objetos centralizados né aqui no meio e eu

também tenho essa opção aqui de fim que ele vai jogar tudo lá pro fim tá e eu também tenho essa da aqui espaço entre ou Space between já já a gente vai ver isso dentro do Flex né no no código então o Space between que ele faz ele deixa os espaços eh e o objeto vai est sempre colado com a extremidade do container Pie tá o item vai estar sempre colado com a extremidade do contêiner Pie então perceba que esses botões aqui ó eles estão colados na extremidade Se eu tivesse por exemplo em vez de

ter quatro eu tivesse ó três ele deixou esses dois aqui colados na extremidade se em vez de ter três tivesse um o dois apenas né ele deixaria eles colados na extremidade Então isso é o Space between ele deixa os objetos colados na extremidade né que é o espaço entre mesma coisa tá aí eu também tenho aqui o espaço ao redor que que o espaço ao redor ele pega eh deixa mais ou menos o mesmo espaço ó entre eles então ele procura padronizar o espaço ao redor deles tá aí tem também o espaço uniforme e ele

também n na realidade o espaço uniforme Eu acho que eu sempre confundo o espaço uniforme com o espaço ao redor mas você entendeu né o espaço uniforme ele mantém inclusive o espaçamento nas outras laterais não apenas entre eles né Ó então ele deixa aqui também nas laterais o espaço eh similar Tá certo beleza e ó uma coisa interessante também aqui eu vou deixar agora Centro só para você entender e aí ó se eu mudo a direção em vez de ser uma linha ele passa a ser uma coluna perceba que esses objetos aqui também mudam ó

ó estão mudando de linha para coluna eles vão mudar Aí o o início ele vai aí ele vai seguir a da coluna né Então olha só se eu deixo aqui início centro e fim ó então funciona da mesma forma só que ele vai mudar a forma como ele alinha de acordo com a direção do contêiner tá legal agora vamos ver isso aqui na prática aqui dentro do flexbox tá do CSS tá legal então aqui dentro do CSS eu vou fazer o seguinte Vamos diminuir a largura disso aqui deixar em 25 por exemplo ó não deixar

25 não vamos deixar 30 tá então ol Ele tá em 30 aqui só que agora a gente vai ver não vou deixar uma vamos deixar um espaço o valor em pixels aqui colocar 100 pixels por exemplo eh não deixar 200 pixels Ok deixei 200 pixels tá então aqui ó eu tô falando que ele tá em linha e que ele quebra a linha Tá eu vou colocar agora o justify contents Então justify contents você vai ver como é que a gente consegue e personalizar isso aqui então se eu coloco assim por exemplo Center ó ele jogou

no centro entendeu jogou isso aqui no centro lembra ele tá em linha ou seja ele tá assim nessa direção e eu disse aqui que ele o justify content Center então ele jogou os objetos no centro igual esse daqui né esse aqui tá em linha só que esse aqui não tá no centro esse aqui tá no início tá se eu quisesse deixar esses objetos aqui no início eh se eu deixasse sem essa propriedade por padrão ele já vem assim mas se eu quisesse definir essa propriedade aqui no justify content eu colocaria assim ó Flex start ó

Flex start então ele tá começando no start tá e se eu quisesse que esses objetos tivessem alinhado aqui no final aí bastaria eu usar em vez do Flex start usar o Flex end tá então coloquei Flex zend ele jogou os objetos pro canto que seria a mesma coisa que eu vim aqui ó e colocar os objetos aqui no fim percebeu só que aqui em vez agora de o Flex end ainda tem e o Space between né então Space between ele deixa lá colado na extremidade como eu mostrei para você ó então Space Bet que significa

espaço entre em inglês tá então ele fez a mesma coisa que eu viesse aqui ó e colocasse o espaço entre percebeu então é a mesma coisa só que aqui a gente fez via programação tá E além do Space between tem também o Space around que é também a mesma coisa que eu viesse aqui ó e marcasse essa opção espaço ao redor então perceba que ele fez isso aqui ele deixou já com esse espaçamento aqui around né ou seja o espaço ao redor tá E aí também aqui se eu vim para essa última opção que é

o espaço uniforme aqui eu também tenho o Space aí no caso vai ser o Space evenly né então Space evenly então ele criou ou melhor Opa evenly tá então ele deixou da mesma forma que tá aqui em cima no caso do espaço uniforme tá que é o evenly Tá certo então isso que faz o justify content tá E também Lembrando que lembra que quando a gente muda aqui eu vou deixar centro agora só para você ver então quando a gente muda aqui de direção de linha para PR coluna ele também muda esses objetos aqui tá

E aqui é a mesma coisa tá se eu mudar isso aqui ou melhor se eu mudar este Flex aqui em vez de ser um Row ele passar a ser uma colum tá passar a ser uma coluna então é a mesma coisa deixa eu só aumentar e o tamanho aqui vamos colocar um um um Hi maior para você conseguir visualizar melhor né uma altura maior deixar aqui talvez uns 400 pixels tá não mais um pouquinho vou colocar 600 tá Então olha lá se eu deixo eh se eu deixo como coluna ele também muda aqui a direção

de acordo com coluna Então se deixa aqui Center ó ó Então agora ele passou ser centro se eu deixo um Flex end ele vai jogar lá para baixo começou aqui embaixo tá se eu deixo um Flex start ó ele começou aqui em cima Como já deveria se eu deixo Qual que é o outro mesmo é o Space between né então coloco um Space between aqui também mesma coisa entendeu Então ele funciona da mesmíssima forma around só que agora a gente tá trabalhando com colunas ao invés de trabalhar com linhas Tá certo em vez do Space

around é o último é o Space evenly né OK então ele funciona dessa maneira Tá certo então Então isso que faz o justify contents que é isso aqui essa propriedade do justify contents ok aqui ele também mostra pra gente dentro do do W3 cool se você quiser você consegue visualizar Aqui também tá aí além do justify content a gente tem o align itens tá então o align itens Opa sai aqui sem querer o align itens ele faz o quê ele faz assim ó então deixa eu e vou deixar aqui em linha de novo ó deixar

aqui em linha em V spens evenly Vamos colocar eh Flex start beleza aqui eu tinha definido a altura mas eu vou tirar essa altura aqui tá E esse aqui também eu tinha deixado em coluna vamos deixar em linha e deixar aqui no centro no no início no start tá beleza então ó agora o o o align itens ele alinha eh os itens em si como como assim Então olha só vamos dar uma olhada aqui de novo no no elementor então perceba aqui dentro do elementor Eu tenho esse alinhar itens isso aqui é o Aline itens

tá então aqui no caso ele tá numa coluna de linha mas se eu quero que esses itens fiquem centr realizados ó então ele jogou tudo pro centro quero que eles fiquem no fim quero que eles estiquem tá então aqui no caso do botão ele não estica né porque el não tá com 100% dentro do container Pie dele mas aqui você consegue mudar o alinhamento nesse caso que como eu tô trabalhando com linha esse aqui é o alinhamento vertical tá mas se eu trabalhar com coluna passa a ser o alinhamento horizontal tá então isso é o

alinhar itens aqui dentro do flexbox tá vamos dar uma olhadinha nisso aqui na prática vou deixar essa aqui Cent só pra gente ver tá então se eu vi aqui nesse objeto é que aqui eu vou ter que deixar uma altura maior então aqui Vou definir de novo a altura opa não é aqui não é aqui a altura do content vou colocar o height de 600 pixels tá então beleza ó perceba que ele tá com esticando tudo por quê Porque como se tivesse marcado por padrão essa opção sticar tá só que no caso aqui não é

a opção sticar que a gente vai usar né aqui a gente vai usar agora o align itens tá então dentro do Aline itens eu tenho aqui e algumas opções por exemplo vamos deixar E o Flex start tá então ele ficou lá no começo mesma coisa como se tivesse e aqui Centralizado para cima tá aí eu tenho também o Flex é a mesma coisa que o de cima né só que aqui o Center né Então deixa o Center ele vai ficar a mesma coisa que tivesse marcado aqui ó no centro e aqui eu também tenho em

vez do Center eu tenho o Flex and tá que ele jogou tudo aqui para baixo como se eu viesse aqui ó e marcasse para baixo entendeu E aqui eu tenho algumas outras também que é aquelas que nós vimos tem o justify então é o é a mesma coisa que o justify na verdade né só que a gente tem um que chama Stretch tá então Stretch ele deixa eu ver se essa aqui é nomenclatura me sem o t no final tá Stretch pera aí não acho que é isso Stretch com T eh eu acho que eu

marquei errado aqui deixa eu fazer um teste aqui só para mim ver se é isso mesmo que eu não lembro exatamente se é o Stretch né então é deixa eu deixar aqui Centralizado só fazer um testezinho aqui para mim ver se eu tô falando a coisa certa para você então é o align content Line contents aí eu vou marcar Stretch tá só que eu tenho que colocar o importance na frente eu acho que tem o t aqui tá é enfim é mais fácil ver aqui na documentação né Então deixa eu ver aqui na documentação se

eu escrevi certo que eu não lembro se Ten o t ou não às vezes é ah não não tem ó então Stretch Stretch então é dessa forma que tem que escrever mesmo tá é aí aqui ó eu tenho que marcar at esse T que eu tava esquecendo né por causa disso que tava dando um errinho tá ó para você ver como programação você tem que prestar atenção em cada letra tá então ó stret é o que ele já vem por padrão que é a mesma coisa que eu viesse aqui ó e marcasse essa opção aqui

de esticar tá Ah mas por que que esse aqui não tá esticando porque ele não tá marcado com altura de 100% mas se eu viesse dentro desse objeto por exemplo ó eh pegar a classe dele elementor Button e marcar esse aqui que ele tem que ter uma altura de 100% tá deixa eu ver eu acho que talvez seja o Max height não sei exatamente qual propriedade que o elementor usa aqui ó deixa eu ver ou talvez não seja nem necessariamente essa classe Pode ser que seja o próprio objeto né e é não sei porque que

eu talvez elementor R container enfim você entendeu tá você entendeu o que eu quis dizer ah já sei mais fácil do que isso aqui tá vamos fazer o seguinte vamos pintar aqui o fundo tá então aqui eu vou vir aqui no fundo ó e vou pintar isso aqui de vermelho ó então perceba que ele tá ess cando tá agora agora se eu deixasse marcado aqui apenas início ó ele não estica o centro também não estica aqui também não estica mas no esticar ó ele puxa a altura máxima então é a mesma coisa que eu fizer

o Stretch aqui que Stretch significa literalmente esticar em inglês tá certo aí a gente também tem os as outras né que o Space between só que aqui não vai acho que não vai se aplicar tão direito né porque a gente tá é para isso aqui aplicar na verdade Eu precisaria colocar um GAP aqui né ou então o Space around também funcionaria aqui mas e nem para você ter uma ideia isso aqui nem o próprio elementor usa né então não tem porque ele usa esses qu aqui embora ele tem esses outros dois vamos dizer assim ocultos

né mas é possível colocar mas aqui quase se não usa Tá certo então é isso que faz o align itens Então essa mesma função do alinhar itens né que tem aqui dentro do elementor Tá certo então essa aqui é a outra propriedade do flexbox container e a gente tem também e uma outra propriedade aqui que é a seguinte e aqui dentro do do contêiner de forma visual a gente tem os gaps né se você tá utilizando uma versão um pouco mais antiga Talvez não tenha duas opções aqui talvez esse GAP tem apenas uma opção tá

eh o o o elementor quando ele atualizou agora ele passou a ter a opção de coluna e de linha Então você consegue controlar o GAP em coluna e o GAP em linha tá então aqui se eu deixar por exemplo zero ó os objetos vão ficar todos colados então o GAP é esse espaçamento que existe entre cada um dos itens que tem aqui dos flexbox items tá então eu posso deixar um 16 posso deixar um 50 que ele vai ficar um espaço maior posso deixar um 100 tá E aí como é que eu faço isso aqui

dentro da programação então eu posso deixar simplesmente aqui ó GAP tá então se eu coloco o GAP ele vai aplicar paraas duas direções tanto colunas como linhas então GAP de 50 PX tá olha lá ele criou esse GAP aqui tá mas só para você ver eh como ele a gente consegue também personalizar se eu quero GAP na coluna ou GAP na linha eu vou deixar esse objeto aqui em vez de deixar eh eles com largura de 200 Vamos colocar uma largura maior aqui de talvez 600 Tá beleza então ó ele tá quebrando como eu coloquei

o wrap então ele tá quebrando se eu colocasse no wrap ó ele não ia quebrar tá mas como eu coloquei o wrap então ele quebra tá e se eu deixo o 50 aqui ele vai aplicar tanto nessa direção Como nessa direção tá só que em vez de 50 Vamos colocar por exemplo zero ó então ele deixou deou tudo colado ah mas esse aqui ele não tá colando tá é por quê Provavelmente porque ele tá no eh não sei porque ele não tá colando Então deixa eu deixar Center é não sei para dizer porque que não

tá colando aqui talvez porque eu não definir uma altura Então vou colocar um Higt de 400 200 PX não Ah tá eu não sei exatamente porque que não tá colando é porque Ah tá eu acho que ele tá entendendo como se tivesse quebrando a linha talvez enfim mas você consegue controlar o GAP específico Se eu quisesse controlar o GAP da linha ó então GAP Row 100 ó n mas não sei porque não tá a Mas será que tá certo não é Row GAP não é não é GAP Row Desculpa então aqui é um Row GAP

ó então aqui o GAP já tá 1000 só que é um Row GAP Opa Row GAP tá só que eu vou deixar em vez de deixar tudo isso aqui eu vou deixar um ó Então posso aumentar para 10 ó posso aumentar para 100 tá então ele tá fazendo controlando o GAP apenas da linha tá que seria o mesmo que a gente viesse aqui ó e apenas controlar esse GAP aqui ó de linha então vezes 100 aqui quisesse 500 por exemplo não tá aparecendo porque os objetos Eles não estão quebrando né mas se eu tivesse usando

mais objetos aqui então vamos duplicar duplicar duplicar Então olha lá agora ele tá aparecendo Opa dupliquei o objeto como todo então duplicar esse aqui também Então olha só agora o GAP de linha ele aumentou para 500 mas se eu quisesse 200 ó Então em vez de 200 300 tá eh 400 tá então aqui você controla o GAP de linha e esse aqui o GAP de coluna então aqui é a mesmíssima coisa só que deixa eu tirar esse botãozinho daqui só que nessa situação aqui e a gente muda aqui como Row GAP né Então em vez

de 200 vamos deixar 100 agora se eu quisesse o GAP apenas aqui da coluna mesmo ao invés de Row GAP eu colocava colum GAP tá é que aí no caso sem ficou muita coisa ele quebrou né mas ó 1 10 e 20 30 se aumentar muito ele vai quebrar se ele passar da largura total do container né 50 não quebrou acho que se eu colocar uns 70 vai quebrar ó 70 ainda não quebrou 80 ainda não quebrou 90 vai quebrar lá quebrou entendeu mas por quê Porque tá marcado o wap aqui então se tivesse no

wraap ele não quebraria tá E aí você consegui cons iria controlar aqui o valor do GAP de cada coluna tá legal Então essas são as propriedades que a gente usa aqui dentro do flexbox container tá Então essas são as propriedades que a gente aplica no p são essas inclusive vou deixar essa documentação aqui para você ó ó lá o Aline contents que eu falei para você tem o Perfect Center então aqui a gente tá usando o justify content Aline né então aqui ele tá esse aqui é um macete Zinho para você deixar Centralizado perfeitamente né

então se você tá trabalhando com flexbox por exemplo ó vamos dizer que a gente tivesse Apenas Um item aqui ó apenas o exemplo um e eu definisse ele aqui com uma é largura de não deixar uma largura menor então deixar uma largura de 200 e aqui uma altura de 200 também tá Então olha lá para mim centralizar perfeitamente ele dá um macete Zinho né então você poderia deixar o desf content Center e o align itens Center então ó just fy contt e o align itens Center tá então ele fez o ele centralizou de forma perfeita

o meu objeto legal é um maczin que a gente pode usar também para ajudar a gente em questões de alinhamento Às vezes pode ser que a gente sofra um pouquinho tá certo certo mas beleza é assim que funciona essas propriedades aqui do flexbox container tá legal e agora na próxima aula a gente vai ver um pouquinho das propriedades dos flexbox items ou seja dos itens tá legal a gente consegue mexer tanto no contêiner que é o que a gente acabou de fazer aqui conhecendo essas propriedades como também nos itens que são os filhos diretos desse

contêiner