O guia completo de CSS Flexbox com um projeto completo de 2024

1. 1 introdução do curso e o que você vai aprender: Você está cansado de usar carros alegóricos do que ter o claro esses mesmos carros alegóricos? Você está cansado de usar o posicionamento para alcançar a camada desejada? E, em seguida, descobrir que tudo desmorona quando você visualizá-lo em diferentes tamanhos de tela. Você quer criar layouts responsivos avançados e CSS usando apenas linhas simples de código. Se assim for, então este curso é para você. Sou um deck ADSR, um desenvolvedor web de pilha completa e freelancer há mais de sete anos. E serei seu instrutor ao longo deste curso. Nesta série de lições, você aprenderá tudo o que precisa saber para começar a usar o flexbox em seus projetos futuros. Começaremos aprendendo e compreendendo como funciona o flexbox. Porque eu acho que se você já tentou usar flexbox antes, você pode ter ficado sobrecarregado com o número de novas propriedades. Existem cerca de 11 ou 12 novas propriedades com uma média de quatro valores potenciais. Então, pode ser um pouco esmagador saltar direto para dentro. Mas através deste curso, você terá uma compreensão clara de como cada propriedade funciona e como cada propriedade específica pode ser usada para controlar o layout de maneiras diferentes. Eu acredito em aprender fazendo isso depois entender e aprender todas as propriedades do flexbox, vamos sujar nossas mãos e começar construindo dois menus como simples, menu de nível único e um avançado. E nesta parte do curso, você verá tudo o que aprendeu em lições anteriores em ação passo a passo. Uma coisa que eu tive em mente quando eu estava construindo este curso é que eu queria que ele se destacasse de outros cursos. Notei que em outros cursos flexbox, você só vê algumas caixas na tela e os instrutores apenas movendo-os usando flexbox. E no final do curso é de repente terminado e você fica pensando, ok, isso foi bom. Aprendi o básico da flexbox. Mas agora, como posso usar esse conhecimento em exemplos do mundo real? Porque afinal de contas, páginas web não são apenas algumas caixas se movendo, certo? E é exatamente por isso que eu criei a última seção deste curso. Nessa seção, construiremos um projeto completo do zero que construí para você. Meu foco principal enquanto eu estava criando este projeto é como implementar cada propriedade que aprendemos sobre flexbox no curso. Veja, você pode obter uma compreensão sólida do que podemos fazer usando essas propriedades. Assim, no projeto, você aprenderá a criar muitos layouts de eventos diferentes. Assim, você aprenderá o que é o layout do Santo Graal e como construí-lo com apenas três ou quatro linhas de código. Antes do flexbox, isso era impossível de alcançar com CSS regular. Uma vez feito isso, construiremos um cabeçalho com o menu e aprenderemos como centralizar o conteúdo verticalmente usando flexbox, que costumava ser uma enorme dor de cabeça. Depois disso, irá criar colunas de altura igual, que é um layout comum que você verá muito em blogs ou sites de revistas. Em seguida, irá criar mais duas seções contendo layouts de cartões avançados que serão muito complexos se você tentou criá-los usando CSS regular. Se você fizesse isso, você acabaria tendo muitas linhas de código e você acharia muito difícil lidar com esse tipo de layout se você tentasse torná-lo responsivo. Finalmente, vamos criar uma galeria de imagens com este layout moderno conhecido como layout de alvenaria horizontal, o que basicamente significa que todos os elementos devem ter diferentes larguras aleatórias, mas a mesma altura. Aprenderemos como configurar essas larguras aleatórias usando alguns seletores CSS avançados. E, claro, tudo será totalmente responsivo. Por isso, ficará ótimo em todos os tamanhos de tela, de dispositivos móveis a tablets e telas ainda mais amplas. Agora estou aqui para servi-lo. Então, durante este curso, se você tiver alguma pergunta e quero dizer, qualquer pergunta que venha à sua mente, basta colocá-lo no Q e em uma seção e eu responderei o mais rápido possível. Eu também quero fazer deste um curso cinco estrelas. Então, se você tiver alguma sugestão, basta deixar um comentário com suas críticas construtivas. Eu não criar cursos e apenas deixá-los lá fora são regularmente aprimorados e atualizar este curso e talvez até adicionar um pouco mais de conteúdo se eu ver algumas boas sugestões. Agora, com tudo o que disse, mal posso esperar para te ver no curso. Por isso, aperte o botão de inscrição e vamos mergulhar e começar o nosso flexbox de aprendizagem de viagem. 2. 2 criando nosso primeiro recipiente flexbox: Olá a todos. Nesta lição, vamos criar nosso primeiro contêiner flexbox. Então, vamos começar. Tudo bem, toda vez que você quiser usar flexbox para controlar seus elementos, você tem que passar por três etapas. Primeiro, você tem que especificar os elementos que deseja controlar. Seu alinhamento está dimensionando ou o que quer que seja usando flexbox. Em outras palavras, os elementos aos quais você deseja aplicar flexbox. Em segundo lugar, você deseja envolver todos esses elementos dentro de um recipiente externo. E terceiro, você deseja definir a propriedade de exibição do contêiner para flexionar, fazendo estas três etapas. Agora você tem um contêiner flexível, e dentro desse contêiner flexível, você tem itens flexíveis ou elementos, que significa que agora você pode usar propriedades de flexbox nesse contêiner ou nesses elementos, ou em ambos para controlar como esses devem olhar em sua página de acordo com seu layout. Deixe-me mostrar-lhe um exemplo do que estou falando aqui no meu editor de código. Eu tenho algum HTML, É apenas HTML básico. Você pode ver que eu tenho um div com uma classe de recipiente flexível. E dentro disso, eu tenho para crianças divs com uma classe de item flexível para cada um deles. Se eu visualizá-los no meu navegador, você pode ver que eles são exibidos como elementos de bloco, claro, porque eles são divs, eles estão apenas sentados um sobre o outro. Mas agora eu quero usar flexbox nesta página. Vamos usar nossos três passos. Primeiro, escolha os elementos que você deseja controlar usando flexbox. E claro que escolheríamos esses quatro divs. Segundo, mas todos eles dentro de um recipiente externo. Nós já fizemos isso. Você pode ver que eles estão todos embrulhados com esta div exterior com uma classe de recipiente flexível. E, em terceiro lugar, defina a propriedade de exibição do contêiner para flexionar. Vamos passar para o nosso CSS e fazer isso. Desloque-se um pouco para baixo até encontrar o recipiente flexível e definir a exibição para flexionar. Você pode ver agora que, definindo a propriedade de exibição do contêiner para flexionar, os elementos flex agora são meio flutuados para a esquerda e exibidos lado a lado. E é isso que o display flex por conta própria faz. Além disso, a largura de cada elemento flexível dependerá do seu conteúdo. Por exemplo, se eu escrever algum texto extra aqui na segunda div, você pode ver que sua largura aumenta para lidar com o conteúdo. E agora o contêiner flexível e os elementos de fluxo estão prontos para serem controlados pelas propriedades flexbox e aprenderemos a controlá-los nos próximos vídeos. Mas, por enquanto, este é o fim para esta palestra. Vejo-te no próximo. 3. 3: Eu acho que esta lição é uma das lições mais importantes em todo o curso. E se você entender esta lição, então todas as próximas lições, estaremos apenas construindo sobre esta. Porque esta lição fala sobre o flexbox CSS principal, que está entendendo Maine e eixo cruzado ou flexbox. Então, vamos começar. Tudo bem, então na lição anterior, quando definimos o contêiner flexível dando-lhe display flex, você percebe que os elementos flex foram exibidos lado a lado horizontalmente. Você pode estar se perguntando por que horizontalmente e por que não, por exemplo, verticalmente. Bem, há uma boa razão. Você vê cada vez que você define um contêiner flexível, que também irá definir a direção do fluxo dos elementos dentro desse contêiner flexível. Se esta direção é horizontal ou verticalmente, Existem duas direções de fluxo. Uma linha, que é aplicada como padrão quando você define o contêiner flexível e basicamente alinha itens horizontalmente, como no último vídeo. E para a coluna, que você tem que aplicar se você quiser substituir o padrão. E colunas alinham itens verticalmente. Mas como faço para mudar a direção do fluxo dos elementos de linha para coluna? Bem, você usa uma propriedade chamada fluxo flexível e aplicá-la ao próprio recipiente flexível e definir seu valor como coluna. Então vamos realmente fazer isso e ver o que parece aqui no meu editor de código em nosso arquivo CSS, Digamos coluna de fluxo flexível. Você pode ver agora eles estão apenas sentados um sobre o outro como antes. Agora, qual é o sentido de tudo isso? E por que eu disse todas essas coisas? Esta é a lição mais importante. Bem, a razão é porque quando o fluxo de fluxo é definido como linha, que novamente é o padrão, então dois eixos imaginários são gerados automaticamente. O eixo principal e o eixo transversal. O eixo principal será horizontal e o eixo transversal será vertical. Mas se definirmos o fluxo flexível para coluna, então o eixo principal neste caso será vertical e o eixo transversal será horizontal. Mas ainda assim, qual é o problema? Por que isso é tão importante? Bem, isso é tão importante porque mais tarde no curso, quando usamos propriedades flexbox, algumas delas sempre afetarão elementos ao longo do eixo principal, dependendo se é horizontal ou vertical. Lembre-se, dissemos que seria horizontal. Fluxo de fluxo é rho e será vertical se fluxo flexível é coluna. E algumas outras propriedades sempre afetarão elementos ao longo do eixo transversal, dependendo se ele é horizontal ou vertical. Ao entender isso, quando você aprender novas propriedades, você só precisará saber qual eixo essa propriedade afeta. Se é o eixo principal ou se é o eixo transversal. E você está pronto para ir. Deixe-me ajudá-lo a entender melhor. Vamos definir fluxo flexível para relegar. Agora, imagine que existem dois eixos indo no eixo principal e no eixo transversal. O eixo principal neste caso será horizontal porque o fluxo de fluxo é rho e o eixo transversal será vertical. Claro que sim. Agora eu vou definir justificar conteúdo para o espaço entre. Não se preocupe com esta propriedade agora. Vamos explorá-lo mais tarde. Mas o que eu quero que você saiba sobre esta propriedade é que ela é considerada uma propriedade do eixo principal. Em outras palavras, afeta apenas o eixo principal, que no nosso caso é o horizontal. Então, se eu ir para o meu navegador e atualizar, você pode ver que ele afeta os elementos horizontalmente porque o eixo principal é horizontal e é uma propriedade de eixo principal. Mas se eu ir para o meu CSS e mudar fluxo flexível para coluna e atualizar. Olha, nós elementos mudamos verticalmente. E sim, isso é porque quando o fluxo de fluxo é coluna, o eixo principal é vertical e justificar conteúdo afeta o eixo principal. Espero que tenha entendido esta palestra. Eu poderia ter falado muito e repetido algumas coisas, mas isso é porque esta palestra é muito importante e vai ajudá-lo a entender todo o curso. Então este é o fim para esta palestra, e eu verei você na próxima. 4. 4 sobre propriedade de fluxo de flex: Olá a todos. Nesta lição, vamos aprender mais sobre a propriedade de fluxo de fluxo e os outros valores que ela aceita. Então vamos começar. Como as taxas. Então você se lembra do último vídeo que depois de criar um recipiente flexível, você precisa definir a direção do fluxo de fluxo para que você possa definir a direção do eixo principal e do eixo transversal. Agora, além de linha e coluna, a propriedade de fluxo de fluxo também aceita linha inversa e coluna inversa. Então, a fim de definir a direção do fluxo do recipiente, eu só vou adicionar fluxo flexível rho. Você pode ver nada muda porque, como eu disse, o fluxo de fluxo é definido como linha por padrão, que basicamente exibe os elementos flexíveis horizontalmente e os flutua para a esquerda. Agora vamos dar uma olhada nos outros valores que a propriedade flex flow aceita. Além de rho, podemos usar linha reversa, que irá inverter os itens horizontalmente e empurrá-los todo o caminho até o final do recipiente. Em outras palavras, flutue-os para a direita e vire-os. Então você pode ver agora temos 432, então também podemos usar coluna. Então eu vou para ir em frente e adicionar coluna. Agora você pode ver que nosso contêiner flexível está exibindo os itens flexíveis como uma coluna. Eles estão sentados abaixo um do outro como elementos normais do bloco. Agora, também podemos usar coluna reversa. Você pode ver que ele vai virar os itens verticalmente e empurrá-los todo o caminho para baixo até o final do recipiente. Você pode ver que nós também temos 4321, e isso é tudo para esta lição rápida. E agora você sabe quais valores Flex Flow aceita. 5. 5 aprendendo a propriedade de envoltório flex: Olá a todos. Nesta lição rápida vamos aprender sobre a propriedade de fluxo envoltório. Então vamos começar. Por padrão, todos os contêineres flexbox são contêineres de linha única, o que significa que os elementos flexíveis sempre serão exibidos em uma única linha. E se você tiver muitos itens, eles não serão enrolados para a próxima linha quando não houver espaço suficiente para eles dentro do contêiner, eles vão meio que transbordar. Por exemplo, se eu copiar todos os elementos e colá-los novamente e, em seguida, fazer o recipiente com menor. Você pode ver que os elementos estão saindo agora do nosso contêiner. Mas na maioria das vezes não queremos que isso aconteça, especialmente quando se trata de design responsivo. Irá querer que os elementos envolvam a próxima linha. Se não houver espaço suficiente para eles fazerem isso, só precisamos usar a propriedade flex wrap. Então eu vou aplicar rato flexível, rato no recipiente. E agora você pode ver os elementos apenas se encaixam para a próxima linha quando eles não têm espaço suficiente. Também podemos usar um rap reverso. Então vamos tentar isso e ver o que vai conseguir. Você pode ver que envoltório reverso apenas inverte as próprias linhas e não afeta os elementos ou invertê-los ou qualquer coisa do tipo. E então isso é para a propriedade flex wrap. É muito fácil, mas muito importante, e você vai usá-lo muito. 6. seis elementos de texto com justificação de conteúdo: Agora, depois de entender o conceito dos eixos principal e transversal, neste capítulo, vamos dar uma olhada nas propriedades flexbox que afetam o alinhamento do eixo principal e do eixo transversal. Tudo bem, então nesta lição, começaremos com as propriedades que afetam o eixo principal. Vamos começar com a propriedade justify content. Basicamente, o que justifica o conteúdo é que ele controla como os elementos de fluxo lidarão com o espaço livre restante dentro do recipiente. E como esses elementos de fluxo serão exibidos em relação ao espaço restante. Ou, em outras palavras, como o espaço restante será distribuído em torno dos elementos. Então justificar conteúdo não vai fazer nada se você recipiente não tem espaço livre ou se os elementos preencher completamente o recipiente não deixando espaço livre. Portanto, lembre-se, sempre que você quiser usar o conteúdo justify, seu contêiner deve ter espaço livre. Tudo bem, agora, justificar conteúdo aceita cinco valores. Primeiro, flex, start, que é o padrão. Ele alinha itens ao início do contêiner flexível. Em segundo lugar, extremidade flexível, que alinha os itens ao final do contêiner flexível. Terceiro, Center, que centraliza o conteúdo dentro do recipiente flexível. Em quarto lugar, o espaço entre o qual separa os elementos e distribui o espaço restante entre eles, mas não em torno deles. E, finalmente, o espaço em torno do qual separa os elementos e distribui o espaço restante entre eles e em torno deles. E o espaço ao redor dos elementos equivalerá a metade do espaço entre eles. Então vamos dar uma olhada e ver esses valores em ação. Se eu voltar para o nosso CSS, eu posso definir o conteúdo justify para começar flex no início. E você pode ver que isso não faz muito porque é o valor padrão. E alinha os itens no início do contêiner sem espaçamento entre eles. E o espaço livre estará aqui. Agora, vamos tentar Flex End. Você pode ver que empurra todos os itens para o fim e o espaço restante estaremos no início do recipiente. Tudo bem, vamos tentar o Centro. Você pode vê-lo apenas centraliza os elementos e o espaço restante é distribuído igualmente entre o início e o fim, o recipiente flexível. Em seguida, vamos tentar o espaço entre. Você pode ver que separa os elementos e coloca o mesmo espaço entre cada um. Mas o primeiro elemento é empurrado para o início do recipiente, e o último elemento é empurrado para o final dele, significa que não haverá espaço entre eles e seu lado do recipiente. E essa é a diferença entre o espaço entre n espaço ao redor. Então, se eu ir em frente e adicionar espaço ao redor, você pode ver que ele separa os elementos com espaços iguais, assim como o espaço entre isso. A principal diferença é que ele vai colocar espaço no início e espaço no final do recipiente. E esses espaços são iguais a metade do espaço entre os próprios elementos. Então, por exemplo, se o espaço entre os elementos for de 50 pixels, dentro do espaço aqui será de 25 pixels. E lembre-se, esta é uma propriedade de eixo principal, ou seja, assim como usamos para alterar os elementos horizontalmente, também podemos usá-lo para alterá-los verticalmente. Então você percebe que a altura do contêiner é de 300 pixels. Assim, podemos ter espaço livre e podemos usar justify conteúdo verticalmente. Então, se eu ir em frente e definir o fluxo flexível para coluna, e antes de eu recarregar meu navegador, você sabe que o que isso vai fazer é tornar o eixo principal vertical aqui. Portanto, justificar o conteúdo funcionará verticalmente. Neste caso. Você pode ver agora que o espaço ao redor funciona verticalmente, não horizontalmente. E agora, é claro, todos os valores anteriores podem ser aplicados e afetará os elementos verticalmente. Por exemplo, vamos usar Flex start. Você vê agora que alinha os itens no início do contêiner verticalmente. E extremidade flexível irá alinhá-los no final do recipiente verticalmente e centro vai sinterizá-los verticalmente, É claro. Agora, uma coisa a notar é que justificar propriedades de conteúdo são aplicadas ao próprio recipiente flexível, não aos itens dentro dele. E este é o fim para esta palestra. Espero que agora você entenda por que o eixo principal e eixo transversal são importantes quando usamos propriedades que são aplicadas ao recipiente flexível, como justify conteúdo. E continuaremos trabalhando com eles no próximo vídeo. 7. 7 mais sobre justificar conteúdo: Olá a todos. Nesta lição rápida, vamos ver como justificar o conteúdo funciona quando o fluxo flexível é definido para linha inversa ou coluna inversa. Então vamos começar. Certo, então agora temos nossos quatro divs e estou definindo a propriedade de exibição do contêiner para flexionar. Por padrão, o fluxo flexível é rho, então os itens são alinhados horizontalmente à esquerda como este. Agora, vamos para o nosso contêiner e adicionar linha de fluxo flexível reverso. Ao fazer isso, o início dos contêineres está agora à direita. Significando que se eu ir em frente e adicionar conteúdo justify, flex start. Você pode ver que o início flex agora alinha itens para a direita, não para a esquerda porque temos o nosso fluxo flexível está definido para linha inversa. E isso também significa que se eu ir em frente e adicionar extremidade flexível em vez disso, é claro, os elementos serão alinhados à esquerda neste caso. Agora, isso funciona da mesma maneira com coluna reversa. Então, se eu mudar linha inversa para coluna inversa, lembre-se agora justificar conteúdo vai funcionar verticalmente, não horizontalmente. Então, quando eu recarregar, você pode ver que os elementos estão alinhados ao topo do recipiente porque agora a coluna é invertida. Então o começo é o fim e vice-versa. Então Flex end alinha ilhas para o início do contêiner neste caso. E, claro, se eu mudar essa extremidade flex para flex start, você pode ver que os elementos estão agora alinhados ao final do recipiente. E este é o fim para esta lição rápida. E vejo-te no próximo. 8. 8 elementos com propriedade de itens: Olá a todos. Nesta lição vamos falar sobre uma linha itens, que é a propriedade que controla os elementos ao longo do eixo transversal. Então vamos começar. Tudo bem, então antes de começarmos, devo dizer que uma linha itens e justificar conteúdo são realmente semelhantes uns aos outros. O que significa que ambos são aplicados ao contêiner flexível e ambos precisam de espaço livre no contêiner para funcionar. A principal diferença é que justificam o conteúdo controla elementos ao longo do eixo principal, como vimos na lição anterior. Mas align itens os controla ao longo do eixo transversal. A outra diferença é que os valores que alinham itens exceções são um pouco diferentes dos valores que justificam o conteúdo aceita. Agora, align itens aceita quatro valores. Primeiro, flex, start, que irá alinhar itens ao longo do eixo transversal para o início do contêiner. Em segundo lugar, extremidade flexível, que irá alinhá-los ao longo do eixo transversal até o final do recipiente. Terceiro, centro, que centrará os elementos ao longo do eixo transversal e adiante. Esticar. Este é um valor padrão. E ele apenas estica os elementos para ter a mesma altura ou a mesma largura que o recipiente. Agora, vamos ver esses valores em ação. Aqui. Em nosso CSS. O fluxo flexível é definido como linha, o que significa que o eixo transversal é agora o vertical. E você pode ver nossos divs ou esticar verticalmente por padrão. Então, podemos alterar isso usando a propriedade align items. Então, se eu ir para o meu recipiente flexível e adicionar uma linha itens, flex start. Você pode ver que o início flex irá empurrar os elementos todo o caminho para o topo do recipiente, deixando espaço vazio abaixo. Vamos voltar ao nosso CSS e tentar flex end. E você pode ver que ele irá empurrar os elementos para o final do recipiente verticalmente ao longo do eixo transversal. E vamos tentar o Center. E, claro, centrará os elementos verticalmente ao longo do eixo transversal, deixando espaços iguais acima e abaixo deles. Agora, vamos tentar stretch, que é o valor padrão. Ele só irá esticar todos os elementos e dar-lhes a altura do recipiente. E não considerará o conteúdo, que significa que todos os elementos acabarão com a mesma altura, mesmo que o conteúdo seja diferente. E isso é muito limpo e limpo quando você quer fazer colunas com a mesma altura, mesmo que o conteúdo seja diferente em tamanho. Agora, vamos usar esses valores quando o fluxo flexível é definido a coluna. Em outras palavras, quando o eixo transversal é horizontal, se eu definir o fluxo flexível para coluna aqui. Agora, os elementos são exibidos como uma coluna e nosso alongamento horizontalmente ao longo do eixo transversal, levando toda a largura do recipiente. Agora vamos usar o Flex Start. Você vê que os elementos agora são empurrados para o início do recipiente ao longo do eixo transversal à esquerda aqui. E no centro. Claro, vamos centrá-los horizontalmente e flexão final. Vamos empurrá-los para o final do recipiente horizontalmente ao longo do eixo transversal para a direita aqui. Agora, vamos em frente e adicionar espaço de conteúdo justify. Por exemplo. Ei, vamos tentar alguma coisa. Eu quero que você pause o vídeo e adivinhe o que isso vai fazer com nossos elementos. Então vá em frente e pause agora e adivinhe. Ok, estamos de volta. Vamos recarregar nossa página e ver, espero que você tenha adivinhado direito. O que isso fez foi afetar os elementos ao longo do eixo principal, que é vertical neste caso, porque lembre-se, temos coluna de fluxo flexível agora. Assim, ele separa os elementos verticalmente ao longo do eixo principal. Agora você pode usar justificar conteúdo e alinhar itens juntos para obter o layout desejado. 9. 9 alinhando um único elemento com propriedade aligning: Olá a todos. Na lição anterior, aprendemos como controlar o alinhamento de elementos ao longo do eixo transversal usando a propriedade align items. Mas neste, vamos aprender como fazer isso para um único elemento usando a propriedade align self. Então vamos começar. Tudo bem, então alinhe auto e alinhar itens são realmente semelhantes um ao outro. Significa que ambos afetam elementos ao longo do eixo transversal. Ambos exceto os mesmos valores que são flex, start, Flex, End, Center e stretch. Mas a principal diferença é que align auto afeta um único elemento flex apenas dentro do recipiente. Enquanto align itens afeta todos os filhos do contêiner flexível. E por causa disso, quando usamos align self em nosso CSS, nós usá-lo em um elemento flex específico, não no recipiente flex. Tudo bem, então se eu for aqui para o nosso seletor de contêiner flexível e adicionar uma linha de itens flex start. Você pode ver que todos os elementos são empurrados para o topo do recipiente. Agora isso é bom e é útil. Mas e se eu quiser, por exemplo, esticar apenas o primeiro elemento sem afetar os outros elementos. Ou se eu quiser centralizar o segundo e assim por diante. Este é o lugar onde align self entra. Se eu for aqui para o meu elemento flexível e adicionar alinhar auto-estiramento. Você pode ver que o primeiro elemento é esticar e preencher o recipiente verticalmente. Enquanto os outros elementos lá, o topo do recipiente. Vamos para o nosso segundo elemento e adicionar align self center. Você pode ver agora está centrado. Vamos usar extremidade flexível no terceiro elemento. E, claro, isso irá empurrá-lo para o final do recipiente. Agora, o último valor é flex start. E você pode ver que ele não faz nada porque os itens alinhados estão configurados para iniciar lá. Então esta é a lição para todos, e eu verei vocês na próxima. 10. 10 alinhando várias linhas com a propriedade de conteúdo de conteúdo: Nesta lição, estaremos falando sobre outra propriedade que é usada no recipiente flexível, alinhar conteúdo. Então vamos começar. Tudo bem, então o que podemos alinhar propriedade de conteúdo fazer para nossos elementos? Basicamente, align conteúdo é usado quando temos várias linhas de elementos. Ele controla como essas múltiplas linhas são exibidas em nosso contêiner. Por exemplo, se copiarmos nossos quatro divs, cole-os um par de vezes. Salve e recarregue. Vamos para o nosso CSS e definir flex wrap para wrap. E agora você pode ver que temos várias linhas de elementos dentro do nosso contêiner. Também podemos controlar como essas linhas serão exibidas usando a propriedade align content. Por exemplo, se eu for em frente e definir um conteúdo de linha para centralizar, você poderá ver que as linhas agora estão centralizadas no contêiner. Nós também podemos usar flex start. E você pode ver que ele vai empurrar as linhas para o topo do recipiente. Além disso, podemos usar Flex N, que irá, naturalmente, empurrar todas as linhas para o final do recipiente. Também podemos usar o espaço entre e o espaço ao redor. Vamos tentar isso. Digamos que o espaço entre. E como seria de esperar, ele separa as linhas e coloca espaços iguais entre elas. E finalmente, o espaço em torno do qual você pode ver separa as linhas e coloca espaços iguais entre elas com metade desse espaço antes da primeira linha e depois da última linha. Então, isso é para a propriedade align content. Você pode usá-lo somente se você tiver várias linhas em seu conteúdo dentro do contêiner. Isso ajudará você a distribuir o espaço restante entre essas linhas. 11. 11 aprendendo a propriedade do pedido: Flexbox nos dá o poder de reordenar elementos flex da maneira que quisermos sem alterar o código-fonte. E é isso que vamos fazer nesta lição. Então, vamos começar. Tudo bem, então aqui em nosso HTML temos nosso contêiner flexível com nossos elementos flexíveis dentro dele. E porque na ordem de origem, um aparece primeiro, depois disso. Depois 34. Se olharmos para eles no navegador, veremos que um vem primeiro, então também, depois 34. Agora, podemos controlar a ordem desses elementos usando a propriedade ordem. E o valor padrão para a propriedade ordem é 0. Então, por exemplo, se eu for para o meu CSS e adicionar ordem 0 ao meu segundo elemento, você verá que nada mudará porque todos eles têm uma ordem de 0 por padrão. Assim, a ordem será definida pela fonte. Agora, se eu for aqui e mudar este 0 para um, você verá agora que o segundo elemento será o último aqui. Também podemos usar valores negativos para garantir que nosso elemento sempre aparecerá como o primeiro. Por exemplo, se eu adicionar menos um em vez deste, você pode ver que o segundo elemento aparece aqui. Na primeira posição. Podemos ir além disso e reordenar todos os nossos elementos. Por exemplo, se eu ir para o meu primeiro elemento e adicionar ordem para, em seguida, ir para o meu segundo e adicionar ordem três, em seguida, adicionar ordenado para, para o meu terceiro. E depois disso, um pedido para o nosso último elemento. Agora você pode ver que eles estão todos reordenados. Agora temos 4321, e é isso para esta propriedade. É fácil e tornará o seu trabalho mais flexível. Vamos ver como usá-lo em ação enquanto estamos construindo nosso projeto. 12. 12flow: Olá a todos. Bem-vindo a este novo capítulo. Neste capítulo, vamos aprender como controlar o dimensionamento de nossos elementos de fluxo. Você vê quando definimos a propriedade de exibição do contêiner para flexionar, percebemos que cada item flexível com dependerá de seu conteúdo. Ou seja, se um dos elementos tem mais conteúdo do que os outros, então a largura deste elemento será maior do que os outros elementos com, porque eles têm menos conteúdo. E o espaço restante do recipiente estará vazio. No último capítulo, aprendemos como distribuir esse espaço restante em torno de elementos. Em outras palavras, como separar os elementos com o espaço. Mas neste, vamos aprender como adicionar o espaço à largura do elemento e fazer com que os elementos aumentem e expandam para ocupar esse espaço. Então vamos começar. Então, nesta lição, vamos dar uma olhada na propriedade flex grow. O crescimento flexível é expresso usando um número como um ou dois e assim por diante. E é usado para determinar o quanto o item flexível crescerá em relação ao resto dos itens flexíveis dentro do contêiner. Em outras palavras, quanto espaço os elementos terão do espaço restante em relação aos outros elementos. Será que todos os elementos ocupam espaço igual, ou um deles vai levar mais do que os outros? Agora chega de falar. Vamos ver isso em ação. Aqui. No nosso editor de código. Os quatro divs estão sentados um ao lado do outro, e a largura de cada um deles depende do conteúdo. Você pode ver que a segunda div é maior do que as outras. Agora, eu tenho espaço restante aqui, e eu quero que meus elementos para encher o recipiente e ocupar o espaço restante. Agora. Ok, então vamos definir flex grow desses itens flex para um. Então, antes de recarregar meu navegador, o que acontecerá aqui é que esse espaço livre será distribuído igualmente entre as quatro divs. Por exemplo, se este espaço restante aqui for 100 pixels, cada elemento terá 25 pixels e os adicionará à sua largura. O que é realmente incrível de ser capaz de fazer com apenas uma linha de código. Então vamos recarregar e você pode ver que a largura de cada elemento aumentou pelo mesmo valor. Por exemplo, se a largura do primeiro elemento era 50 pixels de acordo com seu conteúdo, então sua largura agora é 75 pixels. E a largura do segundo elemento era de 100 pixels, então sua largura agora é 125 pixels. Mas isso não é tudo. E se eu quiser que o terceiro elemento tome o dobro do espaço que sobrou? Como os outros elementos diriam, vamos definir flex grow para o terceiro elemento para dois. Você pode ver que sua largura aumenta agora e o espaço restante agora é distribuído de uma forma que este terceiro elemento levará duas vezes mais do que os outros três dibs. Agora, o valor padrão para crescimento flexível é 0. E isso significa apenas que a largura dos elementos dependerá do conteúdo. Então, se eu ir em frente e remover esta linha aqui, vá para o meu seletor de item flexível e flex crescer 0. Você pode ver que os elementos com é dependente do conteúdo, que é a configuração padrão. Outra coisa interessante que podemos fazer com a propriedade flex grow é que você pode fazer apenas um elemento expandir e ocupar o espaço livre enquanto os outros elementos não vai mudar. Podemos fazer isso facilmente definindo o crescimento flexível do nosso elemento para qualquer valor e não configurá-lo para os outros elementos ou apenas definindo-o para 0, como estamos fazendo aqui. Então, por exemplo, se eu quiser fazer apenas o terceiro elemento expandir e ocupar este espaço livre, eu posso ir aqui e disse É flex crescer para um por exemplo, ou 2, ou qualquer outro valor. Vou configurá-lo para um. E agora você pode ver que ele se expande e ocupa todo o espaço. Agora também podemos usar flex grow para controlar o dimensionamento dos elementos verticalmente. Acho que já sabe como podemos fazer isso. Iep, só precisamos mudar o fluxo flexível de linha para coluna. Então, se eu entrar aqui dentro do seletor do nosso recipiente e definir fluxo flexível para coluna. Você pode ver que ele está funcionando verticalmente agora e afetando a altura. Então, para embrulhar as coisas, a propriedade flex grow é usada para controlar o tamanho dos elementos flex em relação um ao outro. Fluxo flexível é linha. Ele vai controlar a largura e se é coluna, então ele vai controlar a altura. O valor padrão para ele é 0, que basicamente significa que o tamanho de cada elemento dependerá de seu conteúdo. Mas se mudarmos para um para todos os elementos de fluxo, quando o espaço livre será adicionado igualmente a cada tamanho do elemento. Por outro lado, se definirmos o crescimento flexível de apenas um dos nossos elementos para qualquer valor, mas deixarmos todos os outros elementos em um valor de 0, então esse elemento tomará todo o espaço livre para si. E se quisermos fazer os elementos mudarem e crescerem em relação uns aos outros, podemos sempre definir o crescimento flexível para todos eles para qualquer valor que quisermos. Por exemplo, se eu quiser que um elemento ocupe o dobro de espaço que todos os outros elementos. Os anos 70 flex crescer propriedade para dois e disse que é um para todos os outros elementos. E se eu quiser que seja quatro vezes maior do que os outros, eu posso vender seu crescimento flexível para quatro e os outros para um e assim por diante. Então eu desafio você a brincar com os valores de crescimento flexível e ver o que você ganha. E se você tiver alguma dúvida, apenas deixe no Q e uma seção, e eu ficarei feliz em ajudar. Então este é o fim para esta seção, pessoal. E vejo-te no próximo. 13. 13 shrink de flex,: Olá a todos. Nesta aula, nós estaremos aprendendo sobre a propriedade flex shrink. Não se preocupe, é bem simples. Então vamos começar. Tudo bem. Então, no último vídeo, falamos sobre a propriedade flex grow e disse que nos ajuda a controlar como o espaço livre do recipiente é distribuído entre a largura de nossos elementos. Neste, vamos dar uma olhada na propriedade flex shrink, que basicamente determina o quanto os elementos irão encolher em relação um ao outro dentro do recipiente. Quando não há espaço suficiente, todos encolhemos pelo mesmo ritmo. Ou um deles vai encolher mais do que os outros e perder mais espaço? Aqui no meu editor de código, agora tenho que flexionar elementos. Você pode ver que a largura de cada um é de 300 pixels. E eu defini a propriedade de exibição do contêiner para flexionar. Você também pode ver que temos espaço livre aqui. No último vídeo, distribuímos esse espaço livre entre os elementos usando a propriedade flex grow. Mas agora se eu ir em frente e encolher meu navegador até que não haja mais espaço livre e inspecionar qualquer um dos dois elementos. Então vamos ver. É estranho. Você pode ver os primeiros elementos com é cerca de 300 pixels e os segundos elementos com também é de cerca de 300 pixels. Então, agora, se eu continuar encolhendo meu navegador, você pode ver que os elementos agora estão diminuindo também. Sua largura agora é inferior a 300 pixels, porque a largura do navegador em si é inferior a 600 pixels e ele não pode lidar com os elementos, então eles estão diminuindo. Mas o interessante é que ambos os elementos estão encolhendo pelo mesmo valor. Ou seja, se eu verificar a largura agora, eles terão a mesma largura. E isso está acontecendo por padrão. Mas e se quisermos mudar isso? E se quisermos fazer os segundos elementos encolherem? Digamos que dez vezes mais do que a primeira. Bem, podemos fazer isso usando a propriedade flex shrink. Se eu for para o segundo elemento aqui e adicionar flex encolher 10, você já vê que o segundo elemento está encolhendo muito mais do que o primeiro. Significado é perder muito mais espaço em relação ao primeiro. Vamos excluir isso e ir para o seletor de item flexível geral e disse flexão encolher para um. Você pode ver que agora eles estão agindo como antes, diminuindo pela mesma quantidade, o que nos diz que um é o valor padrão para redução flexível. Vamos tentar o 0 e ver o que conseguiremos. Você pode ver que os elementos em nosso transbordamento para fora do recipiente, que nos vende que 0 força os elementos a não encolher abaixo de sua largura. Mas vamos tentar outra coisa. Vamos para o nosso recipiente e definir o envoltório flexível para embrulhar. Mas algo interessante está acontecendo aqui. Os elementos agora estão se encaixando para a próxima linha e eles não estão mais saindo do contêiner. E honestamente, eu sempre uso esse método no meu trabalho porque na maioria das vezes eu não quero que meus elementos encolham abaixo de uma largura específica, mas eu quero que eles caiam para a próxima linha quando eles não têm espaço suficiente. Isso é muito útil, especialmente quando se trata de design responsivo. Então, para embrulhar as coisas, a propriedade flex shrink é usada para controlar como os elementos de fluxo vão encolher em relação um ao outro dentro do recipiente quando eles não têm espaço suficiente. É aplicado ao próprio elemento flex, assim como a propriedade flex grow e seu valor padrão é um, que significa que todos os elementos diminuirão pelo mesmo valor. Mas podemos alterar esse comportamento padrão. Podemos, por exemplo, fazer um elemento específico encolher duas vezes mais do que os outros simplesmente definindo It's shrink propriedade para dois. Também podemos forçar os elementos a não encolherem abaixo uma largura específica, simplesmente definindo seu encolhimento flexível para 0. Muito bem, pessoal, esta é a hora desta lição. Espero que agora você entenda o que o psiquiatra flexível faz, e eu o verei no próximo. 14. 14 flexbasis: Olá a todos. Nesta lição, estaremos falando sobre a propriedade base flexível. Então vamos começar. Ok, então base flexível é muito semelhante à propriedade width. Ele basicamente define o tamanho principal inicial do elemento antes de qualquer espaço restante é distribuído. Então, por exemplo, se você definir a base flexível de um item flexível como, digamos 100 pixels. Você está apenas dizendo para o navegador, hey, desde que haja espaço suficiente restante no contêiner flexível, Eu quero que esses itens flexíveis com para começar em 100 pixels e ser, no entanto, do que isso. E é expresso em porcentagens de pixels em todos os valores que você usaria para a propriedade de largura regular. Então, de volta ao nosso editor de código. Se eu definir a base flexível para este segundo elemento para 300 pixels, você verá que sua largura é aumentada. E se eu inspecioná-lo, você verá que sua largura agora é de 300 pixels. Mas se eu encolher minha janela, você pode ver enquanto houver espaço suficiente, a largura será a mesma. Mas quando eu chegar a este ponto onde não há espaço suficiente e depois continuar encolhendo, você verá que a div começa a encolher. Então base flexível diz ao navegador para iniciar a largura deste elemento em uma largura específica se houver algum espaço disponível. Mas se não houver, basta encolher, a menos que você disse flexão para 0. Certo, vamos remover essas duas linhas de código. Nós. 15. Visão geral de seção 15 e arquivos iniciais: Olá a todos, bem-vindos a esta nova seção do curso. Nesta seção, vamos começar a usar o Flexbox em exemplos do mundo real. Vamos construir esses dois menus responsivos usando algumas das propriedades flexbox que aprendemos nos vídeos anteriores. Vejamos os arquivos de inicialização para esta seção. Você pode ver aqui nós temos os ossos nus para qualquer documento HTML. Temos um título aqui. Então eu incluí nosso arquivo de folha de estilo aqui. Então, vamos adicionar nossos estilos neste arquivo. Eu também tenho um link CDN para a biblioteca Font Awesome aqui, porque vamos usar alguns ícones em nosso segundo menu. Também incluí as fontes do Google aqui. Eu fiz tudo isso porque estou assumindo que você está familiarizado com tudo isso e eu não queria desperdiçar seu tempo fazendo você escrever todo esse código. Então bem aqui dentro da etiqueta do corpo, eu adicionei um cabeçalho e dentro dele um div com a classe de centrado. Esta classe apenas centraliza todos os elementos dentro dela. Então eu adicionei este título bem aqui. E, em seguida, abaixo disso, temos esta tag principal que irá conter os menus. E se eu for para o meu CSS, você pode ver alguns arquivos CSS incluídos. Esses arquivos são apenas responsáveis por estilos gerais para fazer tudo parecer melhor. Se eu olhar para este arquivo HTML no meu navegador, você pode ver que temos apenas o cabeçalho H1 aqui. Tudo bem, então você pode baixar os arquivos iniciais depois de assistir a esta palestra e podemos começar a construir nosso primeiro menu juntos na próxima lição. 16. 16 criar um menu simples com flexbox: Olá a todos. Nesta lição, vamos construir nosso primeiro menu usando Flexbox. Então vamos começar. Tudo bem, antes de tudo, estaremos construindo a marcação HTML do menu. Então eu estou indo para ir para a direita aqui e adicionar uma seção com uma classe de seção de menu. E dentro disso, eu vou adicionar um H2 com uma classe de menu Título. E vamos apenas dizer menu simples. Olá, Este H2, vamos adicionar uma tag nav para adicionar uma classe de navegação única para que possamos usar flexbox neste menu, direcionando esta classe e dar-lhe uma classe de menu. Para que possamos adicionar nossos estilos gerais para todos os menus, direcionando esta classe. Tudo bem, então dentro deste navegador, vamos adicionar U, L, depois LI dentro dele, e uma etiqueta de âncora. E vamos copiar isso e colá-lo sete vezes. E dizer serviços domésticos, depoimentos, portfólio, blog e contato. Você pode ver aqui que temos o nosso cardápio. Vamos voltar ao nosso CSS e começar a estilizá-lo. Vou apontar a classe da seção do menu. Em seguida, eu vou adicionar o fundo de preenchimento para EM, em seguida, margem inferior para EM também. E abaixo disso vamos atingir a UL. Então vamos dizer menu UL e adicionar list-style-type none, para que possamos nos livrar das balas e, em seguida, preenchimento 0 e, em seguida, margem 0. E, em seguida, vamos definir a cor de fundo deste URL para esta cor cinza agradável. Muito bem, agora vamos apontar as etiquetas de âncora do nosso menu. Vou definir a decoração do texto para nenhum. E então eu vou definir sua cor para esta agradável cor cinza escuro. E abaixo disso, adicionarei um preenchimento de 0,6 m na parte superior e inferior, One E M à esquerda e à direita. E então eu vou definir sua propriedade display para bloquear e definir a transição para todos os 0.5 segundos e facilidade. E agora você pode ver que um menu está parecendo muito melhor. Mas vamos adicionar alguma cor de fundo branco agradável. Quando passarmos o mouse sobre os links de volta para o nosso CSS, eu vou segmentar as tags âncora novamente. E quando passarmos o mouse sobre ele, queremos definir a cor de fundo para esta cor branca agradável. Vamos também adicionar alguns estilos ao H2. Então eu vou segmentar a classe Cabeçalho menu e adicionar font-size para E, m, e font-weight normal. Agora, nosso menu está ótimo em dispositivos móveis. Os links estão sentados abaixo um do outro bem. Então vamos deixá-lo assim em telas menores. Mas em telas mais amplas, queremos usar o flexbox para fazer nosso menu parecer com nossa demonstração. Então, vamos usar consultas de mídia para segmentar telas mais amplas. E então vamos usar flexbox para alterar nosso menu. Então vamos realmente fazer isso. Vamos para o nosso CSS e vamos começar definindo uma consulta de mídia quando a tela é mais larga do que 600 pixels. E dentro desta consulta de mídia, vamos direcionar um único nav UL e alterar a propriedade de exibição para flex. E assim, temos nossos itens de lista exibidos horizontalmente e temos um menu que é colocado para fora corretamente. Agora que temos esse layout, podemos começar a alterá-lo usando o Flexbox também. Por exemplo, todos os itens da lista agora estão alinhados à esquerda. E se quisermos alinhá-los à direita? Você se lembra que o valor padrão para fluxo flexível é linha, o que significa que o eixo principal é horizontal por padrão. E você também se lembra que quando queremos controlar o alinhamento de elementos ao longo do eixo principal, usaríamos a propriedade justify content. Assim, a fim de controlar a nossa lista de itens horizontalmente e alinhá-los ao final do recipiente. Por exemplo, usaremos a propriedade justify content. Então vamos voltar ao nosso CSS. E abaixo deste flex de exibição, vamos definir justify conteúdo para flex end. E agora temos todos os itens do menu alinhados à direita. Agora, vamos jogar com os valores de conteúdo justificar. Vamos ao nosso CSS e tentar o centro. Em vez disso. Você pode ver que agora está centralizando os itens da lista. Mas agora há uma coisa importante. Precisamos ter certeza de que nosso menu é totalmente responsivo. E isso significa que se a tela ficar pequena o suficiente, precisamos ter certeza de que nossos itens de menu estão caindo corretamente. Então, por exemplo, se eu clicar com o botão direito do mouse em qualquer item e ir inspecionar elemento e alterar a largura da tela. Você pode ver que nossos itens estão sendo esmagados porque seu contêiner não tem espaço suficiente para eles. Então eu acho que você se lembra o que devemos fazer neste caso? Sim. Devemos definir o invólucro flexível do nosso recipiente para embrulhar. Então vamos para o nosso CSS e eu vou adicionar flex wrap, wrap. E agora você pode ver que nossos itens de menu serão embrulhados para a próxima linha quando o contêiner não tiver espaço suficiente para eles. Agora, vamos continuar jogando com a propriedade justify content. Vamos voltar para o nosso CSS e eu vou mudar o conteúdo justify para o espaço ao redor. E agora você pode ver que temos espaços iguais entre nossos itens de menu. Vamos também usar o espaço entre. E também separa os elementos com espaços iguais entre eles. Você pode ver que há um espaço vazio bem aqui entre os elementos que eu não consigo clicar. Mas e se eu não quiser isso? O que tem? Não quero espaços entre os elementos. Significa que quero que os elementos se expandam e ocupem este espaço livre. Bem, podemos fazer isso usando a propriedade flex grow. Então vamos voltar ao nosso CSS. Vamos direcionar nossos itens de lista e definir flex crescer para um, o que significa que todos os itens ocuparão espaço igual do espaço restante. Em seguida, flex base automática, o que significa que a largura do item dependerá do seu conteúdo. E flexione o encolhimento para 0. O que significa que os elementos não vão encolher quando não têm espaço disponível, mas eles vão passar para a próxima linha em vez disso. E agora, se eu passar o mouse em qualquer lugar entre os elementos, você pode ver que agora não há nenhum espaço livre porque a propriedade flex grow força todos os itens de menu a tomar este espaço livre igualmente porque nós o definimos como um. Mas agora há um pequeno problema aqui. Você pode ver que o próprio texto dentro dos itens está alinhado à esquerda. Isso pode ser facilmente corrigido simplesmente voltando ao nosso CSS e definindo o texto alinhado ao centro. Então agora temos um menu simples e bonito que está ótimo com itens igualmente espaçados e não há lacunas entre eles. Então esta é a lição para todos, e eu verei vocês na próxima. 17. 17 criando um menu avançado com flexbox: Olá a todos. Nesta lição, estaremos construindo nosso menu avançado usando Flexbox. Então vamos começar. Tudo bem, então vamos começar construindo a marcação HTML. Então algo aqui abaixo da seção de menu simples e adicionar uma nova seção com uma classe de seção de menu. E, em seguida, abaixo disso, vamos adicionar um H2 com uma classe de menu Título, e vamos dizer Menu Avançado. E, em seguida, abaixo disso, vamos adicionar uma tag nav com uma classe de Vance nav e também uma classe de menu. E, em seguida, vamos adicionar UL, LI, em seguida, tag âncora. E, em seguida, dentro desta tag âncora, vamos adicionar uma div com uma classe de ícone. E dentro dela vamos adicionar uma etiqueta I e dar-lhe uma classe de FAS e também uma classe de futebol FIFA. Então esta será a div que contém nosso ícone Font Awesome. E abaixo desta div, vamos adicionar outra div e dar-lhe uma classe de texto. E dentro dela, vou escrever futebol. E então eu vou adicionar uma extensão e apenas dizer que é um grande esporte. Então vou copiar isto e colá-lo duas vezes. Vamos mudar a classe ícone para F, um filme. E diremos que filmes tornam sua vida melhor. E aqui vou dizer que a câmera captura grandes momentos. Então agora vamos para o nosso navegador. Você pode ver que temos nosso menu e já está bonito por causa das aulas que aplicamos a ele. Você pode ver aqui esta seção de menu e as classes de menu que nós estilizamos em nosso vídeo anterior. Agora, vamos dar uma olhada em nossa marcação HTML. Você pode ver que temos um nav, UL, LI e, em seguida, uma etiqueta âncora, assim como nosso menu simples. Então vamos controlar os itens da lista como fizemos no menu simples. O que significa que vamos fazer da nossa UL um recipiente flexível, o que significa que os itens da lista serão elementos flexíveis. Em seguida, podemos alterá-los usando propriedades Flexbox. Agora, se você olhar dentro da etiqueta âncora, você pode ver que temos dois divs. O primeiro contém o ícone e o segundo contém o texto. Agora, você deve estar se perguntando por que eu estou colocando-os em dois divs separados. Por que não os coloquei em uma só vez? Bem, eu fiz isso porque vou fazer desta âncora um recipiente flexível. E fazendo isso, esses dois divs serão itens flexíveis e eu posso controlá-los do jeito que eu quiser. Veremos isso em um segundo. Mas agora vamos para o nosso CSS e fazer outra consulta de mídia quando a largura é maior que 600 pixels também. E dentro disso, vamos atingir esse avançado nav UL. Defina a exibição para flexionar e, em seguida, defina a quebra flexível para moldar. Assim, os itens da lista se encaixam na próxima linha quando não têm espaço disponível. Vamos ver como é. Você pode ver os itens da lista agora sentar-se um ao lado do outro e flutuar para a esquerda. Mas você também pode ver que temos algum espaço livre à direita que não podemos clicar. E acho que sabe como podemos consertar isso. Isso é certo. Devemos definir o crescimento flexível dos itens da lista para um para que eles se expandam e tomem o espaço restante igualmente. Então vamos para o nosso CSS e segmentar nossos itens de lista. Em seguida, definir flex crescer para um. Vamos também definir base flexível para 220 pixels. Este é um valor que achei adequado para o nosso conteúdo. Então eu quero que os itens do menu para começar nesta largura. Vamos também definir a redução flexível como 0 para que nossos itens não diminuam abaixo de 220 pixels. E agora você pode ver que os itens estão com ótima aparência e eles são responsivos. Então, se eu inspecionar qualquer elemento, e quando eu encolher meu navegador mais, você pode ver que ele rampa bem para a próxima linha e não diminui abaixo de 220 pixels porque nós definimos flex shrink como 0. E quando eu encolher o navegador mais abaixo de 600 pixels, os elementos serão empilhados um abaixo do outro de uma maneira agradável. E isso ficará ótimo em dispositivos móveis. Mas agora vamos continuar trabalhando. Se dermos uma olhada em nossa demo, você pode ver que temos nosso ícone flutuado para a esquerda e o texto para a direita, assim. Assim, podemos fazer isso facilmente com Flexbox. Lembra-se que temos dois divs dentro da etiqueta âncora. Um contém o ícone e o outro contém o texto. Então, a fim de controlá-los, devemos definir a propriedade de exibição da âncora para flexionar. Vamos para o nosso CSS e vamos direcionar a tag âncora e dizer display flex. Você pode ver o ícone e o texto estão alinhados horizontalmente. Mas queremos um pouco de espaçamento entre eles. Podemos fazer isso usando margens regulares ou preenchimento, mas faremos isso com Flexbox. Então vamos para o nosso CSS e segmentar a div que contém o ícone. E, em seguida, adicione base flexível 60 pixels, por exemplo. E também vamos adicionar um tamanho de fonte de 35 pixels. E você pode ver que isso já está ótimo. Se dermos uma olhada em nossa demonstração, você pode ver que esta palavra é maior e este texto está definido abaixo dela. Então vamos fazer isso. Vamos para o nosso HTML. Você pode ver que temos este texto div, e dentro dele um span contendo este texto. Então vamos para o nosso CSS novamente e direcionar a div de texto. Em seguida, defina seu tamanho de fonte para 25 pixels. E é negrito do peso da fonte. Agora, vamos mirar a extensão dentro dela. Defina sua propriedade de exibição para bloquear de modo que ele cai abaixo são palavra grande. Em seguida, defina seu tamanho de fonte para 15 pixels. Em seguida, adicione peso da fonte mais leve. Quando o estilo de fonte itálico. E aí está. E menu avançado que parece ótimo em telas largas. E quando você vai para telas mais estreitas, ele envolve bem. E quando você vai para dispositivos móveis, parece bom e apertado. 18. Visão geral 18 do nosso projeto final: Olá a todos. Bem-vindo a esta nova seção do curso onde vamos construir nosso projeto e tentar usar todas as propriedades flexbox que aprendemos nas seções anteriores. Então aqui temos nosso projeto final, e aqui está o cabeçalho. Aprenderemos como centralizar facilmente esse conteúdo verticalmente. E também como empurrar o menu para o final do cabeçalho verticalmente, assim, fará tudo isso com Flexbox. Em seguida, temos nossa seção de Posts. Você pode ver que temos duas postagens, depois três postagens. E, em seguida, a publicação final que ocupa toda a largura da área de conteúdo. E você pode ver que as colunas em cada linha são iguais em altura, mesmo que o conteúdo seja diferente. Usando flexbox, vamos conseguir esse layout. Abaixo disso, temos a seção do relógio hoje com a imagem de um lado e o conteúdo do outro. Aprenderemos como alterar a ordem dos elementos em nossa página sem alterar o código-fonte. E vamos fazer isso aqui neste segundo cartão. Se você der uma olhada nele, você pode ver que o conteúdo está à esquerda e a imagem está à direita. Mas no código-fonte ou na página HTML, a imagem vem primeiro e depois o conteúdo. Então, vamos aprender como alterar sua ordem usando Flexbox is order propriedade. Então temos a seção de download agora. Você pode ver que ele tem um layout realmente complexo com a imagem ocupando toda a largura. Em seguida, a seção de conteúdo abaixo dele, com esses três divs lado a lado. Você também pode ver que a segunda div aqui tem mais largura do que as outras. Mas com Flexbox irá construir este layout facilmente. Depois disso, temos a nossa galeria de imagens com este layout criativo chamado layout de alvenaria horizontal. Você pode ver que as imagens têm valores aleatórios para largura, mas eles têm a mesma altura. E se clicarmos em qualquer imagem, ela aparece bem em um modelo de caixa. E podemos navegar pelas imagens simplesmente pressionando as setas do teclado. E então temos nosso rodapé simples aqui. Aqui à direita. Temos a nossa barra lateral com alguns widgets agradáveis. Tem a mesma altura que a área de conteúdo. Por exemplo, se eu rolar um pouco para baixo, você pode ver que mesmo que não haja mais conteúdo na barra lateral, Ele ainda está preservando sua altura e todo o outro conteúdo ainda é deslocado para a esquerda. Isso é o que chamamos de layout do Santo Graal. Então, vamos aprender como fazer isso com Flexbox usando apenas cerca de três ou quatro linhas de código CSS. Agora, vamos dar uma olhada nos arquivos iniciais do nosso projeto. Eu tenho a pasta do projeto localizada aqui na minha área de trabalho. Então, se eu abri-lo, você pode ver que temos nosso arquivo HTML chamado index, e nós temos nosso arquivo style.css aqui nesta pasta. E também temos todas as nossas imagens localizadas aqui nesta pasta de imagens. E temos uma pasta JS. E dentro disso temos a biblioteca jQuery e um arquivo chamado main.js. Então, se abrirmos esses arquivos em nosso editor de código, aqui está o nosso arquivo index.html. Você pode ver exatamente como a seção do menu, ele tem algum HTML básico. Tem o título aqui, depois o Google Fonts e, em seguida, a biblioteca Font Awesome. E, finalmente, nossa folha de estilo. Abaixo disso, incluímos a biblioteca jQuery e o arquivo main.js antes do fechamento da tag body. E, claro, nossa folha de estilo aqui está vazia. Então vamos começar tudo do zero. Portanto, certifique-se de baixar os arquivos iniciais, acionar seu editor de código. E nos vemos na próxima palestra onde construiremos layout do Santo Graal do nosso projeto usando, você adivinhou, Flexbox. 19. 19 construindo o layout holygrail: Olá a todos. Nesta lição, vamos construir o layout do Santo Graal do nosso projeto. Então vamos começar. Então, primeiro de tudo, vamos logo aqui depois da etiqueta do corpo e adicionar uma div e dar-lhe uma classe de invólucro externo. Agora este será o recipiente externo que conterá todas as seções dentro de nossa página. E dentro disso vamos adicionar um cabeçalho e dar-lhe uma classe de cabeçalho do site. E dentro dele vamos adicionar uma tag H1 e dar-lhe uma classe de título do site. E vamos apenas dizer cabeçalho. E abaixo desse cabeçalho vamos adicionar uma div com uma classe de área de conteúdo. Então este será o contêiner que contém nossa área de conteúdo principal, bem como nossa barra lateral. E dentro dele vamos adicionar uma tag principal e dar-lhe uma classe de área de conteúdo principal. Esta tag principal conterá nossos artigos e assim por diante. E, em seguida, uma tag H1 e dizer, por exemplo, o conteúdo principal vai aqui. E depois disso vamos adicionar algum conteúdo temporário aqui dentro de algumas tags p. E, em seguida, abaixo desta tag principal, vamos adicionar uma div e dar-lhe uma classe de barra lateral, certo? E dentro dele vamos adicionar H1 e dizer barra lateral vai aqui. E abaixo disso, adicionaremos algum conteúdo fictício para fins de visualização dentro de uma tag p. Muito bem, vamos adicionar o rodapé. Então eu vou ir em frente e adicionar uma etiqueta de rodapé e dar-lhe uma classe de rodapé do site. E dentro dele vamos adicionar H1 e apenas dizer rodapé. Muito bem, vamos ver isto no nosso navegador. Então aqui está o cabeçalho na parte superior, e então o conteúdo principal aqui, a barra lateral abaixo dele, e o rodapé na parte inferior. Mas agora vamos adicionar um pouco de estilo para que possamos vê-los melhor. Voltar ao nosso CSS. Vou pagar alguns estilos e explicá-los para você. Portanto, existem alguns estilos básicos. Aninhei o corpo, os botões, as entradas e as áreas de texto, e depois adicionei alguns estilos básicos. Você pode ver que a cor é preta. A família de fontes é a nossa fonte. O tamanho da fonte é 16 pixels e a altura da linha é definida como 1,8. E abaixo disso, adicionei alguns estilos ao corpo. Você pode ver que eu adicionei esta cor cinza agradável, tem uma cor de fundo. Defina a margem como 0 e defina a família de fontes como nossa fonte. Agora faça isso, vamos direcionar o cabeçalho e o rodapé. Adicione cor de fundo verde e altura 100 pixels por enquanto. Em seguida, vamos direcionar a barra lateral e adicionar cor de fundo azul e cor branca. E, em seguida, abaixo disso, vamos direcionar a tag H1 e definir a cor para vermelho. E vamos definir a margem para 0. Então também, vou direcionar a tag p e dar-lhe uma margem de 0. Vamos dar uma olhada. Você pode ver que está mais bonito agora. Tudo bem, então em telas largas queremos que uma barra lateral seja uma coluna do lado direito, bem aqui. Então o que podemos fazer é fazer o contêiner que contém tanto a área de conteúdo principal quanto a barra lateral, um contêiner flexível. Então, de volta ao nosso HTML, você pode ver que a div com a classe de área de conteúdo é a que queremos. Então vamos ao nosso CSS, criar uma nova função quando a largura da tela for maior que 1, 0, 0, 0, 0, 0, 120 pixels. E eu vou segmentar a área de conteúdo e definir sua propriedade de exibição como flex. E assim, temos a área de conteúdo principal à esquerda e a barra lateral à direita. E quando encolhemos nosso navegador, você vê quando eu vou abaixo de cento, cento e vinte pixels, a barra lateral está caindo abaixo da área de conteúdo principal. E se você olhar aqui, você pode ver que a barra lateral e a área de conteúdo principal têm a mesma altura mesmo quando o conteúdo é diferente. E é exatamente disso que se trata o Santo Graal. Tudo bem, agora, vamos continuar trabalhando. Você pode ver que a barra lateral aqui está ocupando muito espaço, então eu quero diminuir sua largura um pouco. Ele se lembra que ao definir o contêiner flexível, agora a barra lateral é um item flexível e podemos usar propriedades flexbox nele. Então vamos para o nosso CSS e direcionar nossa barra lateral. E disse que é propriedade flex para 0, que significa que não vai crescer. Em seguida, 0 significa que não irá diminuir abaixo de uma largura específica, que é 320 pixels. E agora você vê que está melhor. E é isso para esta lição, construímos nosso layout do Santo Graal, e agora estamos prontos para construir cada seção de nossa página individualmente, mas faremos isso a seguir. 20. 20 construindo nosso cabeçalho usando flexbox: Olá a todos. Nesta lição vamos construir e estilizar nosso cabeçalho. Então, como sempre, vamos começar. Tudo bem, então de volta ao nosso HTML. Aqui dentro da tag cabeçalho, vou adicionar um div e dar-lhe uma classe de site Info. Então eu vou mover a tag H1 para ele. E abaixo, vamos adicionar uma tag de parágrafo com uma classe de descrição do site. E vamos adicionar a descrição do nosso site aqui. E abaixo do site info div, vamos adicionar nosso menu. Então, vamos adicionar uma tag nav com uma classe de menu principal. E vamos apenas dizer que o cardápio iria aqui por enquanto. Certo, vamos ver isso no navegador. Muito bem, vamos continuar a trabalhar de volta ao nosso CSS. Então, aqui entre nossos comentários, vamos começar a estilizar o cabeçalho. Então eu vou direcionar o cabeçalho do site e definir sua altura para 400 pixels. Vamos ver isto. Agora você pode ver que temos a div com a classe de informações do site contendo o cabeçalho do site e a descrição do site. E abaixo dele temos a div com a classe do menu principal segurando nosso menu. Muito bem, agora queremos que o nosso menu seja empurrado para o final do contentor aqui mesmo. Podemos fazer isso facilmente usando flexbox. Podemos fazer o recipiente um recipiente flexível e, em seguida, definir o fluxo flexível para coluna para que os elementos permaneçam abaixo um do outro e sua altura dependerá do conteúdo. E, em seguida, defina o crescimento flexível das informações do site para apenas um. Que ele se expande verticalmente e ocupa todo o espaço, empurrando-os em você até o final do recipiente. Então vamos para o nosso CSS e fazer isso. Eu vou vir aqui e adicionar display flex, em seguida, flex coluna fluxo. Então eu vou segmentar o site info div e definir flex crescer para um. Você se lembra que quando eu adicionar flex crescer um para um elemento flex individual apenas e não os outros. Isso fará com que ele ocupe todo o espaço restante do recipiente. Assim, a div de informações do site crescerá verticalmente, empurrando o menu para o final do contêiner. E assim, você pode ver que o menu vai até o final do recipiente. Agora, vamos continuar trabalhando. Vamos projetar nosso projeto em uma primeira abordagem móvel, que significa que vamos projetá-lo como se estivéssemos visualizando em um dispositivo móvel. E então vamos criar consultas de mídia e adicionar as alterações que queremos em telas mais amplas. Então vou segmentar o título do site aqui e adicionar alguns estilos. Vou adicionar margem 0, tamanho da fonte a eles. Peso da fonte 300, centro alinhado ao texto. Cor, branco. E texto transformar em maiúsculas. Você pode ver que está mais bonito. Agora, de volta ao nosso CSS. Vamos direcionar a descrição do site e adicionar o centro de alinhamento de texto, em seguida, mudar sua cor para esta cor amarela agradável. E o tamanho da fonte 1,2 M. Em seguida, margem superior menos 0,8, modo que se torna mais apertado. Em seguida, em itálico estilo de fonte. E você pode ver que está parecendo melhor. Vamos continuar. Vou mirar no nosso menu. Em seguida, adicione um pouco de preenchimento. Um EM de cima e de baixo, e um E M da esquerda e da direita também. Então eu vou adicionar cor preta, em seguida, background-color nosso amarelo está certo. Agora queremos que o título do site seja maior em telas mais amplas. Então, de volta ao nosso CSS. Vou criar um novo papel para telas largas. Em seguida, vou direcionar o título do site e definir o tamanho da fonte para quatro. Você pode ver que é maior agora. E quando eu for para telas menores, será menor. Agora, queremos centralizar o título do nosso site e uma descrição do site verticalmente. Podemos fazer isso usando muitas coisas diferentes, mas usaremos Flexbox. Você pode ver que o título e a descrição estão contidos com a div de informações do site. Assim, podemos exibir as informações do site como um contêiner flexível e fazer a coluna de fluxo flexível e, em seguida, centralizar o conteúdo usando a propriedade justify content. Então, se eu ir para o meu CSS e segmentar o site info div, definir sua propriedade de exibição, os sinalizadores, em seguida, coluna de fluxo flexível e, em seguida, justificar o centro de conteúdo. E agora você pode ver que está centrado perfeitamente. E lembre-se, justify content é uma propriedade de eixo principal. E o eixo principal aqui é vertical porque o fluxo flexível é coluna. Agora vamos para o nosso CSS e mudar o fundo verde para preto para que ele corresponda ao nosso design. Agora, vamos rever o que fizemos com o Flexbox aqui. Primeiro de tudo, o menu e o site Info divs estão contidos em uma div externa com uma classe de cabeçalho do site. Mostramos este cabeçalho do site como um flex e tornou-o uma coluna. Então, os elementos se empilham abaixo um do outro. Em seguida, definimos o crescimento flexível das informações do site para um para que ele se expanda e ocupe o espaço restante do contêiner. Então precisávamos centralizar o conteúdo dentro dele verticalmente. Então fizemos um recipiente flexível e disse que é fluxo flexível para coluna e, em seguida, centralizado seu conteúdo usando justify centro de conteúdo. E é isso. Terminamos nosso cabeçalho, exceto para o nosso menu. Terminaremos isso mais tarde. Mas, por enquanto, esta é a lição e continuaremos explorando o que a flexbox pode fazer por nós nos próximos vídeos. 21. 21 construindo e styling na seção da postagens: Olá a todos. Nesta lição, começaremos a trabalhar na seção de postagem. Então vamos começar. Tudo bem, então vamos começar removendo esse conteúdo falso. Só precisávamos dele para testar as coisas. E então eu vou começar adicionando uma seção e dando-lhe uma classe de posts. E dentro dele, vou adicionar um artigo e dar-lhe duas classes, postar e postar metade. Assim, a metade do post da classe significa que este artigo levará metade do espaço da nossa área principal. Tudo bem, agora vamos adicionar uma etiqueta âncora. E dentro dele, adicionaremos uma div. E colocaremos nossa imagem dentro desta div. Então vou adicionar nossa primeira imagem aqui. E abaixo da div imagem, vamos adicionar outra div com uma classe de conteúdo post. E dentro disso vamos adicionar uma tag H2. Então este será o título do post. Em seguida, abaixo dele vamos adicionar uma tag p e adicionar algum texto Lorem dentro dela. Vamos ver isto. Você pode ver que temos a nossa imagem, depois o nosso título e, em seguida, o conteúdo. Ok, vamos continuar adicionando nossas postagens de volta ao nosso HTML. Vou copiar este artigo, colá-lo novamente, e vamos apenas mudar a imagem e o texto alt aqui, e, em seguida, mudar o título também. Agora, essas duas postagens ocuparão metade do espaço da área de conteúdo principal. Vamos fazer isso usando posts têm classe aqui mesmo. E esta pós-aula será responsável pelos estilos gerais de todos os posts. Tudo bem, abaixo disso, vamos colar nosso artigo novamente três vezes. E vamos mudar a classe de posts, tem que postar 1 terço para estes três artigos. E também mudaremos as imagens e os títulos. Então agora você pode ver que temos nossos três artigos com uma classe de post 1 terço para cada um. E esta classe será responsável por fazer com que cada um desses artigos tenha uma largura de cerca de 30% da área de conteúdo principal. Assim, os três artigos se sentarão um ao lado do outro e se alinharão. Agora vamos adicionar nosso último artigo. Vou colar o artigo uma última vez e mudou de post para postar cheio. Eu também mudarei a imagem, o texto alt e o título. Tudo bem, então este artigo terá largura total. Ele ocupará toda a largura da área de conteúdo principal. Vamos ao nosso navegador e ver esses artigos. Você pode ver que temos todos os nossos artigos agora. Então vamos começar a estilizar. Voltamos ao nosso CSS. E aqui mesmo entre nossos comentários, vamos segmentar nossa área de conteúdo principal e adicionar preenchimento ao EM. E agora você pode ver que temos um pouco de espaço. Vamos adicionar os estilos gerais para nossas postagens. Vou segmentar pós-classe e definir a cor de fundo para branco e adicionar margem inferior um, m. Assim podemos ter alguns espaços entre os artigos. Em seguida, vamos segmentar a tag âncora dentro nossas postagens e adicionar cor preta para remover esta cor azul. E decoração de texto, nenhum para remover a linha sob o texto. O texto está muito melhor agora, mas queremos alguns espaços aqui. Para fazer isso, direcionarei a classe de conteúdo da postagem e adicionarei preenchimento 0 à parte superior, 40 pixels à direita e à esquerda e 20 pixels na parte inferior. Você pode ver que está melhor agora. Tudo bem, então vamos estilizar o cabeçalho da postagem. Vou direcionar o cabeçalho do nosso post e adicionar cor de fundo, o nosso amarelo. Em seguida, mude a cor para preto. Em seguida, preenchendo 20 pixels para obter algum espaçamento e centro de alinhamento de texto. Você pode ver que parece bom. Mas queremos que este fundo amarelo ocupe toda a largura do conteúdo da publicação div está olhando assim por causa do preenchimento de 40 pixels à direita e à esquerda da div conteúdo da publicação. Então, a fim de fazer o fundo amarelo ocupar toda a largura, podemos adicionar uma margem de menos 40 pixels para o H2. Então de volta ao nosso CSS. Vou adicionar margem 0 na parte superior menos 40 pixels à direita e à esquerda, e 30 pixels na parte inferior para ter um pouco de espaço entre ela, a tag p. E agora você pode ver que está ocupando toda a largura. Agora estamos quase terminando. A única coisa que resta é fazer com que a imagem do artigo ocupe essa largura total. Então de volta ao nosso CSS. Vou subir aqui abaixo dos nossos estilos básicos, e vou direcionar todas as imagens e exibi-las como elementos de bloco. Defina sua largura para 100%. Então, ele vai ocupar a largura total e definir sua altura para auto. E agora nossas imagens estão ocupando toda a largura do contêiner. Temos nossos posts olhando exatamente como queremos. A única coisa que resta é controlá-los usando Flexbox. E faremos isso na próxima lição. 22. 22adicionar flexbox aos nossos posts: Olá a todos. Nesta lição, continuaremos trabalhando em nossa seção de postagens e controlaremos seu layout usando Flexbox. Então vamos começar. Muito bem, foi assim que saímos da nossa secção de Posts. Você pode ver que cada post está ocupando 100% da largura. E isso é o que queremos em dispositivos móveis. Por exemplo, se eu encolher meu navegador, você pode ver que isso está ótimo em dispositivos móveis. Agora somos o que queremos fazer em telas de tamanho médio e ampliar telas de sinais é em telas médias ou tablets. Queremos que cada post use metade do espaço da área de conteúdo principal para que possamos ter duas postagens lado a lado. E em telas grandes queremos que as duas primeiras postagens sejam na primeira linha, então as três postagens a seguir estejam na segunda fila. E, em seguida, o último post para ocupar toda a largura da terceira linha. Ótimo, então vamos voltar ao nosso CSS e fazer isso. Primeiro, criarei um novo papel para dispositivos de tela de tamanho médio. E dentro dela, vou direcionar a seção de postagem, que contém todos os nossos posts. E eu vou definir sua propriedade de exibição para flex. Assim, todos os posts serão exibidos lado a lado. E, em seguida, adicione o rato envoltório flexível para que as postagens vão envolver para a próxima linha. Se eles não têm espaço livre. Então eu vou segmentar todas as postagens e, em seguida, adicionar base flexível 49%. Vocês podem ver que agora temos duas postagens em cada linha. E como eu defini a base flexível para 49 por cento, você pode ver que temos espaço vazio aqui, que é 2% das principais áreas de conteúdo com. Agora, queremos mover este espaço restante e colocá-lo entre os postes. Então vamos voltar para o nosso CSS e ir para postagens e adicionar espaço de conteúdo justificar entre. E você pode ver agora que o espaço restante é bem aqui entre as postagens que no final do contêiner mais. E este é o layout que queremos em telas médias. Agora, vamos continuar trabalhando para alcançar o layout que queremos em telas mais amplas. Voltar ao nosso CSS. Vamos adicionar um novo papel para telas mais amplas. E vamos segmentar as postagens com a classe do pós-guerra 1 terço, e adicionar base flexível 32 por cento. Em seguida, vamos segmentar as postagens com uma classe de post metade e adicionar base flexível 49%. E, finalmente, vamos segmentar os posts com a classe de gabarito disse base flexível para 100%. E assim, temos nossos posts dispostos da maneira que queremos em telas maiores. E se reduzirmos nosso navegador, o layout mudará em telas médias e, em seguida, em dispositivos móveis. E agora terminamos nossa seção de postagem e continuaremos trabalhando na próxima lição. 23. 23, construindo e estilizando a seção de relógios: Olá a todos. Nesta lição vamos começar a construir nossa seção de relógio hoje. Então vamos começar. Muito bem, vamos começar aqui depois da secção dos correios. Vamos adicionar uma nova seção com uma classe de relógio. E dentro dessa seção, vamos adicionar H2 com uma classe de cabeçalho seção. E diremos para assistir hoje. E abaixo disso vamos adicionar uma div com uma classe de cartão de relógio. E dentro dele vamos adicionar outra div que irá conter a imagem do cartão e dar-lhe uma classe de imagem do relógio. E colocaremos nossa imagem dentro dessa div. E abaixo disso, adicionaremos outra div com uma classe de conteúdo do relógio. E esta div irá conter todos os textos irá adicionar. Então, dentro dessa div, vamos adicionar uma tag H2. E, em seguida, abaixo disso, vamos adicionar outra div com uma classe de informações de filme. Então esta div irá conter todas as informações sobre o nosso filme, como o tempo de execução do filme, o ano em que foi lançado, sua categoria ou um gênero, e assim por diante. Agora, vamos adicionar cinco vãos dentro dessa div. E depois da div de conteúdo do nosso relógio, vamos adicionar uma tag p e dar-lhe uma classe de história de filme. E então vamos adicionar algum texto fictício. E, em seguida, abaixo dessa tag p, vamos adicionar uma tag âncora e apenas dizer ler mais. E então vamos copiar este div cartão de relógio, colá-lo novamente, em seguida, mudar a imagem. E se formos para o nosso navegador, aqui temos os nossos dois cartões. Em seguida, vamos discá-los em nosso CSS. Vou ficar aqui entre os comentários. E eu vou mirar no cabeçalho da seção no início. Em seguida, adicione cor preta, tamanho da fonte três, VM, para que seja maior e mais agradável. E depois o centro de alinhamento de texto. E você pode ver que está muito melhor agora, vamos continuar trabalhando. Vou mirar o div cartão de relógio e dar-lhe uma margem de 1 e m para que possamos ter um pouco de espaçamento abaixo de nossas cartas. Em seguida, vamos segmentar nossa div conteúdo do relógio e adicionar cor de fundo preto. Em seguida, cor branca. E preencher três VM. Você pode ver que estamos chegando mais perto aqui. Então vamos direcionar a idade para definir seu tamanho de fonte para, para comê-los. E é peso de fonte para 300. E vamos adicionar margem 0 e texto transformar para capitalizar. Vamos continuar. Vou segmentar a classe de informação do filme e definir o peso da fonte como negrito. Então vamos mirar os vãos dentro dele e adicionar preenchimento, certo? 1.5. Nós também vamos segmentar as tags p com a classe história filme. E vamos adicionar margem um EM na parte superior e inferior. Agora vamos adicionar a etiqueta âncora e mudar sua cor para branco. E, em seguida, disse que é font-weight para negrito. E agora temos nosso cartão de relógio com ótima aparência para dispositivos móveis. Na próxima aula, nós vamos aprender como alterá-lo em telas mais amplas usando Flexbox. Então, vejo você então. 24. 24adicionando flexbox na seção de relógio: Olá a todos. Depois de criar e estilizar nosso relógio seção hoje para dispositivos móveis na última lição. Neste, vamos fazer com que pareça bom para telas mais largas. E faremos isso usando flexbox. Então, vamos começar. Tudo bem, então o que queremos fazer aqui é queremos que a imagem fique à esquerda e o conteúdo fique à direita. Fácil o suficiente. E nós fizemos algo muito parecido antes enquanto estávamos construindo o layout do Santo Graal. Você vai se lembrar que nós flutuamos a área de conteúdo principal para a esquerda e uma barra lateral para a direita. Então vamos fazer isso. Criaremos novas regras para telas médias e grandes. O layout funcionará bem para os tamanhos de tela médio e grande. E dentro desta consulta de mídia, vamos direcionar a div cartão de relógio, definir sua propriedade de exibição para flex. E assim, você pode ver que a imagem está agora à esquerda e o conteúdo está à direita. Mas agora queremos centralizar esse conteúdo verticalmente. Então vamos para o nosso CSS e segmentar o conteúdo do relógio div, que contém todo o conteúdo. E, em seguida, vamos adicionar display, flex e flex coluna de fluxo. E, em seguida, é claro, justificar o centro de conteúdo. Você pode ver que o conteúdo está perfeitamente centrado agora. Agora tudo está ótimo. Mas queremos alterar a ordem desta imagem e colocá-la no lado direito do recipiente. Podemos fazer isso com a propriedade do pedido. Então, se eu ir para o meu HTML e adicionar uma classe de taxa de imagem para a imagem que eu quero colocar à direita. E, em seguida, ir para o meu CSS e segmentar esta imagem, imagem classe direita e definir sua propriedade ordem para dois para que ele virá após o conteúdo. Lembre-se, todos os itens flexíveis têm o pedido 0 por padrão. Portanto, qualquer item que tenha uma ordem maior que 0 será exibido no final da linha. E você pode ver que a imagem é agora exibida à direita. E agora terminamos a seção de vigia. Continuaremos trabalhando nos próximos vídeos. 25. 25 construindo e marcando a seção de download: Olá a todos. Nesta lição, começaremos a construir a seção de download agora. Vai ser divertido. Então, vamos começar. Vamos começar aqui abaixo da seção de relógio e adicionar uma nova seção com uma classe de download. E dentro dessa seção, vamos adicionar uma tag H2 com uma classe de cabeçalho seção. E diremos baixar agora. E, em seguida, abaixo disso, vamos adicionar uma div com uma classe de cartão de download. E dentro dessa div, vamos adicionar outra div com uma classe de imagem de download. Esta div irá recipiente imagem e dentro dele irá adicionar essa imagem. E abaixo desta div de imagem de download, adicionaremos outra div com uma classe de conteúdo de download. Claro, isso conterá todo o conteúdo desta seção. E dentro disso, vamos adicionar uma etiqueta âncora. E dentro desta tag âncora, vamos adicionar uma extensão e apenas dizer download. E, em seguida, vamos adicionar Font Awesome ícone abaixo disso. E abaixo desta tag âncora, vamos adicionar uma div com uma classe de informações de download. E dentro disso, outra div com uma classe de downloads gênero. E dentro desse gênero de download div, nós vamos adicionar tags h4 e apenas dizer gênero. E abaixo disso, adicionaremos uma tag p e adicionaremos as categorias para a nossa série. E abaixo da classe de gênero de download, vamos adicionar outra div com uma classe de elenco de download. Então, esta div conterá imagens do elenco que estava na série. E dentro dele, vamos adicionar um H4 e apenas dizer elenco. Em seguida, vamos adicionar algumas imagens para o elenco da série. E, finalmente, abaixo da div com uma classe de informações de download, adicionaremos outra div com a classe de classificação de download. E dentro dele, vamos adicionar quatro vãos. O primeiro teremos uma classe de taxa e diremos 8,7. Então vamos adicionar um segundo e dizer cem, duzentas classificações. E finalmente, o último. E vamos dizer seis temporadas. Então vamos ver como isso vai ficar em nosso navegador. Você pode ver que isso não parece bom. Então vamos voltar ao nosso CSS e começar a estilizar isso. Eu vou ficar aqui entre os comentários e eu vou começar por segmentar a div cartão de download e adicionar margem inferior um EM para obter um pouco de espaçamento. E depois disso, vamos direcionar a div de conteúdo de download e definir sua cor de fundo para branco. E então vamos apontar a âncora dentro dela e definir sua cor de fundo para preto. Em seguida, faça sua cor branca. E adicione um preenchimento de um EM de cima e de baixo e duas VM da esquerda e da direita. Então vamos dizer decoração de texto nenhum e texto transformar capitalizar. Você pode ver agora que temos o nosso conteúdo de download div com cor de fundo branco. E esta âncora aqui tem um fundo preto. Mas vamos tornar este ícone maior. Voltar ao meu CSS. Vou direcionar o ícone dentro da tag âncora e definir seu tamanho de fonte como 2.5 EM. Então você pode ver que é maior. Agora, vamos continuar. Vamos adicionar um pouco de preenchimento aqui para a classe de informações de download. Então, de volta ao nosso CSS. Vou segmentar a classe de informações de download e adicionar preenchimento 1 e m de cima e de baixo, e depois para EM da esquerda e da direita. Em seguida, vamos fazer essas imagens menores porque elas estão parecendo estranhas agora. Então eu vou direcionar as imagens dentro da div de elenco de download e definir a altura para 60 pixels. Em seguida, sua largura também para 60 pixels. E, em seguida, adicione um raio de fronteira de 50% para que ela se torne uma imagem circular. Você pode ver agora que, no geral, as seções estão parecendo mais limpas. Tudo bem, vamos adicionar alguns estilos para este download ler div, engole, voltar para o meu CSS e segmentar esta div e cor de fundo, nossa cor amarela. Em seguida, adicione o preenchimento, um EM de cima e de baixo e dois EM da esquerda e da direita. Em seguida, adicione a cor preta e o tamanho da fonte 00,9 AM. Agora, vamos mirar nesta extensão. Você se lembra que tem uma classe de taxa. Então eu vou voltar para o meu CSS e segmentar este span e adicionar o tamanho da fonte, 2,5 mm. Peso da fonte, negrito e margem, inferior menos 0,25 EM. Voltar ao nosso CSS. Vou aqui abaixo do seletor de classes de informações de download. E vou selecionar o H4 e adicionar a margem 0. Em seguida, vou adicionar a tag p e adicionar margem 0 também. E tamanho da fonte 0,9 EBM. E terminamos o estilo desta seção. E a próxima lição começaremos a adicionar nosso flexbox para que pareça da maneira que queremos. Então, vejo você então. 26. 26 adicionar flexbox na seção de download: Olá a todos. Nesta lição, vamos alterar o layout da seção de download usando Flexbox. Então, vamos começar. Tudo bem, então você pode ver aqui nós temos nossa seção, e ele contém dois grandes dibs. A primeira div, que contém a imagem e tem uma classe de imagem de download. E o segundo, que contém todo esse conteúdo e tem uma classe de conteúdo de download. Se eu encolher meu navegador até atingir o tamanho da tela do celular e ir para a minha demonstração aqui. Você pode ver que temos nossa imagem ocupando toda a largura. E abaixo dele temos a div de conteúdo de download. E você pode ver que a etiqueta âncora aqui está ocupando toda a largura. E abaixo dele, este download info div também está ocupando toda a largura e as imagens são exibidas horizontalmente. Além disso, a seção de leitura está bonita. Então vamos para o nosso CSS e mudar o nosso layout um pouco. Vou selecionar a div de conteúdo de download, que contém a tag âncora, a div info e a div de classificação. E eu vou dizer display flex. Lembre-se que queremos que eles se empilhem abaixo um do outro e dispositivos móveis. Então eu vou definir fluxo flexível para coluna. E agora você pode ver que a etiqueta âncora aqui está ocupando toda a largura. Isso ocorre porque stretch é o valor padrão para a propriedade align items. E você vai lembrar que os itens de alinhamento funcionam ao longo do eixo transversal, que é horizontal neste caso, porque o fluxo de fluxo é definido na coluna. Então, por exemplo, se eu voltar para o meu CSS e adicionar itens de alinhamento, flex start. Você pode ver que os elementos dentro da div de conteúdo de download estão alinhados ao início do contêiner. Muito bem, vamos remover esta linha. E vamos continuar. Queremos que o conteúdo dentro desta etiqueta âncora fique abaixo um do outro. Lembre-se, dentro desta tag âncora, temos uma extensão que contém essa palavra de download. E então temos um ícone abaixo disso. Então, podemos voltar ao nosso CSS, depois direcionar a tag âncora e definir a exibição como flex. Em seguida, flex coluna de fluxo para que os elementos se sentem abaixo um do outro. E, em seguida, justificar o centro de conteúdo para se certificar de que os elementos serão sempre centrados verticalmente, mesmo se a altura muda. E, em seguida, vamos apenas adicionar texto, alinhar centro. E agora a etiqueta âncora está do jeito que queremos. Em seguida, queremos que esta div com a classe de downloads gênero e esta div com uma classe de download cast seja exibida como contêineres flexíveis para que o conteúdo seja exibido horizontalmente, não verticalmente. Então, de volta ao nosso CSS. Vamos segmentar o gênero de download e baixar divs elenco. E vamos definir a propriedade de exibição para flexionar e disse flex wrap para embrulhar para se certificar de que os elementos vão envolver para a próxima linha se eles não têm espaço. E você pode ver agora o conteúdo dentro de cada um deles é exibido horizontalmente com esta palavra aqui não está centralizada verticalmente. Então, de volta ao nosso CSS. Vou adicionar um centro de itens de linha. E você pode ver agora eles estão centrados perfeitamente ao longo do eixo transversal, que é vertical aqui porque o fluxo flexível é rho por padrão. Em seguida, vamos passar para a classificação de download. Nós só queremos fazer com que pareça a etiqueta âncora lá em cima, o que significa que queremos que todos os vãos dentro dela sejam exibidos um abaixo do outro e sejam centralizados. Para que possamos voltar ao nosso CSS. E então aqui ao lado da etiqueta âncora, adicionaremos o seletivo para a seção de classificação de download. E assim, temos do jeito que queremos. Próximo. Também queremos adicionar um pouco de espaçamento aqui. Então, de volta ao nosso CSS. Vou mirar o H.264 que está dentro da seção de informações de download. E eu vou adicionar base flexível 20 por cento. E agora você pode ver que há espaço aqui, que ficará bem em dispositivos móveis. Em seguida, eu quero adicionar um pouco de margem aqui. Então, de volta ao nosso CSS. Vamos segmentar o gênero downloads div, e adicionar margem inferior, uma vez que dez pixels. E agora parece melhor. Então agora isso está ótimo para dispositivos móveis. Mas em tablets em telas largas, queremos que a tag âncora, a seção de informações download e a seção de leitura de download sejam exibidas lado a lado. Isso pode ser feito super facilmente usando flexbox. Nós só precisará segmentar seu recipiente, que é a div de conteúdo de download, e definir sua propriedade de exibição para flex. Então vamos fazer isso. Voltar ao nosso CSS. Farei uma nova regra para telas médias e grandes. Em seguida, direcione o contêiner de conteúdo de download e diga display flex. Agora eles são exibidos lado a lado horizontalmente. Mas há um problema. Temos um espaço vazio bem aqui. Então precisamos distribuir esse espaço vazio entre os três elementos. Você se lembra que podemos fazer isso usando a propriedade flex grow. Por exemplo, se eu definir a propriedade flex grow para cada um deles como um, então esse espaço livre será distribuído igualmente entre eles. Mas o que eu vou fazer aqui é definir a propriedade flex grow para a âncora e a seção de classificação de download 2, 1, e defini-la como dois para a seção de informações de download. Dessa forma, ocupará o dobro do espaço nas outras duas, porque tem mais conteúdo. Então, de volta ao nosso CSS. Vou direcionar a tag âncora e a classificação de download e definir flex crescer para um. Então eu vou segmentar o div info download e disse flex crescer para dois. E agora você pode ver que esta seção está ótima. E se eu encolher meu navegador, você pode ver que ele está totalmente responsivo em todos os dispositivos. Se você alguma vez tentar alcançar este tipo de layout sem Flexbox, você vai achar que é muito difícil. Mas com Flexbox, tudo é muito mais fácil. Então, esta é a lição para todos, e eu verei vocês na próxima. 27. 27 construindo nossa galeria com a galeria de masonry horizontal usando flexbox usando flexbox: Olá a todos. Nesta lição, estaremos construindo nossa galeria. Então, vamos começar. Tudo bem, pessoal, vou começar por vir aqui depois da seção de download e adicionar uma nova seção com uma classe de galeria. E dentro dele, vou adicionar um H2 e dar-lhe uma classe de cabeçalho seção. E vamos dizer galeria de filmes. E abaixo disso, vou adicionar uma div com a classe de imagens de galeria. E dentro dessa div, estaremos adicionando os divs que contêm nossas imagens. Então, primeiro, vou adicionar uma nova div com uma classe de imagem de galeria. E dentro disso, vou adicionar uma etiqueta de âncora. Em seguida, estaremos adicionando nossa imagem dentro da tag âncora. Se eu for ao meu navegador e ver isso, você pode ver que temos nossa imagem bem aqui. Agora de volta ao nosso HTML. Vou pausar a gravação e copiar esta div com a classe de imagem da galeria dez vezes e mudar as imagens. Tudo bem, então estamos de volta. Eu adicionei 10 divs com novas imagens. Então, se eu for para o meu navegador, você pode ver que eles estão sentados abaixo um do outro bem aqui. Agora, vamos para o nosso CSS. Vou mirar a div de imagens da galeria, que contém todas as divs internas. E eu vou definir sua propriedade de exibição para flex. Você pode ver agora todas as divs de imagem da galeria que contêm as imagens exibidas horizontalmente em uma linha. Vamos voltar para o nosso CSS abaixo deste display flex e disse flex, embrulhar para embrulhar. E também vamos direcionar as divs com a classe de imagem galeria e adicionar altura 250 pixels para que todas as divs terão a mesma altura. Você pode ver agora as imagens são exibidas uma abaixo da outra novamente, e todos nós temos a mesma altura de 250 pixels. Vamos voltar ao nosso CSS. Em seguida, queremos adicionar algumas propriedades de base flexível aleatória, divs que contêm nossas imagens. Dessa forma, cada div terá uma largura diferente das outras, como o layout que queremos. Agora podemos fazer isso de duas maneiras. Primeiro, podemos apenas adicionar uma classe única para cada div e, em seguida, segmentar essas classes individualmente em nosso CSS e adicionar diferentes propriedades de base flexível para cada uma delas. Mas no nosso caso, temos 10 divs. Então, seria muito difícil fazer isso a cada um deles e não é uma solução dinâmica. A outra maneira é usando alguns seletores CSS avançados. Então vou colar um código aqui. E agora você pode ver que as imagens têm valores aleatórios para sua propriedade de base flexível. Vamos ao nosso CSS e explicarei o que acabei de fazer. Então aqui, eu acabei de selecionar a div de imagem da galeria. E no caso de você não saber o que o enésimo filho faz, ele só aceita números para determinar o elemento específico que você deseja. Então, por exemplo, se eu adicionar um aqui, então o que isso vai fazer é que ele vai atingir a primeira div que tem a classe de imagem galeria. E se eu adicionar cinco, então ele tem como alvo a quinta div com a classe de imagem galeria e assim por diante. Mas o que é isso, isso para n mais um? Bem, em primeiro lugar, a letra aqui significa que este processo de seleção será repetido dinamicamente. Por exemplo, se eu apenas remover isso e adicionar apenas, então este será direcionado para o primeiro elemento que tem a classe de imagem de galeria, depois o segundo, depois o terceiro, e assim por diante. Para que, no final, todos os elementos serão selecionados. Mas se fizermos isso para n, então ele terá como alvo o segundo e adicionar a cada vez. Então o segundo, o quarto, o seis, e o oitavo, e assim por diante serão selecionados. E se fizermos isso para n, eu acho que agora você pode adivinhar que ele irá selecionar o elemento número 48 e 12 e assim por diante. Mas se fizermos isso para n mais um, então este que adicionamos é chamado de deslocamento, é o número que vamos começar a contar. Então, neste caso, vamos selecionar elementos que têm os números de 159 e assim por diante, em vez de 4, 8, 12. Então, por exemplo, se eu ir para a direita aqui para o segundo seletor e adicionar borda cinco pixels, vermelho sólido. Agora, se olharmos para este seletor, veremos para n, que significa que vamos selecionar um novo elemento a cada quatro elementos, por exemplo, para oito e 12. Mas há um dois aqui, que significa que o nosso deslocamento é dois. Em outras palavras, vamos começar a selecionar nossos elementos a partir do segundo elemento. Então será 2, 6, 10, e assim por diante. Então vamos para o nosso navegador e recarregar. E agora você pode ver que temos a borda vermelha em torno do elemento número 2, depois número 6, e depois número dez. Então agora você sabe como eu adicionei os valores dinâmicos de base flexível. Mas quando você olhar aqui, você notará que há um espaço livre. Podemos aumentar os elementos com para ocupar este espaço livre usando a propriedade flex grow. Então, de volta ao nosso CSS. Vamos excluir isso e ir para a direita aqui dentro do seletor de imagens da galeria e definir flex, crescer para um. E agora você pode ver os elementos se expandem para ocupar o espaço restante. Mas há um problema aqui. Imagens dentro de nossos divs não estão ocupando toda a altura. Isso pode ser facilmente corrigido voltando ao nosso CSS e direcionando as imagens. Em seguida, adicione altura 100. E você pode ver que as imagens estão estressadas para ocupar a altura total da div de imagem da galeria, mas elas não estão parecendo muito boas. Veja como eles são forçados a caber no contêiner. Se voltarmos para o nosso CSS e adicionar capa de ajuste de objeto. E o problema se foi. As imagens estão ótimas. Agora, resta uma coisa, precisamos de algum espaçamento entre as imagens. Então, de volta ao nosso CSS. Eu vou aqui na nossa galeria de imagens div e adicionar uma margem de 0 no topo. 0 da direita, oito pixels da parte inferior e oito pixels da esquerda. E vamos direcionar a div externa com a classe de imagens da galeria e adicionar margem esquerda menos oito pixels. Assim, ele vai puxar o contêiner oito pixels para a esquerda e compensar os oito pixels que o contêiner foi empurrado para a direita. Então, aí está. Um layout de galeria muito avançado que parece ótimo e é totalmente responsivo. Se eu visualizá-lo em telas diferentes, você pode ver que ele é totalmente responsivo. Os elementos estão esfregando bem quando não há espaço suficiente. Porque lembre-se, nós colocamos envoltório flexível para embrulhar. Então é isso para esta lição. Todo mundo. Na próxima lição, continuaremos construindo nossa galeria. Então, vejo você então. 28. 28adicionando plugin de luz de galeria à nossa galeria: Olá a todos. Nesta lição, estaremos criando a janela modal para a nossa galeria usando o plugin JavaScript Lightbox criado por dinheiro baixo o carro. Então, vamos começar. Tudo bem, agora, se olharmos para o nosso HTML, você pode ver que nossas imagens estão embrulhadas dentro de tags âncora. Agora, na abertura de uma tag, queremos usar o atributo href para controlar o que estamos apontando. Queremos que cada imagem em miniatura seja vinculada à versão não cruzada dessa imagem. Então eu vou adicionar H ref e, em seguida, copiar o caminho da imagem e colá-lo aqui. E agora, se eu voltar para o meu navegador e clicar nesta imagem, você pode ver que agora leva à imagem completa. Claramente, esta não é uma janela modal. Ainda nem ligamos a caixa de luz. E o que está acontecendo aqui é que nossa página da web está simplesmente nos ligando a uma nova página, ou, neste caso, a uma nova imagem. E podemos voltar para a nossa página simplesmente clicando no botão Voltar. Vamos voltar ao nosso HTML. Vou passar por todos os links e adicionar os atributos href para eles. Então eu vou pausar a gravação e lidar com isso. E de volta. Então agora temos nossas imagens e quando clicamos em qualquer uma delas, isso nos levará à versão completa da imagem. Agora queremos fazer a janela modal entrar em vigor quando clicamos nas imagens. Então vamos procurar por caixa de luz abrirá este link com a localização, o nome do carro. E então vamos baixá-lo. Em seguida, vamos extrair o arquivo zip, abri-lo e, em seguida, abrir a pasta dist. E precisaremos da pasta CSS aqui. Então eu vou copiar e colá-lo em nossa pasta do projeto. Também precisaremos da pasta JavaScript. Então eu vou abrir a pasta JS e copiar o arquivo js da caixa de luz. E, em seguida, volte para a pasta do projeto e abra a pasta JS e cole o arquivo aqui. E agora precisamos incluir este arquivo em nossa página web. Swell, volte para o meu editor de código e vá bem aqui antes do nosso arquivo main.js. E eu vou escrever script fonte JS, lightbox dot js. E também vamos incluir nosso arquivo CSS. Eu vou rolar até o topo da nossa página web. E vamos aqui abaixo das fontes do Google, e vamos dizer link H ref CSS, lightbox dot CSS. Agora, com a caixa de luz CSS e arquivos JavaScript no lugar, estamos a um passo de ter comportamento modal. Vamos rolar para baixo até nossas imagens da galeria. Vamos começar com a primeira imagem. Então, quando o elemento a, eu vou adicionar um novo atributo chamado caixa de luz de dados. Você pode adicionar um valor de qualquer coisa que você gosta aqui. Então eu vou usar a galeria. Agora, quando eu clicar na primeira imagem, você pode ver que ela se abre em um modal. Em seguida, precisamos aplicar este atributo data-lightbox a todas as nossas imagens. Vamos fazer isso. Agora, se voltarmos para o navegador, recarregar e abrir qualquer imagem, ele aparecerá em um modal. E se eu apertar o botão de seta para a direita no meu teclado, você pode ver a seguinte imagem é exibida bem e assim por diante. E agora terminamos nossa seção de galeria. Continuaremos trabalhando e aprendendo nas próximas palestras. 29. 29 criar nossa barra lateral usando flexbox: Nesta lição, vamos começar a adicionar conteúdo à nossa barra lateral. Então vamos começar. Tudo bem, então primeiro de tudo, eu vou bem aqui dentro da div com a classe da barra lateral. E vou apagar este conteúdo fictício que adicionamos antes. Então vamos começar adicionando uma div com uma classe de widget. E dentro dele, vamos adicionar outra div com uma classe de conteúdo widget. E, em seguida, dentro disso, vamos adicionar H3 e apenas dizer filmes top rated. E dentro disso, vamos adicionar um nav com uma classe de menu da barra lateral. E então vamos adicionar UL LI, depois uma etiqueta âncora dentro dela. E vamos dizer “O Poderoso Chefão”. E então vamos copiar esse LI e colado algumas vezes. E então vamos dizer 12 Homens Irritados e o Cavaleiro das Trevas. E agora você pode ver que nosso menu está bem aqui. Vamos ao nosso CSS e fazer um pouco mais. Vai aqui mesmo entre os comentários. E vamos mirar na barra lateral, certo? Classe. E depois adicionamos estofamento ao E M. E depois adicionamos cor preta. E abaixo disso vamos segmentar a classe widget. E vamos adicionar cor de fundo branco e, em seguida, margem inferior para EM. Então, haverá algum espaçamento na parte inferior quando adicionarmos mais widgets. Você pode ver que agora tem uma cor de fundo branco, mas vamos adicionar um pouco de preenchimento aqui. Voltar ao nosso CSS. Vou direcionar a div de conteúdo do widget e, em seguida, adicionar preenchimento de 0,5 EM da parte superior e inferior e dois EM da esquerda e direita. E, em seguida, abaixo disso, vou direcionar a UL do menu da barra lateral e adicionar list-style type, nenhum para que possamos nos livrar das balas. E, em seguida, o preenchimento deixou uma VM. Então agora você pode ver o menu é deslocado um pouco para a esquerda devido ao nosso preenchimento. Então agora vamos estilizar os links de volta para o nosso CSS. Vou apontar a etiqueta de âncora dentro do menu da barra lateral. E eu vou adicionar bloco de exibição. E, em seguida, preenchimento ponto inferior para EN para que possamos obter algum espaçamento abaixo deles. E então cor preta. Texto, decoração, nenhum. E peso da fonte, negrito. Tudo bem, você pode ver que está melhor agora. Então de volta ao nosso HTML. Vou pausar a gravação e copiar esta div com uma classe de Widget algumas vezes. E eu vou mudar o conteúdo para que possamos obter mais conteúdo em nossa barra lateral. De volta outra vez. Agora você pode ver que temos mais conteúdo na barra lateral, e nossa barra lateral está ótima em telas mais amplas. Mas se eu inspecionar qualquer elemento na página e redimensionar as janelas para que nossa barra lateral colapse quando atingimos o tamanho médio da tela. Você pode ver que os widgets estão tomando toda a largura da barra lateral, e isso ficará ótimo em dispositivos móveis. Por exemplo, se eu continuar encolhendo meu navegador até atingir o intervalo de tamanhos de tela pequenos, você pode ver que os widgets estão ótimos. Mas quando expandimos para o tamanho médio novamente, Eu acho que vai ficar melhor se tivermos dois widgets por linha em telas médias vai fazer isso acontecer usando Flexbox. Então, de volta ao nosso CSS, criaremos um novo papel para telas médias, que têm uma largura mínima de 800 dez pixels e uma largura máxima de cento, cento e vinte pixels. E então vamos mirar na barra lateral direita div. Em seguida, defina sua propriedade display como flex. Você pode ver todos os widgets agora são exibidos lado a lado horizontalmente. Voltar ao nosso CSS. Vamos abaixo do display flex e adicionar flex wrap, wrap. E agora os elementos são lidos para a próxima linha. Voltar ao nosso CSS. Vou direcionar a div com a classe de widget e adicionar base flexível 48,8%. E agora há apenas dois widgets por linha. Mas queremos que este espaço restante de 3% aqui esteja entre os widgets, não no final do contêiner. Isso é fácil de fazer. Então isso para o nosso CSS. Eu vou aqui abaixo do envoltório flexível, rato e adicionar espaço justificar conteúdo entre. E agora estão bem separados. Mas uma coisa esquerda, Vamos para o nosso CSS e rolar para cima até encontrar a classe direita barra lateral. E, em seguida, altere a cor de fundo azul para a mesma cor de fundo do corpo. E agora nossa barra lateral está ótima em telas médias. E se formos para telas menores, parece bom, então telas maiores parece ótimo dia também. Então é isso para esta lição, pessoal. E vejo-te no próximo. 30. 30 criar nosso menu e rodapé: Olá a todos. Nesta lição, vamos adicionar o menu ao nosso projeto. Então vamos começar. Tudo bem, então vamos adicionar um menu que é muito semelhante ao menu simples que criamos nas lições anteriores. Vamos remover alguns links e mudar as cores. Então aqui estou abrindo o arquivo HTML do menu de símbolos que criamos antes. E eu vou copiar este URL e ir para o arquivo HTML do projeto e copiá-lo aqui mesmo na tag nav com uma classe de menu principal. E então eu vou deixar três links e remover os outros. Vamos mudar o texto do link. Então vamos dizer assistir, depois baixar, depois galeria. E agora você pode ver o menu. Vamos também pedir emprestado os estilos do arquivo CSS do menu simples. Então agora estou abrindo o arquivo CSS e um menu simples, e vou copiar todos os estilos que adicionamos antes. Em seguida, vá para a pasta CSS do nosso projeto e cole-os aqui mesmo. Em seguida, eu vou excluir este seletor de cabeçalho menu porque nós não temos o cabeçalho menu. E então eu vou mudar este seletor de menu e torná-lo menu principal para que os estilos serão aplicados ao nosso menu. Eu também vou mudar este seletor de navegação único e torná-lo menu principal também. Dessa forma, os estilos flexbox serão aplicados ao nosso menu. E então vamos mudar este 600 pixels para 810 pixels. E também, vamos remover essa cor de fundo da URL porque temos nossa cor amarela aqui em cima. E, em seguida, mude a cor dos links para preto. Em seguida, faça seu tamanho de fonte 1.1 EM. E é negrito do peso da fonte. Além disso, quando passarmos o mouse sobre ele, queremos que a cor de fundo seja preta e a cor seja amarela. E aqui temos nosso cardápio ótimo. E quando passamos o mouse sobre qualquer link, o fundo fica preto e a cor muda para amarelo. E fica ótimo em telas largas. E se o visualizarmos em dispositivos móveis, você pode ver que os links estão bem sentados um abaixo do outro. Agora, temos uma coisa a fazer, que é o rodapé. Ele conterá apenas uma linha simples de texto. Então vamos para o nosso HTML. Role para baixo até o rodapé, e vamos apenas remover este. E dizer que todos os direitos reservados. Ahmed Sidak Udemy. Agora vamos para o nosso CSS em busca de rodapé. Em seguida, remova este seletor de cabeçalho e esta altura de 100 pixels e adicione cor branca. Em seguida, alinhe o centro e o preenchimento de texto, 1,5 e m. Em seguida, tamanho da fonte 1 ponto 2, EM e negrito do peso da fonte. Então, abaixo disso, vamos direcionar o cabeçalho e definir sua cor de fundo para preto. E agora temos o rodapé. E finalmente, finalmente, todos, terminamos nosso projeto. Acho que aprendemos muito sobre como usar o flexbox em ação enquanto estávamos construindo as diferentes seções deste projeto. Espero que você tenha gostado e espero que agora você tenha uma compreensão sólida de todas as propriedades flexbox e como usá-las. E, claro, se você tiver quaisquer perguntas ou comentários ou qualquer coisa que queira perguntar sobre isso, deixe na seção de perguntas e respostas e ficarei mais do que feliz em responder o mais rápido possível. Obrigado.