Alura > Cursos de Front-end > Cursos de HTML e CSS > Conteúdos de HTML e CSS > Primeiras aulas do curso CSS: Flexbox e layouts responsivos

CSS: Flexbox e layouts responsivos

Conhecendo o poder do Flexbox - Apresentação

Boas-vindas ao curso CSS: Flexbox e layouts responsivos da Alura! Meu nome é Luan Alves, sou instrutor na escola de Front-end, e serei seu instrutor ao longo desse treinamento.

Você já ouviu falar sobre Flexbox e por que é tão importante que uma pessoa desenvolvedora em Front-end saiba sobre ele?

Atualmente, um mesmo site ou interface pode ser acessado por diferentes tamanhos de tela, como em celulares, tablets, notebooks ou smart TVs.

O Flexbox vem como uma solução de layout para essa realidade, e é formado por um grupo de propriedades que permite criar interfaces com um perfil moderno, ajustáveis para diferentes tamanhos de tela.

Além disso, o Flexbox facilita a vida da pessoa desenvolvedora.

Este curso é ideal para quem deseja se tornar uma pessoa desenvolvedora em Front-end, ou mesmo para quem já atua na área. O Flexbox é muito utilizado em conjunto com outros frameworks e bibliotecas, como o Angular e o React, e é ideal para quem deseja, no futuro, focar seus estudos nesses conteúdos mais avançados.

O pré-requisito para fazer este curso é ter uma base em HTML e CSS.

Mas como estudaremos o Flexbox?

Vamos começar analisando o projeto e os desafios que teremos ao longo deste treinamento.

Vamos simular a entrada em um projeto já em andamento, com parte do código HTML e CSS pronta. Assim, poderemos focar em organizar os elementos com o Flexbox.

O projeto, chamado AluraPlay, é uma plataforma de vídeos com um layout moderno e rico em elementos. Esse projeto possui três telas principais, para celulares, tablets e desktops.

Começaremos analisando a tela para celulares, que possui um cabeçalho com logo e ícones. Abaixo desse cabeçalho, teremos uma seção com várias opções de navegação no site.

Interface da AluraPlay em layout para celulares.Logo abaixo, temos uma seção de vídeos, incluindo dezesseis vídeos - todos do canal da Alura. Você pode, inclusive, assistí-los depois!

Ao fim da página, temos um rodapé com vários tópicos relacionados à área da tecnologia, além de um menu inferior com cinco opções de navegação no site.

Agora analisaremos o layout para tablets.

Interface da AluraPlay em layout para tablets.

Nele, o menu que anteriormente era inferior é movido para a lateral esquerda, e o cabeçalho passa a possuir um campo de pesquisa. Os vídeos ficam organizados dois por linha, o rodapé expande de tamanho e os tópicos de tecnologia são quebrados em quatro colunas.

Por fim, analisaremos o layout para desktops.

Interface da AluraPlay em layout para desktops.

Neste layout, o menu expande de tamanho e ganha mais elementos, os vídeos são distribuídos quatro por linha e o rodapé se expande com os tópicos um ao lado do outro.

Tendo apresentado o desafio que teremos ao longo do curso, vamos ao estudos!

Conhecendo o poder do Flexbox - Caixa flexível: cabeçalho

Neste início de curso, precisamos que você preste bastante atenção a esse desenho:

Sobre um fundo azul escuro, figura de uma estante cinza com cinco prateleiras. Em cada prateleira estão dispostos quatro livros coloridos. Os livros estão equidistantes entre si e ocupam a maior parte do espaço nas prateleiras.

Nele, temos uma estante com diversas prateleiras, onde estão dispostos livros na mesma distância um do outro. Agora vamos supor que compramos uma estante maior, com mais espaço para reorganizar esses livros.

Sobre um fundo azul escuro, figura de uma estante cinza com cinco prateleiras, agora bem mais larga. Em cada prateleira estão dispostos quatro livros coloridos. Os livros estão equidistantes entre si, mas ocupam apenas a área central das prateleiras, com bastante espaço sobrando aos lados.

Com o Flexbox, podemos organizar tais livros de diversas maneiras. Por exemplo, aplicando uma distância igual entre eles, de modo a aproveitar todo o espaço disponível.

