Propriedades dos flexbox items

agora a gente vai conhecer as propriedades dos flexbox items ou seja dos filhos dos flexbox container E para isso a gente também vai usar documentação dentro do W3 C para mim te mostrar como que funciona na prática tá então é os childs né ou os filhos por assim dizer os elementos né que são os flexbox items tá então aqui ó presta atenção eu vou fazer aqui em cima do mesmo jeito que a gente fez na aula passada tá aqui eu vou fazer utilizando elementor e aqui embaixo eu vou fazer utilizando o CSS mesmo na programação

para você ver tá então a primeira coisa que eu vou fazer aqui eu vou colocar alguns objetos aqui vamos colocar uns uns botões também né então vou colocar novamente alguns botões aqui ó eu vou deixar cada um deles de uma cor então duplicar duplicar duplicar tá beleza vamos deixar esse aqui com uma cor e no azul por exemplo Deixar um no azul esse aqui vamos deixar no vermelhinho Então vamos puxar esse aqui pro vermelhinho esse aqui vamos puxar pro roxinho roxinho e esse aqui vai deixar no verde mesmo tá legal então beleza ó eu tenho

as propriedades do pai lembra então Quais que são né a direção a linha aquela a coisa toda tá então eu vou deixar ele Centralizado aqui vou tirar esse alinhar itens aqui beleza então eu tenho aqui eh por não vamos vamos fazer o seguinte vamos deixar aqui centro tá então Ó eu tô centralizando aqui eh os objetos no P todos no meio mas digamos Se eu quisesse que por exemplo apenas esse em vez de ficar Centralizado aqui no centro ele ficasse aqui em cima como é que eu faria aí eu poderia usar essa primeira propriedade aqui

ó que é Ou melhor antes dela vamos ver o Order tá então o que que é o Order é a ordem dos objetos é a mais fácil de todas né então se eu vem aqui ó então ele tá nessa ordem primeiro o azul depois o vermelho vamos ter colocar aqui um um texto em cada um deles então vou colocar assim ó btn1 tá então esse aqui é o botão um esse aqui vai ser o btn que é o botão 2 esse aqui vai ser o btn que é o botão TRS esse aqui vai ser o

btn 4 tá Então olha só eles estão nessa ordem aqui por quê Porque foi a ordem que naturalmente eu coloquei eles o 1 2 3 e 4 tá mas se eu quisesse que o quatro por exemplo ficasse aqui em dois como é que eu faria eh eu poderia aqui se eu fizesse for fazer pelo elemento então o que que eu faria eu clicaria em avançado eu clicaria em início ó então ele jogou esse aqui no início tá só que aí Eu precisaria jogar esses outros aqui também para trás dele então VM nesse aqui colocar início

vi no dois aqui ó também colocar início e vim no um aqui eh é no caso aqui é o um também colocar em início né Colocar início aí na verdade esse aqui teria que jogar pro final ó Então esse aqui jogou para depois tá então eu teria que fazer por padrão dessa forma aqui no elementor tá ou então eu poderia vir aqui ó isso aqui pouca gente sabe que o elementor também consegue fazer às vezes até mais fácil de você organizar tá é clicar em personalizado tá quant então quando você coloca personalizado você cria uma

ordem personalizada pro elemento tá então esse aqui por exemplo eu quero que ele fique na posição um eu quero que esse aqui mas por que ele jogou para trás porque é o seguinte quando você não define quando você não define eh um uma ordem personalizada pro elemento é como se ele ficasse com a posição zero Então esse aqui vem na posição zero esse aqui na posição zero esse aqui na posição zero aí esse aqui ó eu defini a posição um nele tá então ele ficou na posição um ó então ele fez assim ó 0 0

