CSS Flexbox desmistificado

1. Apresentação: Olá e bem-vindo à minha turma. Meu nome é Dan Burgess e sou empreendedor e desenvolvedor web da Espanha, ao vivo na cidade de Nova York. Eu venho desenvolvendo aplicativos da web há quase dez anos. Flexbox é um modelo de layout CSS no qual os elementos dentro de um contêiner são organizados automaticamente de forma responsiva. Nesta aula, vamos analisar funções mais importantes do Flexbox. E isso lhe dará uma compreensão completa de como a ferramenta funciona. No final da aula, você deve ser capaz de entender o Flexbox e incluir um contêiner flexível em seu próprio site. A classe é para pessoas que têm alguma experiência com HTML e CSS, mas não entendem completamente o flex container. Vamos começar. 2. Configuração: Ok, então estou usando o Visual Studio Code como meu editor. Você pode baixá-lo no site do Visual Studio Code. É gratuito e é multiplataforma. Funciona em todos os sistemas operacionais. Então, criei dois arquivos. Liguei para um deles index.html e o outro, style.css. E eles estão na mesma pasta. Eu abri os dois e eles estão vazios agora. Então, vou criar aqui minha placa HTML que é muito fácil no Visual Studio Code, que é o ponto de exclamação do tipo. E isso nos dá aqui no BAC superior sobre isso, se clicarmos nele, criará a placa de caldeirinha. Vou salvá-lo. Vou deixar meu arquivo style.css em branco por enquanto. E vou escrever algo aqui só para testá-lo. E vou abrir isso. No meu caso com o Live Server, servidor ativo, é uma extensão para o Visual Studio Code. Eu o tenho aqui e já instalei. E só temos que clicar com o botão direito do mouse no arquivo e clicar em Abrir com o servidor ativo. Então, é uma estrela, então k. Agora, às vezes, abre automaticamente. Vou abrir isso no Chrome. Então, basicamente, é a parte 5500 como tem que digitar aqui. Dois-pontos do host local 5500, que é a porta e os nomes de um resolvedor. Então, estamos prontos para ir. Então, vou me livrar disso e vou criar alguns elementos aqui. Vou criar um elemento div com nossa classe de contêiner. Isso é muito fácil de fazer no Visual Studio Code. Eu só tenho que digitar ponto e, em seguida, o nome do contêiner da classe neste caso. Em seguida, pressione Enter. E ele criou um elemento div com um contêiner de classe. E dentro desse desenvolvimento, vou criar algumas outras divs. Vou dar ao primeiro uma classe de Dave, um, outro com uma classe de div dois. Vamos fazer 34. Certo? Vou salvar, e vou adicionar algum texto aqui, como, vamos chamar este item, um item 234. Certo, vou atualizar a página aqui. Na verdade, servidor ao vivo, ele é atualizado automaticamente. Então, aqui estão nossos quatro itens. Mais uma coisa, vou dar a todos esses elementos algum preenchimento e borda apenas para que possamos vê-los facilmente. Então, para isso, vou dizer div de espaço de contêiner de ponto. E isso significa todos os elementos div que estão dentro de um elemento com uma classe de contêiner. E vou dizer estofamento. Vamos dar-lhes 15 pixels e depois bordar um px, sólido. Certo? E isso não está funcionando. Oi, eu não vinculei o arquivo CSS de ponto de estilo, então, para isso, eu tenho que adicionar aqui na tag do tipo link rel igual a folha de estilo, href é igual a style dot css. E agora isso está funcionando. Então, com isso, estamos prontos para começar a converter a div principal em um contêiner flexível e ver o que podemos fazer com isso. 3. Criando um Flex Container: Ok, então aqui, aqui, vou adicionar uma regra para a div com um contêiner de classe. Então, para isso, direi o contêiner. E todas essas regras se aplicarão a essa div. Então, tudo o que temos que fazer para torná-lo um contêiner flexível é dizer display flex. Agora, este é um contêiner flexível, esta div aqui. Então, isso agora parece diferente. Existem algumas propriedades que foram aplicadas automaticamente. Falaremos sobre eles em um segundo. Mas, basicamente, é apenas uma nota sobre nomeação. Então, isso é chamado de contêiner flexível. E esses são os itens flexíveis. Também podemos nos referir ao contêiner flexível como pai e aos itens div como filhos. Portanto, ao trabalhar com o Flexbox, teremos algumas propriedades que se aplicam ao pai em seu contêiner flexível. Teremos algumas propriedades que se aplicam às crianças. Então, vamos começar com as propriedades que se aplicam ao pai, ao próprio contêiner flexível. 4. Propriedades do recipiente Flex: Portanto, a primeira propriedade será direção flexível e o valor padrão é rho. Então, se eu fizer isso, isso é redundante. Não vai fazer nada. É o que já temos. Basicamente, quando a direção flexível é itens de linha, os itens serão exibidos da esquerda para a direita. Nos países em que escrevemos da esquerda para a direita, será o oposto em lugares em que as pessoas da direita para a esquerda, como por exemplo, em árabe, pessoas da direita para a esquerda. Então, seria o oposto. Mas em inglês, escrevemos da esquerda para a direita. Portanto, os itens flexíveis serão exibidos da esquerda para a direita. Podemos fazer em vez de linha, linha inversa. E, claro, isso o reverterá. E agora eles começam pela direita e depois você vai para a esquerda. Também podemos fazer coluna. Agora, a direção não será mais horizontal, será vertical. E começamos com o primeiro item. E, por fim, é claro que podemos fazer a coluna inversa em que agora o item um estará na parte inferior e depois iremos para 34. Então, essas são as quatro direções flexíveis que temos. Portanto, temos realmente uma horizontal, seja no fluxo normal de textos como da esquerda para a direita nos países ocidentais. Linha inversa, que é da direita para a esquerda nos países ocidentais, coluna que é como de cima para baixo, e coluna reversa de baixo para cima. Vou me livrar desse. A próxima propriedade será flexível, embrulhar. O valor padrão. Ele vai ser não, embrulhe este. Então, se eu fizer isso e salvar, nada vai acontecer e, na verdade, não podemos vê-lo. Eu tenho que abrir as ferramentas do desenvolvedor para você vê-lo. Certo? Então, se eu diminuir a janela, quando não houver espaço suficiente para eles, eles vão encolher. Então, se mudarmos a queda do fluxo de probabilidade, o que vai acontecer é que quando tornarmos a janela menor, os itens começarão a se envolver. Seu quarto item vai para a próxima linha e depois o terceiro e depois o segundo, mas eles vão manter seu tamanho. Então, vamos dar uma olhada nisso. Então, vamos fazer aqui rap. E agora vemos como o quarto item vai para a próxima linha, etc. E, por fim, envolva de forma inversa. Então você já pode imaginar o que vai acontecer. Basicamente, eles estão envolvendo de baixo para cima em vez de cima para baixo. Então, vou me livrar disso e a próxima probabilidade será justificar o conteúdo. Então, o início é o valor padrão. Se eu fizer isso, nada acontece. Mas também podemos fazer aqui, e é claro que haverá justificação no final. E também podemos fazer o centro. E agora eles estão no centro. E há mais três que são interessantes e muito úteis. Um deles é um espaço entre este. item um e o item quatro estão no início e no final do contêiner flexível. E então todos os outros itens neste caso, item número 23 estão uniformemente espaçados dentro deles. Também temos espaço redondo. E neste caso, todos os itens têm a mesma quantidade de espaço ao redor deles. Então este tem esse espaço aqui e este espaço aqui, e este tem esse espaço aqui e este espaço aqui. O que acontece com este, é claro, é que entre o item 12, temos o dobro dos espaços entre o item um e o início do contêiner flexível , é claro, porque aqui temos o espaço que pertence ao item um e ao espaço que pertence ao item dois. Se quisermos uma quantidade igual de espaço entre todos os itens e também entre o primeiro e o último item no contêiner flexível, podemos usar um espaço uniformemente. Agora, todos os espaços são iguais e fecham o espaço entre o primeiro item e o início do contêiner de fluxo e o quarto item e o final do contêiner flexível. Vou me livrar disso. E esta próxima propriedade é alinhar itens. Então, para este, vou adicionar mais algumas coisas aqui. Por exemplo, no primeiro, adicionarei um título H2, um parágrafo. No terceiro. Vou adicionar isso e também um parágrafo extra. Certo? Portanto, o valor padrão dos itens de alinhamento de propriedade será um alongamento. Então isso é redundante. O que isso significa é que todos os itens se estenderão em sua altura para corresponder à altura do item mais alto, que neste caso é o item número três. Se, em vez disso, dizemos aqui flex, comece. Agora, eles estão todos alinhados verticalmente. Na parte superior do contêiner flexível. Se dissermos centro, haverá alinhado no meio. E se dissermos inferior, não inferior, se dissermos flex e haverá alinhamento na parte inferior do contêiner flexível. 5. Propriedades do item Flex: Ótimo. Então, vamos dar uma olhada nas propriedades das crianças. Então, temos isso rolando aqui, mas esse seletor afeta todas as crianças como um grupo. Vamos direcioná-los individualmente. Agora, para isso, vou criar uma linha para cada criança. Então, digamos 1234. Certo, perfeito. Portanto, o primeiro é ordem e o valor padrão é 0. Então, se eu fizer isso, nada acontece. Mas se em vez de 0, eu coloquei aqui também, ainda não o salvei. Mas não estará na segunda posição. Veremos o que acontece. Vou salvá-lo. Agora, o primeiro, vou realmente aqui, chamar este item um e o item três apenas para que possamos vê-los facilmente. Então, o item um está agora no final. E a razão é porque todos os outros itens, eles têm o pedido 0 automaticamente. Então, basicamente, este é 0, este é 0, este é 0, e este tem o valor mais alto. Então, ele vai no final. Se neste fornecemos um valor de ordem de três. Agora esta div três vai no final. Então, é basicamente assim que funciona. A última propriedade que vamos olhar é flexível, crescer. E este é meio complicado. Então, vou me livrar disso antes de tudo. Certo? Então é assim que funciona. O valor padrão é 0. Então, se eu disser flex crescer 0, há redundante. Nada muda, ok? Então, basicamente, todos os itens recebem o espaço que ele precisa, dentro de seu contêiner flexível com base em seu conteúdo. Portanto, é um, é ocupado espaço suficiente para exibir seu conteúdo. E o preenchimento que eles têm, que é de 15 pixels em todos os lados. Se em vez de 0, definimos isso como um, seja isso em todos eles. Certo? Agora vemos que cada um está ocupando um quarto do espaço disponível, que é a largura da janela. Então, pode ser tentador pensar que se definirmos este para dois, agora, essas são o subtotal de cinco unidades. Então, esses levariam como 1 quinto, e este levará dois quintos. Mas não é exatamente assim que funciona. Deixe-me salvar isso. Isso não é exatamente o que está acontecendo aqui. Se, por exemplo, eu definir isso como quatro, será mais fácil vê-lo. Agora, se isso fosse o que aconteceu, basicamente seriam sete unidades no total. Então, esses levariam como 1 sétimo cada, e este levaria quatro sétimos. Mas realmente este é o meio. Se este fosse tomado quatro sétimo do espaço, teria que levar mais da metade e não é isso que está acontecendo. Então, veja como funciona. Basicamente, se dissemos todos eles novamente para 0, eles estão ocupando esse espaço e há todo esse espaço livre. Então, quando eles não estão definidos como 0, é esse espaço livre daqui até o final que dividido de acordo com o número que eles têm. Então, de forma proporcional. Então, se definirmos este para quatro e todos eles querem um. Então, basicamente, cada um dos três primeiros levará 1 sétimo desse espaço. Eu não sou do espaço inteiro, e este levará quatro sétimos desse espaço e não todo o espaço. É assim que funciona. Então, vamos definir este para 1114. Isso é o que está acontecendo. Basicamente, seu item já garantiu o espaço que ele precisa. E é o espaço livre restante que é dividido de acordo. Basicamente, como todo o espaço é considerado valer a quantidade total de unidades, como sete neste caso. E então ele é dividido e adiciona-o à sua div acordo com o número que eles têm aqui. Então, se definirmos este para 0, este só terá o espaço que ele naturalmente tem que é suficiente para ele. E agora estou, o resto do espaço livre é adicionado de acordo com esses. Agora, por exemplo, o espaço livre é dividido por seis. E esses receberam como 1 sexto do espaço livre novamente. E este recebe por seis do espaço livre. É um pouco complicado, mas é assim que funciona. 6. Outro: Obrigado por fazer minha aula e espero que tenha sido útil. Eu encorajo você a experimentar e tentar brincar com as diferentes propriedades em todos os diferentes flexíveis seus axiomas que estão disponíveis. Obrigado novamente, e te verei na minha próxima aula.