Neste curso aprenderemos a manusear o flexbox, que é uma especificação CSS. A proposta do curso é o desenvolvimento do Alurinha, um gerenciador de cursos online, e nosso objetivo é alcançar o resultado abaixo:
Mas, o ponto de partida do projeto é o seguinte:
Ao longo das aulas organizaremos o site reposicionando os elementos da página e para isso utilizaremos o flexbox. O HTML e o CSS do projeto já estão prontos, assim, para aqueles que não detêm conhecimento sobre HTML ou CSS é aconselhável fazer o Curso Online HTML5 e CSS3 II: Turbinando as suas páginas.
Trabalharemos também com layout de Mobile e o resultado final deve ser o seguinte:
Antes de começar, baixe o pacote com o projeto inicial e use-o nos próximos exercícios.
Começaremos o curso arrumando o cabeçalho! Por enquanto ele está como mostra a imagem abaixo:
Nosso objetivo é deixá-lo com a seguinte aparência:
Vamos abrir a pasta inteira do projeto no Sublime e para não misturar o código do flexbox com o código de estilo geral criaremos um arquivo novo, o flexbox.css. Antes de começar a colocar a mão na massa é preciso importar o arquivo flexbox.css e para fazer isso basta adicionar junto dos demais links do index.html uma linha de código :
<link rel="stylesheet" href="css/flexbox.css">Para reorganizar os elementos do cabeçalho, lado a lado, normalmente utilizaríamos display, inline-block, o float ou o position, porém, destas opções algumas além de complexas não alcançam os resultados desejados. Portanto, vamos começar a utilizar o flexbox, uma solução prática e simples para reorganizar os objetos da página!
Primeiro, é preciso saber exatamente o que desejamos reposicionar, no caso, o título e a nav. Se observarmos o arquivo index.html descobrimos que o container é o elemento que envolve estes dois elementos, assim, é nele que precisamos definir o flex. Os filhos do item container vão seguir o que colocarmos nele, pois, ele é um elemento "pai"! Antes de começar, observe como está o código:
No arquivo flexbox.css vamos acrescentar o .cabecalhoPrincipal .container e dentro disso adicionamos o display: flex e para alinhar os itens no centro o align-items: center:
.cabecalhoPrincipal .container {
display: flex;
align-items: center;
}Dando um reload na página temos o seguinte:
Seguimos com um problema nas margens e para resolvê-lo vamos observar o que nos mostra o Dev Tools. Os elementos estão englobados em um único bloco azul:
É preciso, para solucionar a questão, inserir um espaço vazio entre o título e a lista de itens. Portanto, vamos utilizar o justify-content:space-between:
.cabecalhoPrincipal .container {
display: flex;
align-items: center;
justify-content: space-between;
}
O cabeçalho ficará da seguinte maneira:
Ou seja, conseguimos alinhar o título e a nav!
Na última aula utilizamos o flexbox para alinhar o título e a nav. Nossa intenção, agora, será distribuir os itens do menu horizontalmente.
Observando o código do arquivo index.html descobrimos que os links – os elementos do menu – estão agrupados dentro do nav que é, o elemento "pai". Assim, no arquivo flexbox.css inserimos o item pai, o .cabecalhoPrincipal-nav , e dentro dele a propriedade display: flex:
.cabecalhoPrincipal-nav {
display: flex;
}
Ao fazer isso conseguimos realocar os itens:
Note que eles estão lado a lado! O space beetween, caso acrescentado, não seria o suficiente para resolver o problema, pois não existe espaço no elemento pai sobrando para ser distribuído. O jeito é usar um margin-left nos li. No código do curso o margin-left já está feito, então, o .cabecalhoPrincipal-nav ficará apenas com a propriedade flex.
Até o momento utilizamos o flexbox que é uma propriedade razoavelmente atual. Portanto, é preciso ter cuidado ao utilizar essa propriedade, pois nem todos os navegadores a aceitam. Para descobrir em quais sistemas a propriedade funciona podemos consultar o site Can I Use. Basta digitar o nome da propriedade no campo de busca:
Essa página mostra também uma lista de navegadores e os comportamentos que eles apresentam em contato com o flexbox e ainda mostra os possíveis bugs que acontecem:
Clicando no Show all podemos verificar como é o funcionamento em todas as versões dos navegadores. Esse site é uma ótima fonte de consulta.
O curso Flexbox: posicione elementos na tela possui 133 minutos de vídeos, em um total de 38 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
Impulsione a sua carreira com os melhores cursos e faça parte da maior comunidade tech.
1 ano de Alura
Matricule-se no plano PLUS e garanta:
Jornada de estudos progressiva que te guia desde os fundamentos até a atuação prática. Você acompanha sua evolução, entende os próximos passos e se aprofunda nos conteúdos com quem é referência no mercado.
Mobile, Programação, Front-end, DevOps, UX & Design, Marketing Digital, Data Science, Inovação & Gestão, Inteligência Artificial
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você participa de eventos exclusivos, pode tirar dúvidas em estudos colaborativos e ainda conta com mentorias em grupo com especialistas de diversas áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Acelere o seu aprendizado com a IA da Alura e prepare-se para o mercado internacional.
1 ano de Alura
Todos os benefícios do PLUS e mais vantagens exclusivas:
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Para estudantes ultra comprometidos atingirem seu objetivo mais rápido.
1 ano de Alura
Todos os benefícios do PRO e mais vantagens exclusivas:
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.
Conecte-se ao mercado com mentoria individual personalizada, vagas exclusivas e networking estratégico que impulsionam sua carreira tech para o próximo nível.