0 1 então por isso que ele jogou nessa ordem tá agora se eu pego por exemplo esse esse três aqui coloco uma ordem dois nele ó então ele jogou opa pera aí que acho que não foi não não é os index é a ordem né então vou vir aqui em ordem e aqui vou colocar um dois nele ó então ele jogou para depois por quê Porque esse aqui tá na posição zero esse aqui tá no zero esse aqui tá no um e esse aqui tá no dois entendeu então é isso que faz a propriedade Order

tá aqui dentro do elementor mesmo eh aqui nessa opção né agora se eu como é que eu faria para mim fazer isso aqui na programação lá no CSS mesmo tá vamos dar uma olhadinha que a gente vai entender um pouco melhor agora vou colocar aqui um objeto HTML Vamos jogar aqui ele aqui pra página tá só vou deixar ele aqui Centralizado pra gente conseguir visualizar melhor beleza aí dentro desse objeto aqui vamos colocar uma div ó div Class colocar então Esso aqui vai ser o container P ó container Pie Ok dentro do container Pie primeiro

eu vou definir ele como um Vou definir ele como um display Flex né então display Flex ele vai ser e o Flex Direction linha né então ele vai ser direção de linha Row tá bele Beleza então ele tá na direção de linha Ok é aí aqui agora vamos colocar os objetos nele então V colocar aqui botões né então Colocar assim ó Button aí esse aqui vai ser btn1 tá aí esse próximo que nós vamos criar aqui vai ser um Button que vai ser o btn2 aí aqui depois vamos colocar também um terceiro botão que vai

ser o btn3 e aqui vamos colocar um quarto botão vai ser o btn 4 Tá beleza tá é vamos deixar ele Centralizado Então vou usar também o justify cont vai ficar Center tá para ele ficar Centralizado opa não é content não é o esqueci aqui agora é o align itens né então acho que é align o align cont align item Pera aí que agora bugou minha cabeça flexbox Direction não qual que era a propriedade mesmo para ele voltar então deixa eu ver aqui que eu já esqueci tá vendo Então é natural a gente esquecer a

gente tem que est sempre consultando né justify contents justify content Center Só se eu dig errado alguma coisinha Então vamos colocar aqui conten ah tá provavelmente por causa da largura né então acho que eu não devo ter deixado el com a largura vamos ver se é isso mesmo wiit 100% é bom que você já vê aqui na prática a coisa funcionando né é Não sei porque não tá indo será que é por causa desse botão Então esse aqui são os itens just F content Center é era Ah tá é que eu coloquei contêiner é contêiner

pai burro tá então aí não ia funcionar mesmo né tá chamando a classe errada beleza e aí vou colocar um gapz inho aqui ó de 20 pixels tá então beleza colocou um GAP de 20 e programação é isso tá Às vezes uma coisinha que você esquece já buga tudo por isso que tem que tá sempre vendo e às vezes é um joguinho de paciência também tá Deixa Eu Voltar aqui agora pro pras propriedades dos itens Tá beleza então estamos aqui na propriedade dos itens então a gente viu o Order tá agora Digamos que eu quero

que só para dar um estilinho aqui vai vamos colocar uma classe em cada um então V colocar classe btn1 aqui só para me deixar eles coloridinhos igual de cima senão a gente pode acabar confundindo né então aqui vai ser a classe btn2 aqui vai ser a classe btn3 aqui a classe btn 4 tá aí a gente vai vir e colocar o btn1 ele vai ter um background Eh vamos deixar igual o de cima Blue tá não vai ficar igualzinho né a cor dele ou seja o texto interno vai ser Branco certo e a borda não

vai ter border n Ok beleza aí eu vou fazer o mesmo aqui ó 2 3 4 então aqui vai ser o dois esse aqui vai ser o três e esse aqui vai ser o quatro só que a gente vai colocar aqui em vez de colocar Blue esse aqui vai ser o Red que é o vermelhinho esse aqui vai ser tá em tonalidade diferente mas só para você entender tá isso aqui vai ser o o roxo esse aqui vai ser o verde beleza Tá bom então tá tudo Centralizado Ok Maravilha tá agora vamos ver a propriedade

Order neles aqui ó então se eu quero por exemplo que o botão três venha pra primeira posição então eu ven aqui nele ó Order 3 tá só que ele jogou na frente por que ele jogou na frente por causa daquilo que eu expliquei para você que ó ele tá com o três então eu coloquei a ordem três nele só que aqui ó por padrão ele vem com a ordem zero quando a gente não especifica a propriedade border aqui neles então ele vem por padrão como se tivesse um Order zero aqui tá para mim mudar eu

teria que colocar uma ordem em todos de repente então venho aqui nesse ó coloco aqui ó só que aqui vai ser por exemplo Isso aqui vai ser Digamos que o um eu quero que esteja na esteja inverso então o um vai est na posição 4 o TR o dois vai est na posição TR o três vai est na posição 2 e o 4 vai est na posição 1 tá então ó ele inverteu tá Por quê Porque agora esse aqui ó o btn 4 tá na Order 1 então ele tá na posição 1 O btn3 que

é esse aqui ó ele tá na Order 2 ou seja na posição 2 o btn2 ele tá na Order 3 então ele tá aqui na posição 3 e o btn1 ele tá na Order 4 por isso agora ele ficou nessa ordem certinho como eu defini entendeu Então isso que faz o Order ele muda a posição dos objetos né Se eu quisesse que o três por exemplo tivesse no lugar e inverteu o três e o dois então aqui eu colocaria ordem três e aqui eu colocaria ordem dois tá então ele inverteu aqui esses dois Beleza então

isso que faz o Order e aí a gente consegue ver aqui no caso do elementor por exemplo ó se eu vi aqui em inspecionar ó ó olha que interessante uma coisa né então se eu viesse por exemplo aqui colocasse nesse aqui ó marcasse essa opção início o que que o elementor faz ele coloca um valor negativo aqui tá Então olha lá vamos inspecionar isso aqui ó é isso inclusive é um hackz inho o elementor fala aqui que é um Hack né Então olha só na hora que eu ven aqui ó e e faço uma inspeção

nele deixa eu ver vai ser esse objeto aqui tá Olha só olha aqui ó Order - 999 ele colocou um valor negativo ele fala que que é Order start hack é um hackz inho que o próprio elementor faz né só que aqui em vez de ser eh se se eu quisesse fazer isso aqui mesmo né então Digamos que eu não quero definir o Order pros outros ó então não quero definir o Order pros outros e quero jogar o quatro lá pra frente eu não quero definir pros outros como é que eu poderia fazer eu poderia

fazer assim ó o Order colocar um valor negativo por exemplo os1 tá então ele jogou para trás por quê Porque aqui eu estaria com -1 esses outros aqui que não estão definidos com nada ele tem a ordem no zero tá então tô fazendo esse haack de jogar ele para trás certo é mais ou menos o que o elementor faz aqui só que aqui no caso do elementor ele coloca um valor maior que ele coloca o menos Opa - 9 9 9 9 na ordem tá agora se ele se fosse o contrário né então vamos tirar

esse aqui vamos tirar o início se eu quesse jogar esse btn1 aqui pro final o elementor El escolho essa opção aqui final no elementor E aí ao invés de ficar quer ver ó vamos atualizar ao invés de ficar - 999 quando eu inspecionar o elemento ó Então inspecionar esse objeto aqui que é exatamente esse aqui ó ele me jogou a posição agora sem o menos ou seja no valor Positivo tá então isso é um hackz inho ó é order and hack o elemento faz essa esse hazin aqui entendido Beleza então isso que é a primeira

propriedade que a gente vê aqui nos filhos mesmo nos item que é o Order é a mais simples de todas tá aí depois do Order Vamos tirar essa Order daqui vamos deixar o formato padrão mesmo tá aí depois do Order existem umas outras propriedades que a gente consegue colocar aqui que é por exemplo o align self tá então o que que é o Aline self aí agora sim deixa eu voltar aqui que tem o align self e vamos vamos ver Ah não isso aqui é o contêiner né é os itens na verdade então ele tem