Sobre um fundo azul escuro, figura de uma larga estante cinza com cinco prateleiras. Em cada prateleira estão dispostos quatro livros coloridos. Os livros estão equidistantes entre si e entre as laterais das prateleiras, de modo a preencher mais adequadamente o espaço.

Também poderíamos organizá-los de maneira diferente em cada uma das prateleiras, colocar a estante na horizontal e deixar os livros flutuando, ou mesmo inverter a forma em que estão distribuídos.

São essas possibilidades do Flexbox que aprenderemos na prática, organizando os elementos do projeto AluraPlay, que está disponível para download na atividade "Preparando o ambiente".

Vamos abrir o editor de código VSCode e clicar em "File > Open folder", acessando o diretório onde baixamos o projeto.

Após abrirmos, começaremos a analisar o primeiro problema que nos ajudará a aprender o Flexbox na prática.

Interface inicial da Aluraplay. Nela, os elementos estão dispostos de maneira desordenada.

De início, podemos organizar os elementos do cabeçalho do projeto. Por exemplo, temos a logo da AluraPlay, que aparentemente está do lado esquerdo, mas na verdade ocupa de um lado a outro de seu contêiner.

Logo abaixo temos um campo de pesquisa, seguido por quatro ícones que quase não são visíveis, já que estão cobertos pelas opções do menu.

A ideia é aplicarmos o Flexbox a esses elementos de modo a organizá-los. Para isso, vamos localizá-los em nosso código HTML.

No arquivo index.html, dentro da tag <header>, encontraremos uma tag <nav > contendo os itens que citamos anteriormente.

<body>

    <!-- Cabecalho -->
    <header>

        <nav class="cabecalho__container">

            <h1 class="logo__item" href="#"></h1>

            <div class="cabecalho__pesquisar__item">
                <form action="">
                    <input type="search" placeholder="Pesquisar" id="pesquisar" class="pesquisar__input">
                    <label for="pesquisar" class="pesquisar__label"></label>
                </form>
                <a href="#" class="cabecalho__audio"></a>
            </div>

            <div class="cabecalho__icones__item">
                <a href="#" class="cabecalho__videos"></a>
                <a href="#" class="cabecalho__apps"></a>
                <a href="#" class="cabecalho__notificacoes"></a>
                <a href="#" class="cabecalho__avatar"></a>
            </div>

        </nav>

    </header>
//código omitido...

Temos uma tag <h1> contendo a logo como background (esta localizada na pasta "estilos-css"). Além dela, temos uma <div> para o campo de pesquisa, contendo o <input> e a <label>. Por fim, temos outra <div>, esta contendo os quatro ícones que desejamos organizar.

Mas como aplicar o Flexbox a esses elementos? Primeiramente, é necessário localizar o "pai direto" desses três grupos de itens, que é a tag <nav>.

No arquivo flexbox.css, chamaremos a classe dessa tag - cabecalho__container:

.cabecalho__container {

} 

Nela, adicionaremos a propriedade display: flex.

.cabecalho__container {
    display: flex;
} 

Ao atualizar a página, todos os elementos ficarão lado a lado, o que é o comportamento padrão do Flexbox quando aplicado a um container. Mesmo que existissem um milhão de elementos, todos eles seguiriam esse padrão, mesmo que o layout fosse quebrado.

Interface da Aluraplay após as modificações. Agora o logo, a barra de pesquisa e os ícones estão dispostos horizontalmente, nessa ordem, na parte superior da página.

Os elementos já estão na ordem correta (na horizontal), mas não estão espaçados da maneira que desejamos. Aprenderemos a ajustar isso no próximo vídeo.

Conhecendo o poder do Flexbox - align-items: finalizando o cabeçalho

Nosso objetivo agora é deixar a logo do lado esquerdo, o campo de pesquisa no centro e os quatro ícones do lado direito.

Interface da AluraPlay com logo, campo de pesquisa e ícones agrupados à esquerda.

Se não estivéssemos usando o Flexbox, poderíamos pegar a classe da nossa logo, logo__item, e aplicar um margin-right com, por exemplo, 200px.

.logo__item {
    margin-right: 200px;
}

Dessa forma, nosso campo de pesquisa será movido para o centro.

Interface da AluraPlay com logo à esquerda, campo de pesquisa centralizado e ícones próximos a ele, à sua direita.

Podemos, também, aplicar o margin-right à classe desse campo de pesquisa.

.cabecalho__pesquisar__item {
    margin-right: 200px;
}

Com isso, os ícones é que serão movidos para a direita, quebrando o layout.

Interface da AluraPlay com campo de pesquisa centralizado, ícones alinhados à direita. Porém, o layout da página está quebrado.

Inclusive, se diminuirmos o valor da propriedade margin-right, o layout quebrará menos.

.cabecalho__pesquisar__item {
    margin-right: 150px;
}

Ou seja, essa não é uma prática responsiva, já que não estamos ajustando os elementos para diferentes tamanhos de tela.

Para que a logo fique sempre no canto esquerdo, o campo de pesquisa sempre no centro e os ícones sempre à direita, utilizaremos o Flexbox, que é a melhor solução para esse caso.

Removeremos os códigos anteriores de nosso arquivo flexbox.css, e adicionaremos à classe cabecalho__container a propriedade justify-content com o valor space-between.

.cabecalho__container {
    display: flex;
    justify-content: space-between;

}

Dessa forma, os elementos ficarão dispostos da maneira que desejamos, e passarão a ser responsivos, ajustando sua posição de acordo com o tamanho da tela.

Interface da AluraPlay com os elementos alinhados corretamente.

Entretanto, eles ainda estão muito próximos do topo do layout. Já os ajustamos em relação à horizontal, e agora queremos fazer um ajuste vertical, centralizando-os no contêiner.

Faremos isso com a propriedade align-items recebendo o valor center.

.cabecalho__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Atualizando a página, veremos que estamos bem mais próximos do nosso objetivo.

Interface da AluraPlay com elementos centralizados no contêiner.

Quando utilizamos a barra de rolagem, porém, o menu fica fixo na tela. Queremos replicar esse efeito no cabeçalho.

Para isso, usaremos a propriedade position com o valor fixed.

.cabecalho__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
}

Já informamos que desejamos que o cabeçalho fique fixo, agora precisamos informar a coordenada onde ele será fixado, algo feito com a propriedade top e um valor de distância, nesse caso 0.

.cabecalho__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
}

Assim, o cabeçalho se manterá fixo no topo.

Interface da AluraPlay com menu fixo ao topo.

Já aprendemos várias propriedades do Flexbox e do CSS, que trabalha em conjunto com ele. No próximo vídeo daremos continuidade aos nossos estudos.

Sobre o curso CSS: Flexbox e layouts responsivos

O curso CSS: Flexbox e layouts responsivos possui 98 minutos de vídeos, em um total de 47 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!

Plus

De
R$ 1.800
por
12X
R$109
à vista R$1.308
  • Acesso a TODOS cursos por 1 ano

    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.

  • Certificado

    A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.

  • Mentorias com especialistas

    No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.

  • Comunidade exclusiva

    Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.

  • Acesso ao conteúdo das Imersões

    Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.

  • App Android e iOS para estudar onde quiser

    Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.

Matricule-se

Pro

De
R$ 2.400
por
12X
R$149
à vista R$1.788
  • Acesso a TODOS cursos por 1 ano

    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.

  • Certificado

    A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.

  • Mentorias com especialistas

    No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.

  • Comunidade exclusiva

    Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.

  • Acesso ao conteúdo das Imersões

    Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.

  • App Android e iOS para estudar onde quiser

    Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.

  • Luri, a inteligência artificial da Alura

    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.

  • Alura Língua - Inglês e Espanhol

    Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.

Matricule-se

Ultra

12X
R$209
à vista R$2.508
  • Acesso a TODOS cursos por 1 ano

    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.

  • Certificado

    A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.

  • Mentorias com especialistas

    No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.

  • Comunidade exclusiva

    Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.

  • Acesso ao conteúdo das Imersões

    Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.

  • App Android e iOS para estudar onde quiser

    Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.

  • Luri, com mensagens ILIMITADAS

    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.

  • Luri Vision, a IA que enxerga suas dúvidas

    Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.

  • Alura Língua - Inglês e Espanhol

    Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.

  • 6 Ebooks da Casa do Código

    Receba cupons da Casa do Código, a editora da Alura, e escolha ebooks que acompanharão a sua jornada de aprendizado para sempre.

Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas