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:
O Plano Plus evoluiu: agora com Luri para impulsionar sua carreira com os melhores cursos e acesso à maior comunidade tech.
2 anos de Alura
Matricule-se no plano PLUS 24 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.
Programação, Data Science, Front-end, DevOps, Mobile, Inovação & Gestão, UX & Design, 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.
Acesso à inteligência artificial da Alura.
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.
Luri Vision chegou no Plano Pro: a IA da Alura que enxerga suas dúvidas, acelera seu aprendizado e conta também com o Alura Língua que prepara você para competir no mercado internacional.
2 anos de Alura
Todos os benefícios do PLUS 24 e mais vantagens exclusivas:
Chat, busca, exercícios abertos, revisão de aula, geração de legenda para certificado.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.
Para quem quer atingir seus objetivos mais rápido: Luri Vision ilimitado, vagas de emprego exclusivas e mentorias para acelerar cada etapa da jornada.
2 anos de Alura
Todos os benefícios do PRO 24 e mais vantagens exclusivas:
Catálogo de tecnologia para quem é da área de Marketing
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais de forma ilimitada.
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.
