O documento explica como tornar um site desktop responsivo usando Flexbox e Media Queries em 3 etapas: 1) Introduz a importância da responsividade, 2) Explica como usar Flexbox para layout responsivo, 3) Demonstra como usar Media Queries para alterar o layout de acordo com a tela.
Como transformar um site desktop em uma aplicação responsiva com flex-box e m...Qaladies
O documento explica como tornar um site desktop responsivo usando Flexbox e Media Queries em 3 etapas: 1) Introduz o problema da falta de responsividade em sites desktop e a importância da responsividade, 2) Explica o que é Flexbox e como usá-lo para layout responsivo, 3) Apresenta Media Queries e como usá-los para alterar o layout de acordo com diferentes tamanhos de tela.
Bruna Lanzarini apresenta Flexbox, uma propriedade CSS usada para alinhar itens em um container de forma flexível. Ela explica como definir a direção dos itens, alinhá-los e distribuí-los, permitir ou não que eles quebrem linha, e fornece referências adicionais para mais detalhes sobre Flexbox.
Flexbox é uma propriedade CSS que permite organizar itens dentro de um container de forma flexível e responsiva. Com flexbox, é possível alinhar itens ao centro ou nas bordas, distribuí-los de forma uniforme e fazê-los se adaptar ao tamanho da tela. Os atributos como flex-direction, flex-wrap e justify-content controlam o alinhamento dos itens ao longo dos eixos, enquanto align-items e align-content controlam o alinhamento transversal. Propriedades como flex-grow, flex-shrink e flex-basis também permitem
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSCJoão Zaratine
O documento discute três desafios no desenvolvimento de uma aplicação Flex: 1) Criar textos ricos com formatação, 2) Exibir conteúdo HTML complexo, e 3) Otimizar o carregamento e performance da aplicação. Vários métodos são testados antes de encontrar soluções como usar um editor HTML externo, exibir conteúdo em iframes, e carregar módulos de forma assíncrona após o carregamento inicial.
JS Experience 2017 - React + Redux. Pensando em ReduxiMasters
Guilherme Ventura, Desenvolvedor Front-end Sênior da Embratel fala sobre React + Redux. Pensando em Redux no JS Experience'17
Saiba mais em https://eventos.imasters.com.br/jsexperience
1) O documento descreve como o Domain Driven Design (DDD) e o Strategic Design estão ajudando a modernizar um legado de sistema para uma empresa de medicina do trabalho.
2) O sistema começou simples mas cresceu de forma desorganizada ao longo de 5 anos, levando a muitos bugs. O DDD está sendo usado para dividir o domínio em Bounded Contexts e melhorar a arquitetura.
3) A estratégia envolve isolar funcionalidades em módulos/libs, definir interfaces para comunicação com o legado, e
Este documento fornece uma introdução ao framework Bootstrap, incluindo:
1) Uma explicação do que é Bootstrap e quais são seus principais componentes.
2) Detalhes sobre como configurar e implementar Bootstrap na criação de sites.
3) Exemplos de como utilizar o sistema de grade responsivo e outros componentes como tipografia, botões e cards.
Como transformar um site desktop em uma aplicação responsiva com flex-box e m...Qaladies
O documento explica como tornar um site desktop responsivo usando Flexbox e Media Queries em 3 etapas: 1) Introduz o problema da falta de responsividade em sites desktop e a importância da responsividade, 2) Explica o que é Flexbox e como usá-lo para layout responsivo, 3) Apresenta Media Queries e como usá-los para alterar o layout de acordo com diferentes tamanhos de tela.
Bruna Lanzarini apresenta Flexbox, uma propriedade CSS usada para alinhar itens em um container de forma flexível. Ela explica como definir a direção dos itens, alinhá-los e distribuí-los, permitir ou não que eles quebrem linha, e fornece referências adicionais para mais detalhes sobre Flexbox.
Flexbox é uma propriedade CSS que permite organizar itens dentro de um container de forma flexível e responsiva. Com flexbox, é possível alinhar itens ao centro ou nas bordas, distribuí-los de forma uniforme e fazê-los se adaptar ao tamanho da tela. Os atributos como flex-direction, flex-wrap e justify-content controlam o alinhamento dos itens ao longo dos eixos, enquanto align-items e align-content controlam o alinhamento transversal. Propriedades como flex-grow, flex-shrink e flex-basis também permitem
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSCJoão Zaratine
O documento discute três desafios no desenvolvimento de uma aplicação Flex: 1) Criar textos ricos com formatação, 2) Exibir conteúdo HTML complexo, e 3) Otimizar o carregamento e performance da aplicação. Vários métodos são testados antes de encontrar soluções como usar um editor HTML externo, exibir conteúdo em iframes, e carregar módulos de forma assíncrona após o carregamento inicial.
JS Experience 2017 - React + Redux. Pensando em ReduxiMasters
Guilherme Ventura, Desenvolvedor Front-end Sênior da Embratel fala sobre React + Redux. Pensando em Redux no JS Experience'17
Saiba mais em https://eventos.imasters.com.br/jsexperience
1) O documento descreve como o Domain Driven Design (DDD) e o Strategic Design estão ajudando a modernizar um legado de sistema para uma empresa de medicina do trabalho.
2) O sistema começou simples mas cresceu de forma desorganizada ao longo de 5 anos, levando a muitos bugs. O DDD está sendo usado para dividir o domínio em Bounded Contexts e melhorar a arquitetura.
3) A estratégia envolve isolar funcionalidades em módulos/libs, definir interfaces para comunicação com o legado, e
Este documento fornece uma introdução ao framework Bootstrap, incluindo:
1) Uma explicação do que é Bootstrap e quais são seus principais componentes.
2) Detalhes sobre como configurar e implementar Bootstrap na criação de sites.
3) Exemplos de como utilizar o sistema de grade responsivo e outros componentes como tipografia, botões e cards.
O documento discute modelagem de dados, especificamente sobre entidades, atributos e relacionamentos. Explica que uma entidade representa um conceito do sistema e possui atributos, e que relacionamentos ocorrem quando atributos de uma entidade se referem a outra entidade.
Como DDD e Strategic Design estão nos ajudando a modernizar um LegadoLuiz Costa
O objetivo desta palestra é mostrar como é possível evoluir e reescrever partes de uma aplicação legada com mais 5 anos em produção utilizando técnicas de uma parte Domain Driven Design conhecida como Strategic Design. É uma aplicação web escrita em Python e Django que suporta a operação de um grupo focado em medicina do trabalho, com clínicas espalhadas pelo país.
Nesta palestra vamos mostrar uma abordagem que pode ajudar times que precisam lidar com aplicações legadas grandes e complexas no caminho da modernização.
A proposta desta apresentação é mostrar uma alternativa para construção de aplicações com Ruby on Rails que dá ênfase a modelagem de domínio, separando o código que resolve o problema de negócio do código do framework.
Flexbox é uma nova abordagem para layouts em CSS que define um modelo de caixa flexível otimizado para interfaces. Ele consiste em um container flexível e itens flexíveis que permitem criar layouts responsivos de forma semântica e eficiente. Flexbox é suportado por todos os navegadores modernos e bibliotecas de polyfill permitem suporte no IE9. Ele permite criar uma variedade de layouts comuns de forma mais simples do que as abordagens antigas como float e table.
O documento discute o Princípio da Substituição de Liskov (LSP), que estabelece que subclasses devem ser substituíveis por suas superclasses sem alterar as propriedades desejadas do programa. O LSP é importante para manter a correção do comportamento quando se usa herança e polimorfismo. Classes derivadas devem respeitar os contratos definidos pelas classes base para não violar o princípio.
O documento discute como transformar ideias em projetos de forma efetiva. Ele apresenta ferramentas como o Business Model Canvas e o Project Model Canvas para conceber, integrar e resolver projetos de maneira visual e simplificada. Além disso, fornece técnicas como a matriz GUT para priorizar problemas e a matriz de análise de riscos para orientar ações com base na probabilidade, impacto e urgência dos riscos.
In this talk, you will learn how to identify the most common WCAG 2 failures using a screen reader and browser extensions, and the best way to fix them through good practices and semantic development.
De acordo com o IBGE, 6,7% da população tem algum tipo de deficiência, isso significa 14 milhões de usuários com necessidades especiais somente no Brasil. Prazos apertados, releases se aproximando e falta de conhecimento sobre as necessidades de usuários PcD nos fazem esquecer que ter uma aplicação acessível é imprescindível. Nesta apresentação, você aprenderá como solucionar isso desenvolvendo uma aplicação web acessível a partir de dez dicas e truques.
The document discusses the importance of semantic HTML and best practices for writing accessible code. It provides guidance on using appropriate HTML elements like <header>, <footer>, <nav> and <main> to structure pages. The document also covers best practices for images, headings, language tags, and meta tags to improve accessibility and search engine optimization. Proper use of semantic HTML helps both machines and humans understand the meaning and relationships of content.
Este documento discute os desafios e oportunidades de se viver e trabalhar como desenvolvedor front-end na Europa, incluindo requisitos comuns de vagas, como praticar habilidades técnicas e inglês, e dicas para planejar uma mudança para outro país, como pesquisar o destino ideal e desenvolver um plano de estudos.
This document discusses best practices for making web applications accessible. It begins by noting statistics on disabilities in Brazil and emphasizing the importance of accessibility. It then outlines a variety of disabilities like physical/motor impairments, autism spectrum disorder, dyslexia, hearing impairments, low vision, and use of screen readers. For each disability, it describes challenges users may face and provides both dos and don'ts for design. The key recommendations are using semantic HTML, clear labeling, transcribed content, keyboard/screen reader support, high color contrast, and more. The goal is to make web apps inclusive for all users regardless of ability.
O documento discute as mudanças na profissão de desenvolvedor front-end entre o passado e 2018. No passado, as tecnologias eram mais simples como HTML, CSS e jQuery, enquanto hoje existem novos frameworks JavaScript, responsividade, animações e desafios de otimização. Os desenvolvedores front-end atuais precisam aprender novas tecnologias constantemente e lidar com diversos dispositivos e conexões de internet.
Este documento apresenta os principais conceitos de CSS, incluindo sintaxe, seletores, box model, unidades de medida, boas práticas de nomenclatura e debugagem. Dois exercícios práticos são fornecidos para aplicar os conceitos aprendidos.
Esta talk vai te mostrar o dia a dia de trabalho de uma desenvolvedora front-end, falando sobre as praticas e tecnologias adotadas para transformar o layout entregue pelo designer em uma aplicação conectada com o backend e pronta para ser utilizada pelo usuário.
Tatiane fornece dicas para melhorar o desenvolvimento front-end, incluindo aprender HTML, CSS, JavaScript, frameworks como AngularJS, testes, versionamento com GIT e inglês. Ela lista vários recursos como tags HTML5, seletores CSS, Flexbox, Grids e executores de tarefas, fornecendo links para aprender mais sobre cada tópico.
Nesta palestra veremos o que há de novo no Ionic Framework 2, essa poderosa ferramenta para criação de aplicações mobile híbridas para iOS, Android e Windows Phone. Falaremos sobre o que há de novo no Ionic 2 e veremos códigos de exemplo para demonstrar as diferenças e o que mudou entre a versão 1 e 2.
A programação é o processo de escrever, testar e manter programas de computador usando algoritmos e linguagens de programação. Programas são construídos com algoritmos, que são sequências de passos para resolver problemas. Exemplos incluem estruturas básicas de HTML, CSS e como trocar uma lâmpada.
O documento discute as diferenças entre front-end e back-end, explicando que front-end é responsável pela interface do usuário usando HTML e CSS, enquanto back-end implementa a lógica de negócio por trás dos bastidores. O HTML é usado para estruturar páginas web e o CSS adiciona estilo.
Em um mundo cada vez mais digital, a segurança da informação tornou-se essencial para proteger dados pessoais e empresariais contra ameaças cibernéticas. Nesta apresentação, abordaremos os principais conceitos e práticas de segurança digital, incluindo o reconhecimento de ameaças comuns, como malware e phishing, e a implementação de medidas de proteção e mitigação para vazamento de senhas.
O documento discute modelagem de dados, especificamente sobre entidades, atributos e relacionamentos. Explica que uma entidade representa um conceito do sistema e possui atributos, e que relacionamentos ocorrem quando atributos de uma entidade se referem a outra entidade.
Como DDD e Strategic Design estão nos ajudando a modernizar um LegadoLuiz Costa
O objetivo desta palestra é mostrar como é possível evoluir e reescrever partes de uma aplicação legada com mais 5 anos em produção utilizando técnicas de uma parte Domain Driven Design conhecida como Strategic Design. É uma aplicação web escrita em Python e Django que suporta a operação de um grupo focado em medicina do trabalho, com clínicas espalhadas pelo país.
Nesta palestra vamos mostrar uma abordagem que pode ajudar times que precisam lidar com aplicações legadas grandes e complexas no caminho da modernização.
A proposta desta apresentação é mostrar uma alternativa para construção de aplicações com Ruby on Rails que dá ênfase a modelagem de domínio, separando o código que resolve o problema de negócio do código do framework.
Flexbox é uma nova abordagem para layouts em CSS que define um modelo de caixa flexível otimizado para interfaces. Ele consiste em um container flexível e itens flexíveis que permitem criar layouts responsivos de forma semântica e eficiente. Flexbox é suportado por todos os navegadores modernos e bibliotecas de polyfill permitem suporte no IE9. Ele permite criar uma variedade de layouts comuns de forma mais simples do que as abordagens antigas como float e table.
O documento discute o Princípio da Substituição de Liskov (LSP), que estabelece que subclasses devem ser substituíveis por suas superclasses sem alterar as propriedades desejadas do programa. O LSP é importante para manter a correção do comportamento quando se usa herança e polimorfismo. Classes derivadas devem respeitar os contratos definidos pelas classes base para não violar o princípio.
O documento discute como transformar ideias em projetos de forma efetiva. Ele apresenta ferramentas como o Business Model Canvas e o Project Model Canvas para conceber, integrar e resolver projetos de maneira visual e simplificada. Além disso, fornece técnicas como a matriz GUT para priorizar problemas e a matriz de análise de riscos para orientar ações com base na probabilidade, impacto e urgência dos riscos.
Semelhante a Como Transformar Um Site Desktop Em Uma Aplicação Responsiva (6)
In this talk, you will learn how to identify the most common WCAG 2 failures using a screen reader and browser extensions, and the best way to fix them through good practices and semantic development.
De acordo com o IBGE, 6,7% da população tem algum tipo de deficiência, isso significa 14 milhões de usuários com necessidades especiais somente no Brasil. Prazos apertados, releases se aproximando e falta de conhecimento sobre as necessidades de usuários PcD nos fazem esquecer que ter uma aplicação acessível é imprescindível. Nesta apresentação, você aprenderá como solucionar isso desenvolvendo uma aplicação web acessível a partir de dez dicas e truques.
The document discusses the importance of semantic HTML and best practices for writing accessible code. It provides guidance on using appropriate HTML elements like <header>, <footer>, <nav> and <main> to structure pages. The document also covers best practices for images, headings, language tags, and meta tags to improve accessibility and search engine optimization. Proper use of semantic HTML helps both machines and humans understand the meaning and relationships of content.
Este documento discute os desafios e oportunidades de se viver e trabalhar como desenvolvedor front-end na Europa, incluindo requisitos comuns de vagas, como praticar habilidades técnicas e inglês, e dicas para planejar uma mudança para outro país, como pesquisar o destino ideal e desenvolver um plano de estudos.
This document discusses best practices for making web applications accessible. It begins by noting statistics on disabilities in Brazil and emphasizing the importance of accessibility. It then outlines a variety of disabilities like physical/motor impairments, autism spectrum disorder, dyslexia, hearing impairments, low vision, and use of screen readers. For each disability, it describes challenges users may face and provides both dos and don'ts for design. The key recommendations are using semantic HTML, clear labeling, transcribed content, keyboard/screen reader support, high color contrast, and more. The goal is to make web apps inclusive for all users regardless of ability.
O documento discute as mudanças na profissão de desenvolvedor front-end entre o passado e 2018. No passado, as tecnologias eram mais simples como HTML, CSS e jQuery, enquanto hoje existem novos frameworks JavaScript, responsividade, animações e desafios de otimização. Os desenvolvedores front-end atuais precisam aprender novas tecnologias constantemente e lidar com diversos dispositivos e conexões de internet.
Este documento apresenta os principais conceitos de CSS, incluindo sintaxe, seletores, box model, unidades de medida, boas práticas de nomenclatura e debugagem. Dois exercícios práticos são fornecidos para aplicar os conceitos aprendidos.
Esta talk vai te mostrar o dia a dia de trabalho de uma desenvolvedora front-end, falando sobre as praticas e tecnologias adotadas para transformar o layout entregue pelo designer em uma aplicação conectada com o backend e pronta para ser utilizada pelo usuário.
Tatiane fornece dicas para melhorar o desenvolvimento front-end, incluindo aprender HTML, CSS, JavaScript, frameworks como AngularJS, testes, versionamento com GIT e inglês. Ela lista vários recursos como tags HTML5, seletores CSS, Flexbox, Grids e executores de tarefas, fornecendo links para aprender mais sobre cada tópico.
Nesta palestra veremos o que há de novo no Ionic Framework 2, essa poderosa ferramenta para criação de aplicações mobile híbridas para iOS, Android e Windows Phone. Falaremos sobre o que há de novo no Ionic 2 e veremos códigos de exemplo para demonstrar as diferenças e o que mudou entre a versão 1 e 2.
A programação é o processo de escrever, testar e manter programas de computador usando algoritmos e linguagens de programação. Programas são construídos com algoritmos, que são sequências de passos para resolver problemas. Exemplos incluem estruturas básicas de HTML, CSS e como trocar uma lâmpada.
O documento discute as diferenças entre front-end e back-end, explicando que front-end é responsável pela interface do usuário usando HTML e CSS, enquanto back-end implementa a lógica de negócio por trás dos bastidores. O HTML é usado para estruturar páginas web e o CSS adiciona estilo.
Em um mundo cada vez mais digital, a segurança da informação tornou-se essencial para proteger dados pessoais e empresariais contra ameaças cibernéticas. Nesta apresentação, abordaremos os principais conceitos e práticas de segurança digital, incluindo o reconhecimento de ameaças comuns, como malware e phishing, e a implementação de medidas de proteção e mitigação para vazamento de senhas.
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...Faga1939
Este artigo tem por objetivo apresentar como ocorreu a evolução do consumo e da produção de energia desde a pré-história até os tempos atuais, bem como propor o futuro da energia requerido para o mundo. Da pré-história até o século XVIII predominou o uso de fontes renováveis de energia como a madeira, o vento e a energia hidráulica. Do século XVIII até a era contemporânea, os combustíveis fósseis predominaram com o carvão e o petróleo, mas seu uso chegará ao fim provavelmente a partir do século XXI para evitar a mudança climática catastrófica global resultante de sua utilização ao emitir gases do efeito estufa responsáveis pelo aquecimento global. Com o fim da era dos combustíveis fósseis virá a era das fontes renováveis de energia quando prevalecerá a utilização da energia hidrelétrica, energia solar, energia eólica, energia das marés, energia das ondas, energia geotérmica, energia da biomassa e energia do hidrogênio. Não existem dúvidas de que as atividades humanas sobre a Terra provocam alterações no meio ambiente em que vivemos. Muitos destes impactos ambientais são provenientes da geração, manuseio e uso da energia com o uso de combustíveis fósseis. A principal razão para a existência desses impactos ambientais reside no fato de que o consumo mundial de energia primária proveniente de fontes não renováveis (petróleo, carvão, gás natural e nuclear) corresponde a aproximadamente 88% do total, cabendo apenas 12% às fontes renováveis. Independentemente das várias soluções que venham a ser adotadas para eliminar ou mitigar as causas do efeito estufa, a mais importante ação é, sem dúvidas, a adoção de medidas que contribuam para a eliminação ou redução do consumo de combustíveis fósseis na produção de energia, bem como para seu uso mais eficiente nos transportes, na indústria, na agropecuária e nas cidades (residências e comércio), haja vista que o uso e a produção de energia são responsáveis por 57% dos gases de estufa emitidos pela atividade humana. Neste sentido, é imprescindível a implantação de um sistema de energia sustentável no mundo. Em um sistema de energia sustentável, a matriz energética mundial só deveria contar com fontes de energia limpa e renováveis (hidroelétrica, solar, eólica, hidrogênio, geotérmica, das marés, das ondas e biomassa), não devendo contar, portanto, com o uso dos combustíveis fósseis (petróleo, carvão e gás natural).
As classes de modelagem podem ser comparadas a moldes ou
formas que definem as características e os comportamentos dos
objetos criados a partir delas. Vale traçar um paralelo com o projeto de
um automóvel. Os engenheiros definem as medidas, a quantidade de
portas, a potência do motor, a localização do estepe, dentre outras
descrições necessárias para a fabricação de um veículo
A linguagem C# aproveita conceitos de muitas outras linguagens,
mas especialmente de C++ e Java. Sua sintaxe é relativamente fácil, o que
diminui o tempo de aprendizado. Todos os programas desenvolvidos devem
ser compilados, gerando um arquivo com a extensão DLL ou EXE. Isso torna a
execução dos programas mais rápida se comparados com as linguagens de
script (VBScript , JavaScript) que atualmente utilizamos na internet
Como Transformar Um Site Desktop Em Uma Aplicação Responsiva
1. COMO TRANSFORMAR UM SITE DESKTOP
EM UMA APLICAÇÃO RESPONSIVA
Com Flex-box e Media Queries
Tatiane Aguirres Nogueira
2. TATIANE AGUIRRES NOGUEIRA
Tatiane Aguirres Nogueira
ou
@tatianeaguirres
❏ Consultant Developer na ThoughtWorks
❏ Graduada em Sistemas para Internet
❏ Coordenadora no TDC
❏ Organizadora Rails Girls POA
9. POR QUE?
❏ Experiência do usuário
❏ Crescimento do acesso via mobile
❏ Velocidade
❏ Diminuir a taxa de rejeição
❏ Aumento de vendas
❏ Compartilhamento em redes sociais
❏ Já estar preparado para o futuro
19. FLEX DIRECTION
"Define a direção dos flex itens. Por padrão ele é row
(linha), por isso quando o display: flex; é adicionado, os
elementos ficam em linha, um do lado do outro."
20. FLEX WRAP
"Define se os itens devem quebrar ou não a linha. Por
padrão eles não quebram linha, isso faz com que os flex
itens sejam compactados além do limite do conteúdo."
21. JUSTIFY CONTENT
"Alinha os itens flex no container de
acordo com a direção. A propriedade
só funciona se os itens atuais não
ocuparem todo o container."
22. ALIGN ITEMS
"O align-items alinha os flex itens
de acordo com o eixo do container.
Essa propriedade permite o tão
sonhado alinhamento central no
eixo vertical."
23. ALIGN CONTENT
"Alinha as linhas do container em
relação ao eixo vertical. A
propriedade só funciona se existir
mais de uma linha de flex-itens. Para
isso o flex-wrap precisa ser wrap."
26. FLEX SHRINK
"Define a capacidade de redução de tamanho do item se
necessário. Números negativos são inválidos."
27. FLEX BASIS
"Indica o tamanho inicial do flex item antes da distribuição
do espaço restante. "
28. FLEX
"Atalho para as propriedades flex-grow, flex-shrink e flex-
basis. Geralmente você verá a propriedade flex nos flex
itens ao invés de cada um dos valores separados."
29. ORDER
"Modifica a ordem dos flex itens. Sempre do menor para o
maior, assim order: 1, aparece na frente de order: 5."
30. ALIGN SELF
"O align-self serve para definirmos o alinhamento específico
de um único flex item dentro do nosso container. Caso um
valor seja atribuído, ele passará por cima do que for
atribuído no align-items do container."
Já faz muito tempo que ninguém mais diz “vou entrar na internet”, a gente só precisa pegar o celular, porque geralmente nós estamos sempre conectados. E essa “facilidade” que o celular nos deu de poder acessar tudo atraves dele, acabou virando um problema para os sites que foram desenvolvidos para serem acessado somente por computador.
Site responsive é aquele que se adapta perfeitamente a qualquer resolução de tela, eles são inteligentimente projetados para isso.
1 – melhorar a experiencia do usuario 2 – acesso via mobile está crescendo muito 3 – Velocidade recomendação Google PageSpeed Developers 1s 4 – Diminuir a taxa de rejeição 5 – Aumento de vendas 6 – Mais compartilhamento nas redes sociais 7 – Preparar-se para dispositivos futuros
Flexbox faz parte da especificação do CSS3 e nos ajuda a organizar esses elementos sem a ajuda do float e também nos ajudam a sanar problemas de Box Model que normalmente acontecem quando acrescentamos, padding, margin e border além da largura do elemento.
"O Flex Container é a tag que envolve os itens flex, ao indicar display: flex essa tag passa a ser um Flex Container."
“Os Flex Itens são os filhos diretos do Flex Container. É possível que um Flex Item seja também um
Flex Container.”
A mudança de row para column geralmente acontece quando estamos definindo os estilos em media queries para o mobile. Assim você garante que o conteúdo seja apresentado em coluna única.
Essa é geralmente uma propriedade que é quase sempre definida como flex-wrap: wrap; Pois assim quando um dos flex itens atinge o limite do conteúdo, o último item passa para a coluna debaixo e assim por diante.
Isso significa que ao definir flex: 1; ou algo similar nos itens, a propriedade não terá mais função. Excelente propriedade para ser usada em casos que você deseja alinhar um item na ponta esquerda e outro na direita, como em um simples header com marca e navegação.
Por padrão o valor é zero, assim os flex itens ocupam um tamanho máximo relacionado o conteúdo interno deles ou ao width definido.
Ao definir 1 para todos os Flex Itens, eles tentarão ter a mesma largura e vão ocupar 100% do container. Digo tentarão pois caso um elemento possua um conteúdo muito largo, ele irá respeitar o mesmo. Se você tiver uma linha com quatro itens, onde três são flex-grow: 1 e um flex-grow: 2, o flex-grow: 2 tentará ocupar 2 vezes mais espaço extra do que os outros elementos. OBS: justify-content não funciona em items com flex-grow definido.
UM: Valor padrão, permite que os itens tenham os seus tamanhos (seja esse tamanho definido a partir de width ou flex-basis) reduzidos para caber no container.ZERO: Não permite a diminuição dos itens, assim um item com flex-basis: 300px; nunca diminuirá menos do que 300px, mesmo que o conteúdo não ocupe todo esse espaço.NÚMERO: Um item com shrink: 3 diminuirá 3 vezes mais que um item com 1.
Quando definimos o flex-grow: 1; e possuímos auto no basis, o valor restante para ocupar o container é distribuído ao redor do conteúdo do flex-item.
AUTO: Esse é o padrão, ele faz com que a largura da base seja igual a do item. Se o item não tiver tamanho especificado, o tamanho será de acordo com o conteúdo.UNIDADE: Pode ser em %, em, px e etc.ZERO: Se o grow for igual ou maior que 1, ele irá tentar manter todos os elementos com a mesma largura, independente do conteúdo (por isso 0 é o valor mais comum do flex-basis). Caso contrário o item terá a largura do seu conteúdo.
Para melhor consistência entre os browsers, é recomendado utilizar a propriedade flex ao invés de cada propriedade separada.
NÚMERO: Número para modificar a ordem padrão. Pode ser negativo. // ZERO: 0 é o valor padrão e isso significa que a ordem dos itens será a ordem apresentada no HTML. Se você quiser colocar um item do meio da lista no início da mesma, sem modificar os demais, o ideal é utilizar um valor negativo para este item, já que todos os outros são 0.
Vale lembrar que o alinhamento acontece tanto em linha quanto em colunas. Por exemplo o flex-start quando os itens estão em linhas, alinha o item ao topo da sua linha. Quando em colunas, alinha o item ao início (esquerda) da coluna.