aqui o align self tá eh o que que faz o align self ele alinha o próprio objeto então Digamos que eu tivesse por exemplo com esse botão aqui ó esses tá tudo Centralizado aqui no Pie né Então deixei eles aqui ó alinhar itens deixei no centro só que eu quisesse que esse aqui por exemplo tivesse aqui embaixo como é que eu poderia fazer isso então eu poderia vir nesse próprio objeto aqui e mudar aqui ó o alinhar-se ó então jogo pro final tá então esse alinhar-se aqui que tá nessa opção do avançado ele é a

mesma coisa com a Line self que a gente vai ver aqui eh na programação agora então teria que vir aqui por exemplo no botão três ó nesse caso aqui é é que aqui eu mudei a ordem né Deixa eu tirar esse negócio de ordem eu tinha eu tinha mudado alguma coisa da ordem esse aqui que eu joguei para trás Então vamos tirar né só para ficar igual o de baixo né aí esse de baixo aqui o btn3 ó eu teria que vir nele e colocar aqui um Aline self tá e eu jogar ele para baixo

aí eu teria que usar o Flex end tá Não não é Flex Ah tá é por que que ele não foi por causa que ele vai variar de acordo com a altura do pai né então esse objeto aqui ó e ele tá dentro desse desse html mas esse HTML tem uma altura que tá definida fixa Então deixa eu deixar uma altura maior aqui nesse container p vou colocar um High por exemplo aqui de 500 pixels tá então beleza tá Ah tá só que ele tá fazendo um Stretch não não queria que ele fizesse um Stretch

é bom então deixa eu ver uma coisa Ah tá é que por padrão ele tá vindo strat né então eu poderia vir aqui nesse objeto aqui ele vai ter Qual que é a opção mesmo deixa eu ver se eu lembro aqui é o align o justify content acho que eu não não é o align itens né então Aline é align itens acho então align Aline itens ele vai ser o Center tá é Beleza então agora ficou igual só que eu quero jogar esse daqui para baixo igual o outro né então como é que eu faria

então teria que vir aqui no btn3 ó e colocar aqui o justify não é justify não é o Ah esqueci o Aline self align self aí aqui sim eu colocaria o o Flex end tá coloquei Flex end ó ele fez a mesma coisa que essa opção aqui fez ó que dentro do próprio objeto né que não é mais o contêiner agora é o filho dele o item que nós estamos mexendo então ele jogou o o Aline self Aqui para baixo tá E aqui nesse roxinho a mesma coisa ó jogou o Aline self para baixo Ah

eu quero que esse verdinho esteja para cima então em flex end a gente usaria ó o Flex start ele jogou lá para cima ser a mesma coisa que VM aqui e marcar aqui ó alinhar-se para cima entendeu E aqui também ah eu quero que esse aqui stique então eu poderia vir aqui e clicar em estee cara ó ele esticou tá Ah mas por que eu não preencheu inteiro porque isso aqui tá aplicado pro é é porque o elemento ele usa uma div antes de usar o próprio elemento né do botão agora no nosso caso aqui

não se eu vir aqui marcar ó no btn2 é Aline self aí eu tenho o Stretch Stretch Olha lá então ele é subiu o próprio objeto tá ele esticou o objeto isso que é o Stretch lembra sticar Tá certo e aí se eu quisesse centro mesmo então digamos tudo aqui em vez de est alinhado no meio em vez de Center ele tivesse não Flex start ó aí eu quisesse jogar esse azulzinho só o azulzinho para baixo então poderia vir aqui no btn1 que é o azulzinho colocar um align Aline cont não Aline self Aline self

e jogar ele para Center tá então ele jogou pro meio tá Seria a mesma coisa que eu também tivesse esse contêiner aqui alinhado pro início Opa início não aqui alinhado para cima e apenas esse eu viesse aqui marcar essa opção centralizada tá então é a mesma coisa que a gente faz Só que eu utilizando os recesses Tá certo então deixa eu voltar tudo aqui pro padrão que tava ó tirei o Aline self Ok Aline itens aí esse aqui também ó eu vou tirar o aqui tirar o final e vamos deixar isso aqui tudo Centralizado Tá

beleza então isso que faz essa propriedade do align self que é essa aqui ó Tá legal aí além dela a gente também tem o Flex grow Tá o que que o Flex grow faz eh ele vamos dizer assim ele tenta adaptar a a altura do o tamanho do conteúdo vamos clicar aqui nele ó Flex grow pra gente ver melhor tá Então olha só aqui em flex grow é o padrão o valor padrão dele é zero tá então deixa eu ver se eu consigo especificar isso aqui para você de uma forma como é que eu posso

mostrar isso aqui eh eu acho que você vai fic mais fácil mostrar aqui dentro do do próprio w3c né então vou clicar em try to yourself ele fez aqui um código para nós tá e olha só o que que ele tem aqui vamos analisar ele tem eh um flexbox container que é essa div aqui que é a div Pie tá E ele tem uma eh tá aplicando isso aqui paraas dives filhos dele então esse filho aqui esse filho e esse filho tá então quando eu uso o Flex o Flex grow um então ele vai é

Eh vamos deixar tudo um aqui só para você então deixei tudo um cliquei em Run ó então quando eu deixei tudo um aqui ó então é como se cada um deles ele ocupasse um espaço dividido por três né então aqui se eu deixar dois esse aqui ele vai ocupar o dobro então a o ponto três que é esse aqui ó em vez de deixar um aqui eu vou mudar para dois para você ver então mudei para dois aqui ó clico em Run ó então ó agora ele tá tentando ocupar mais ou menos o dobro e

Ou seja a metade 50% vamos dizer assim né É como se é como se isso aqui fosse o valor total dessa div fosse 100% e quando eu coloco um É como se eu tivesse dividindo né se eu coloco um Em todos ele vai dividir pela quantidade de itens se eu tô usando três itens é como se fosse mais ou menos 33% agora se eu coloco dois aqui ó ele pegou mais ou menos 50% ó então isso aqui é o pai esse espaço cinza né então então quando eu coloquei o dois aqui ó é como se

ele ocupasse duas peças de quatro então ele soma todos ó 1 2 3 4 somou todos só que esse aqui vai ocupar dois espaços então ele pegou 2/4 por assim dizer ou seja 50% mais ou menos né E aí ó nesse caso aqui o um esse ele seria equivalente por assim dizer a 25% e esse aqui equivalente também A 25% tá não sei se deu para entender Às vezes é um pouquinho confuso mas ó se eu quizesse um três aqui então ele ocuparia o triplo então coloquei três eu clico lá em Run para ele processar

o código e olha lá agora ele ocupa Ah eu quero que esse daqui ele ocupe três também então coloquei esse aqui trê ó click em Run tá então ele soma como se ele pegasse tudo isso aqui ó dividisse por já sei vamos fazer o seguinte esse um aqui vamos deixar qu ó Run Ok então aqui é como se fosse 40% ó Então ele pegou 40% esse daqui é por que que dá para entender 40% porque eu tô usando número inteiro que ele vai dar certinho a soma em 10 né então 4 + 3 vai dar

7 + 3 vai dar 10 tá então aqui é como se fosse os 40% esse esse daqui é como se fosse os 30% tá porque tô usando um três aqui E esse outro aqui também é como se fosse 30% tá então mais ou menos essa a ideia que dá para entender né Ah mas eu quero que esse aqui também esteja 40 esse aqui esteja 20 então Eu mudaria aqui ó Talvez para quatro Flex grow 4 e aqui talvez 20 também tá dois então clico em Run ó então ó é como se isso aqui fosse 40

agora esse aqui em vez de ser 30 passa a ser 40 né então como se fosse 40% e esse aqui em vez de ser 30 passa a ser 20% ou seja como se completasse o 100% porque por que 100% porque aqui eu tô usando número de 10 mas se fosse um outro número quebrado em vez de de seis e aqui Talvez um um sete aí coloco clico no Run então ele mesmo já calcula como se fosse esse valor de 100% entendeu Não sei se deu para entender ou não mas eu acho que aqui com os

exemplos visuais deu pra gente entender um pouco melhor o que significa esse Flex grow tá certo aí além do Flex grow eu tenho também o Flex shrink tá então o grow ele faz o objeto crescer grow significa crescer em inglês né e o shrink ele faz o negócio diminuir tá Então olha só aqui também vou colocar um exemplo aqui que vai ficar mais fácil pra gente entender colocar try try It Yourself ele vai mostrar aqui na prática para nós tá então aqui ó só que aqui eu tô com muitas muitas div né Então olha só

eh aqui por exemplo eu tô com um um uma div de flexbox container que é essa aqui ó Flex container tá então ele tá aqui tudo do do jeito que a gente precisa E aí ele tem aqui ele tá aplicando para cada uma das dives filhas né Então tá aplicando para cada uma delas só que apenas na três ó ele colocou um Flex shrink em zero Então o que aconteceu se ele se eu tirar esse Flex shink aqui ó vamos tirar ó Então vou tirar ele aqui ó e clico em Run então ele vai ficar

todas por padrão Tá e agora eu quero que o três dê um shrink ou seja eh dê uma diminuída por assim dizer eu clico lá em Run ó então o que que ele fez ele diminuiu as outras na verdade para caber a três né então se eu colocasse um Flex grow aqui ó em vez de ser dessa forma colocasse um Flex grow ó ele não ia fazer nada só se eu colocasse um valor de dois de três por exemplo então aí ó ah não ele também não vai fazer nada porque eu não defini o grow

pros outros né mas quando eu coloco o o shrink ele aplicou somente a ela né então aqui em vez de zero ó lá coloquei zero ele vai crescer só o três em vez do do zero Vamos colocar um quatro aqui ó então Run ó então ele diminuiu mais ainda porque o shrink é o inverso enquanto o grow quanto maior o valor do grow maior ele cresce o shrink quanto maior o valor maior ele diminui entendeu então aqui em vez de de quatro eu poderia colocar Talvez um então ó ele vai crescer um pouco mais ó

que é o padrão que ele já tem ele já vem como um como se fosse o 100% dele né se eu coloco aqui um 10 ó vai diminuir ainda mais É que na verdade assim ele diminui é não diminui mais do que isso porque é o tamanho do conteúdo que tem dentro né então não deixa ficar menor do que o tamanho do conteúdo que já tem dentro que no caso é o número três aqui né mas se eu colocasse um dois por exemplo aqui ó ó lá ele diminuiu mais um pouquinho se eu colocasse um

um ele ia diminuir é ficar do tamanho certo né então colocar um três aqui ele ia diminuir mais um pouquinho ainda ó tá então colocar do três Vamos mudar pro dois para você ver ele crescer um pouquinho ó crescer um pouquinho entendeu então basicamente isso aqui o shrink também certo e aí tem esse Flex bases né então o que que é o bases aqui eu já defino um valor base ó então Ó olha Olha só vamos ver a tradução aqui ó diz assim ó o Flex base especifica o comprimento inicial de Um item flexível então

se eu quisesse definir eh um Opa cliquei no lugar errado se eu quisesse definir um valor inicial para esse item flexível eu usaria o Flex base tá a gente não usa tanto Flex base mas é importante que você saiba né então ó aqui eu coloquei 200 pixels então ele tá dizendo que o container 3 tem que começar a partir de 200 pixels tá ele não diminui mais do que isso é como se fosse um um mínimo wids um min wids que a gente usa lá nas propriedades do CCS Tá certo então a gente consegue ver

isso aqui na prática também ó em vez de ser 200 colocar um 300 aqui ó coloquei 300 e coloco em Run então ele aumentou mais aí eu quero que esse dois aqui ele comece ó então colocaria um Style eu quero que esse dois aqui ó ele comece com Flex bases e então ele tem que ser pelo menos 100 pixels tá Então olha só o que vai acontecer ó não acho que já tá em 100 pixels na verdade né Então deixa eu ver se eu colocar um 50 aqui ó Run ó então ele começou no 50

Tá certo essa é a base dele e aí além dessa a gente tem aqui o próprio Flex né então que é essa outra propriedade aqui cadê ó essa outra propriedade que é o Flex então o Flex que que ele nada mais é ele é um short Hand também tá então Ó o Flex ele é um sh Hand do Flex grow Flex shrink e Flex bases tá então em vez de ficar digitando cada uma delas Flex grow Flex shrink Flex base se você quiser aplicar as três no mesmo objeto você coloca simplesmente um Flex na frente

né do item né não é do contêiner pai é do item que nós estamos vendo aqui e eu coloco aqui os valores que eu quero 0 0 e 200 pixels por exemplo tá vamos ver isso aqui na prática também ó então aqui em vez de colocar eh esse aqui é o grow então ele começa assim né ele começa com o grow depois o shrink e depois o bases né então se eu coloco aqui no no grow dele eu quero que ele cresça talvez três aqui ó o shrink ele vai ficar em zero ó Então olha

lá ele cresceu três e ele começa a partir do 200 né então aqui não faria muita diferença porque ele tá passando do 200 ó então se eu executar de novo tanto faz se ele tá no zero mas por quê Porque ele tá passando de 200 mas se ele não tivesse aqui tivesse um por exemplo ó e aqui tivesse 200 ele leva em conta o quê o bases né então que o um também acho que ele vai passar então vou deixar zero aqui ó ó aí no caso do zero ele leva em conta o base tá

Por quê Porque o base aqui ele vai ficar maior deixar 300 ele fica maior do que o o Flex mas se aqui eu coloco um ó então ele vai pegar enquanto um tá ele vai preencher aqui até porque eu não tô definindo nada no estilo dessas outras aqui tá certo acho que deu para entender né eh e aí Marcelo por que que eu preciso saber de todos esses detalhes porque às vezes no dia a dia pode ser que você se encontra com uma situação que você precisa usar tá então eh aqui às vezes pode parecer

um pouco não tão útil a gente cada uma dessas propriedades Mas mesmo que você não lembre depois delas mais pra frente não tem problema porque primeiro que você pode sempre consultar a documentação aqui na hora que você quiser Ah então tô em dúvida sobre uma propriedade não lembro exatamente como ela funciona É simples você entra aqui no site do W3 curs por exemplo e Ó tem tudo aqui então você consegue ver o flexbox consegue ver outras propriedades tá E aí na hora que você precisar usar Às vezes você pode lembrar e você consegue vir aqui

para consultar Tá certo e outra coisa também é que aqui a gente entende como ela funciona mas no dia a dia dependendo da situação você precisa adaptar o código para para ele funcionar exatamente como você precisa que funcione tá Então essas são as propriedades dos flexbox items tá então a gente viu o o os flexbox pais né que é o flexbox container e agora os flexbox filhos diretos que são os os itens tá ent flexbox items Tá certo agora que a gente entendeu Então como que o Flex funciona que é essa forma que eu te

mostrei agora a gente vai passar paraa outra propriedade que em vez de usar o display Flex a gente vai agora pro display Grid vamos entender um pouco sobre o display Grid agora nas próximas as aulas