Primeiras aulas do curso Flexbox: Posicione elementos na tela

Flexbox: Posicione elementos na tela

Introdução ao flexbox e fazendo o cabeçalho - Introdução

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.

Introdução ao flexbox e fazendo o cabeçalho - Arrumando cabeçalho

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!

Introdução ao flexbox e fazendo o cabeçalho - Terminando cabeçalho

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.

Sobre o curso Flexbox: Posicione elementos na tela

O curso Flexbox: Posicione elementos na tela possui 130 minutos de vídeos, em um total de 37 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:

Aprenda HTML e CSS acessando integralmente esse e outros cursos, comece hoje!

  • 1184 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1184 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1184 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1184 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana