FLEXBOX: Guia Completo para Iniciantes em CSS

Oi eu sou a Lari e nesse vídeo eu vou te mostrar tudo que tu precisa saber sobre flexbox para deixar as suas páginas bem estruturadas organizadas e responsivas vou te mostrar na prática aqui como que a gente pode usar o flexbox mas antes de tudo a gente tem que entender algumas noções básicas né do que é o flexbox e porque a gente precisa utilizar ele né basicamente o flexbox ele é uma caixa flexível que fornece né uma maneira mais eficiente de tu poder organizar alinhar né distribuir o espaço entre os itens de um contêiner mesmo

quando o tamanho desse item ele é desconhecido e a gente usa o flexbox alterando a propriedade display de algum elemento então eu vou mostrar na prática para vocês agora como que a gente pode fazer isso e vou te mostrar todos os conceitos por trás do flexbox Então vamos lá eu criei aqui uma pasta né arrastei aqui ela para vs code e criei alguns arquivos aqui eu criei o arquivo index HTML e eu também criei o styles.css não organizei muito estrutura de passo nem nada porque vai ser só para eu conseguir mostrar para vocês certinho o

flexbox então aqui eu criei estrutura padrão pode clicar no ponto de exclamação e dar um enter para isso e aqui dentro do Body eu vou colocar um contêiner Então vai ser uma div que vai ter a classe ou ID de contêiner e também vou criar os itens para esse contêiner então aqui eu vou criar por exemplo três itens Então vou botar o item um vou duplicar e vou botar mais dois e eu iniciei o HTML com Live server então eu cliquei com o botão direito abri com Live server pode baixar essa extensão aqui nas extensões

e agora tu pode começar né depois de tu abrir ele a gente já consegue ver certinho então tá Por que que eu fiz isso porque eu coloquei um contêiner e os itens desse dentro desse contêiner no flexbox a gente tem duas maneiras de trabalhar com ele com as propriedades do pai do parent e as propriedades do filho né que seriam o Children os Children seriam os itens e o parent seria o container Existem algumas priedades que tu passa pro parent e algumas que tu passa pro Children como que a gente diz né que o nosso

que a nossa div né ela vai ter o display flex como que eu falo para ela isso eu posso botar aqui a classe container e digo que o display dela é Flex então a gente já pode utilizar né com isso todas as propriedades que contém o display Flex mas pra gente conseguir ver alguma coisa eu vou botar aqui no item uma corzinha para ele um tamanho pra gente conseguir ver certinho então pro item eu vou colocar uma uma largura uma wid de uns 200 pixels e eu vou botar também uma altura de 200 pixels mas

pra gente conseguir ver alguma coisa eu vou colocar uma corzinha de fundo então um background color Deixa eu pensar pode ser um roxinho eu gosto de usar as cores do Tail Wind Colors que eu acho que são cores bem legais que são desse aqui vou colocar uma cor pro fundo pro Body também pra gente não perder a nossa visão vendo essa tela branca o tempo todo então deixa eu começar estilizando o body então eu vou pegar pode ser esse marronzinho aqui eu vou botar aqui no Body Então vou botar Body background color e essa cor

aqui aí a gente não precisa ficar vendo aquela tela branca e daí pro contêiner eu vou colocar uma cor de fundo também então eu vou colocar uma background color de hash deixa eu ver aqui uma cor legal pro contêiner acho que fica legal esse rostinho aqui deixa eu colocar ele aqui e eu vou colocar um azulzinho pro nosso item então aqui eu coloco o azul a gente consegue ver certinho agora o nosso contêiner seria essa essa parte aqui o display Flex ele tem como padrão a largura ocupar toda a tela e no item ele teria

como padrão né no filho ele tem como padrão ocupar só o espaço que o item tá contendo basicamente assim só que aqui eu defini uma largura e uma altura se eu tirar né ele vai ocupar só o espaço dele mesmo o mínimo espaço possível só que daí se eu definir uma largura e uma altura ele vai ocupar o espaço que eu defini para ele a propriedade que a gente usa no flexbox para colocar um espaçamento entre os itens para não precisar ficar colocando Margin left e Margin right em cada elemento a gente simplesmente vem aqui

no contêiner que é o parent e coloca um GAP a gente pode colocar aqui a quantidade de espaço que a gente quer o espaço ele vai pegar horizontalmente e verticalmente então caso eu tenha mais dives aqui embaixo ele vai colocar um espacinho entre elas também depois eu vou te mostrar isso na prática daí para tu ver como que funciona eu vou colocar uma altura para esse cont para ser um pouquinho maior pra gente conseguir ver um pouco melhor então eu vou colocar uma altura pode ser de uns 600 pixels para ficar um pouquinho melhor a

nossa visualização o Flex Direction a gente coloca no parent ele é um elemento do Pai então a gente coloca aqui Flex Direction e ele tem alguns tipos né o padrão do Flex Direction é o tipo Row que é a linha como ele tá aqui agora mas a gente pode alterar ele e colocar o tipo Colon que faria com que ele fosse uma abaixo do outro né a gente também tem o Colon reverse mas para vocês conseguirem ver eu vou ter que trocar esse texto aleatório que eu coloquei aqui e vou colocar ele em números a

gente consegue ver melhor então o colum reverse faria com que ele invertesse a ordem né fica ficasse de ponta cabeça então o um que era aqui agora vai passar a ser embaixo e o três vai ficar no lugar do um normal Ele ficaria assim só com o Colon Ele ficaria assim né a gente também tem outra propriedade que é o Row reverse que ele seria como o Colon reverse só que a linha ao contrário se tu reparar bem ele bota ao contrário mesmo né ele bota até onde é que era o espaço ele passa pro

lado né então o que que o Flex reaction faz basicamente né ele estabelece né qual vai ser o eixo principal se vai ser o eixo X ou o eixo Y e ele define uma direção que os itens que estão dentro do contêiner vai ter e eles Estão dispostos em ou linhas ou colunas né são os dois tipos que ele tem a gente tem também a propriedade Flex wrap mas para mim conseguir te mostrar o Flex wrap eu vou ter que adicionar algumas outras divs então eu vou botar aqui umas seis dives e botar aqui 4

5 e seis uma coisa do display Flex é que ele tenta adaptar o tamanho para caber os elementos na tela né Ele é responsivo por padrão então se tu não quer que ele diminua o tamanho quando tiver muitos itens muitas dives tu pode colocar aqui a propriedade Flex e do tipo wraap o padrão né é o no wraap mas daí tu pode trocar e colocar o wraap ele vai fazer com que quando não tiver mais como caber elementos naquela linha ele vai quebrar pra linha abaixo Deixa eu tirar esse Row reverse daqui pra gente conseguir

ver melhor como que ele ficaria né Ele fica mais ou menos assim e ele tem como um padrão também ocupar esse dar esse espaço aqui né por conta do contêiner então ele tenta se adaptar aos tamanhos que tem aqui dentro a gente tem também o wraap reverse Então seria tipo como se fosse o colum reverse só que com o wraap ele vai quebrar ao contrário ele vai trocar a ordem dele e quebrar ao contrário Então seriam mais ou menos essas três propriedades que a gente tem no wraap na prática a gente usa normalmente só o

wraap né mas em algum caso específico Pode ser que tu use o wraap reverse então recapitulando por padrão né todos os itens eles tentam caber em uma linha só que para tu alterar isso E permitir que os itens sejam agrupados conforme o necessário a gente consegue colocar essa propriedade eu te mostrei antes o Flex Direction né e agora eu te mostrei o Flex wrap a gente tem o flex flow que ele é como se fosse uma um atalho uma abreviação dos dois juntos então se a gente colocar aqui flex flow a gente consegue definir a

coluna E qual vai ser o Flex wrap dele então a gente pode botar aqui por em primeiro lugar a gente define a coluna A gente define o o tipo dele se ele vai ser Row ou colum então por exemplo eu boto aqui colum e depois a gente diz se ele é Wap Wap reverse então a gente pode botar aqui Wap mais ou menos assim se aqui eu colocar Row Ele ficaria daquele outro jeito né com padrão só que quebrado então a gente pode usar esse atalho para não precisar escrever os dois caso a gente Queira

mudar os dois tipos então aqui eu vou botar colum de novo para tu ver como que fica eu vou comentar essa propriedade aqui para mim conseguir te mostrar outras coisas então agora eu vou te mostrar o justify content que a gente usa normalmente para alinhar uma div no centro eu vou tirar novamente esses elementos aqui eu posso comentar eles só pra gente conseguir ver um pouco melhor novamente então agora a gente vai usar o justify content o justify content também é uma propriedade que a gente usa no parent então a gente vem aqui no contêiner

e bota justify content a gente tem vários tipos como tu pode ver aqui né mas os mais comuns e os mais usados São o Flex start Flex end Center como padrão ele é Flex start que é aqui no início então se eu colocar Flex start não vai mudar nada se a gente colocar Flex end ele vai lá pro final então ele vai ficar assim ah e lembrando o jfy content ele alinha os elementos horizontalmente no eixo X a gente tem também o Center o justify content Center que normalmente é pra gente alinhar a div no

centro as dives né a gente tem também o Space between ele vai fazer com que coloque o mesmo espaçamento em cada um dos elementos a gente temm também o Space around que vai ser distribuído um espaço ao redor também o mesmo espaço ao redor de cada um então aqui vai ser o mesmo espaço que vai ter do lado dele e aqui também o mesmo espaço em cada um dos lados e a gente tem também o Space evenly que ele vai fazer quase a mesma coisa do Space around só que ele vai colocar o mesmo espaço

entre eles pro espaço ser igual entre cada um deles Contando os lados na prática a gente usa mais o Space betwin e coloca um pading dos lados mesmo mas assim é bem interessante saber que essas funcionalidades elas existem né que tu pode usar elas a gente tem também o align items que a gente quase sempre usa junto com o justify content para alinhar uma div Então deixa eu colocar aqui o justify content Center de novo para conseguir te mostrar então eu vou botar aqui o align item Center e pronto nossas dives estão centralizadas né estão

no centro da nossa página a gente tem alguns tipos de align items o padrão também é é o Flex start ou só start que vai ficar em cima a gente tem também o end que vai ficar abaixo o Center como eu te mostrei antes que vai ser o que vai ficar no centro e esses são os três tipos mais comuns eu te mostrei antes sobre o GAP né Deixa eu te mostrar agora o Row GAP e o colum GAP e como que a gente pode usar os dois juntos então deixa eu tirar essa altura dessa

div aqui para conseguir ver um pouco melhor e eu também vou adicionar essas outras dives novamente e vou vou adicionar o Flex wrap novamente também então Flex wrap de wrap para ele quebrar eu só vou tirar o justify content Center vou comentar ele e assim Acho que tá bom tá vendo que aqui a linha horizontal e a vertical elas estão com o mesmo espaçamento a gente consegue alterar cada uma delas se tu quiser a horizontal um pouco maior tu consegue colocar tu pode fazer isso abreviadamente que é como a gente fez lá o outro né

o flex flow a gente pode botar o primeiro é o da linha então o da linha vem primeiro e o segundo é o da coluna Então se aqui eu quiser colocar que a coluna vai ter 30 pixels ele vai ficar com 30 pixels então aqui seria a forma abreviada se eu colocar aqui 100 pixels na linha ele vai pegar 100 pixels então é aqui é linha e aqui é coluna mas se eu quiser fazer separadamente deixa eu comentar aqui para te mostrar se eu quiser fazer separadamente eu posso colocar um Row GAP de por exemplo

10 pixels então ele pegaria só na linha e se eu quiser colocar só na coluna eu posso colocar um Colon GAP por exemplo 30 pixels posso comentar o outro para te mostrar e se eu comentar o outro ele vai pegar só na coluna Então essas são as duas formas de fazer as três na verdade se tu quiser fazer da forma abreviada tu pode fazer da da forma abreviada também é bem legal eu acredito que eu passei por todos os elementos mais importantes que a gente consegue colocar no parent E agora a gente vai trabalhar em

cima do item vou te mostrar o que que a gente consegue fazer nesse item aqui então deixa eu colocar um GAP aqui um pqu melhor para ficar um pouco melhor de ver então pode ser mais ou menos assim então uma propriedade bem legal que a gente pode usar é o Flex grow que a gente coloca no item a gente pode colocar uma classe para cada um eu vou colocar só em um pra gente conseguir não precisa colocar em todos normalmente a gente colocaria um ID na prática né então a gente botar aqui por exemplo o

item três e eu quero mudar só o item três então eu vou botar aqui o item três e eu quero colocar um Flex grow para ele o que que o Flex grow faz ele basicamente vai determinar a quantidade de espaço disponível dentro do contêiner que o item ele deve ocupar se eu disser que o Flex grow dele por exemplo é um ele vai ocupar mais espaço do espaço que está sobrando para ele então deixa eu tirar aqui esse widget e essa Red aqui para conseguir te mostrar a altura eu vou deixar na real só vou

tirar a largura então se eu tirar esse Flex grow agora o espaço que vai sobrar Vai ser todo esse espaço aqui se eu disser que o item TR ele tem um Flex roll de um ele vai ocupar Todo o espaço que sobrou para ele se eu botar por exemplo aqui Um item seis por exemplo então item traço seis e colocar aqui uma aqui no CSS o item seis e dizer que ele tem um Flex grow de dois por exemplo ele vai distribuir os espaços então o três ele ainda vai ter um Flex grow só que

ele vai ter um Flex grow menor do que o item seis o item seis ele vai ocupar um pouco mais de espaço Então essa forma é legal para tu conseguir fazer alguns layouts né a gente também tem a propriedade contrária entre aspas do Flex grow que seria o Flex shink ele define a capacidade do item de diminuir então o padrão é um então no um não muda nada mas se eu colocar um dois por exemplo Deixa eu tirar esse Flex grow do item seis aqui e vou adicionar de novo essa largura pra gente conseguir ver

um pouco melhor acho que eu vou tirar esse Flex wrap não sei se vai precisar é vai precisar Deixa eu tirar esse Flex wrap aqui porque eu não quero que ele quer então tá vendo o item três que ele tá menor que os outros ele vai diminuir na metade dos outros itens então ele vai diminuir proporcionalmente um pouco mais do que os outros itens a função dele é basicamente essa na prática Eu também ainda nunca cheguei a usar mas acredito também que em algum caso muito específico tu precise disso outra propriedade que a gente tem

que a gente pode colocar no Children é o Flex bases e o Flex bases ele vai servir para definir um tamanho específico que tu quer para aquele item específico então ele é como se fosse o Flex grow só que com um tamanho por exemplo em pixels ou porcentagem Rem em um tamanho realmente específico para ele então eu vou colocar aqui por exemplo no item três um Flex bases de por exemplo 20 pixels então eu vou definir um tamanho específico só pro item três que seria de 20 pixels Se eu colocar por exemplo de 100 pixels

ele vai ter 100 pixels então ele vai definir o tamanho padrão de um elemento antes que o espaço ele seja redistribuído então tu consegue definir um tamanho específico o que tu quer para ele e a gente tem a propriedade Flex que ela vai juntar esses três tipos de propriedades em um lugar só o Flex Row o Flex shrink e o Flex bases em um lugar só como se fosse aquele GAP que eu te mostrei antes né aquele atalho a gente pode colocar aqui no Flex então a ordem seria primeiro o grow depois o shrink e

e depois né o Flex bases então se eu quiser por exemplo aqui nesse item um Flex grow de dois eu boto só um dois aqui se eu quiser o shrink de dois também eu coloco dois aqui e o Flex base vou botar 30 pixels então ele ficaria mais ou menos assim só que fazendo dessa forma é a abreviação ela vai definir os outros valores de uma forma mais inteligente então ele consegue fazer um cálculo e ver certinho quanto cada um vai precisar então assim é uma forma bem legal de tu poder usar essa função também

a última função que eu quero mostrar aqui para vocês é o align self e tu consegue alinhar só um elemento como se fosse o align só que só para aquele elemento Então deixa eu colocar aqui no item três por exemplo esse Aline Cell só que para mim conseguir te mostrar eu vou ter que botar uma altura pro nosso contêiner de novo deixa eu colocar uma uma Red para ele de novo e tirar esse align item que eu coloquei aqui então assim eu acredito que eu já vou conseguir te mostrar no align selfie a gente vai

usar quase as mesmas coisas que a gente usa no justify content e no align items então aqui a gente pode colocar por exemplo um Center então no Center ele colocaria só aquele elemento que eu coloquei Ok no centro A gente pode colocar também o Flex end então só o Flex end ele iria pro final ele tem como padrão também o Flex start então se eu não colocar nada ele vai ser com padrão de full né Flex start a gente também tem o baseline e o Stretch para usar nele também tem uma outra propriedade que eu

me lembrei agora que ela é o Order então a gente consegue definir a ordem dos elementos por exemplo o item três eu posso colocar uma ordem para ele de por exemplo dois ele vai lá pro final porque a ordem dele é maior que a dos outros Mas como que ele é maior que a dos outros né porque o defu ele é zero então todos esses aqui estão com uma ordem zero então eu teria que definir que algum outro elemento tenha outra ordem então por exemplo eu posso botar aqui que o item seis ele tenha uma

Order por exemplo de três ele voltaria pro final e o três ficaria por penúltimo né porque o três ele é menor do que o seis na ordem que eu coloquei aqui então ele se comportaria assim então para mim colocar ele aqui no início eu teria que definir ele com uma ordem menor que as outras então eu teria que colocar por exemplo um men1 então ele iria pro início como o padrão é zero todos eles TM como defu né com padrão zero então tu tem que colocar um número negativo para mudar a ordem dele ou tu

pode colocar todos os itens e definir uma ordem para todos os itens e daí tu definiria né qual seria o zero e a partir do zero tu definiria a ordem deles Então essas são as propriedades mais usadas no display Flex no flexbox tem algumas outras também só que daí a gente não usa muito essas são as que a gente usa mais na prática mais no dia a dia então se tu quer aprender mais sobre o flexbox e mais algumas outras propriedades eu aconselho que tu dê uma olhada aqui na descrição que eu acho que vai

te ajudar bastante também também vai te ajudar a compreender algumas coisas dessa aula talvez el não tenha te explicado certinho Então esse foi o vídeo eu espero que eu tenha conseguido explicar direitinho para vocês caso surgir alguma dúvida não esquece de deixar aqui nos comentários e se tu gostou do vídeo Não esquece de curtir se inscrever aqui no canal para os próximos vídeos minhas redes sociais estão aqui na descrição meu LinkedIn também e também tem um e-mail para contar Então até o próximo vídeo tchau