Praticando CSS: Grid e Flexbox

Beatriz: Olá, tudo bem? Meu nome é Beatriz, mas você pode me chamar de Bia.

Luan: E eu sou Luan, e nós somos instrutores da Escola de Front-end aqui na Alura! Estamos muito contentes de receber você nesse curso, "Praticando CSS com Grid e Flexbox". Bia, para quem é esse curso?

Beatriz: Esse curso é para você que deseja adquirir conhecimento nas duas principais maneiras de dispor elementos em uma página HTML, ou seja, utilizando o Flexbox e o Grid.

Luan: Você aprenderá esses conceitos praticando em um projeto chamado Culturama, uma página para divulgação de eventos culturais. Vamos desenvolvê-lo para três telas principais: mobile, com largura de 360 pixels; tablets, com largura de 720 pixels; e desktops, com largura de 1440 pixels.

Vamos organizar todos os elementos desse projeto, como o cabeçalho, a seção de banner, categorias, destaques, "próximos eventos", "coloque na sua agenda" e o rodapé.

Beatriz: Como nosso foco é praticar Flexbox e Grid, é importante que você já tenha realizado todos os cursos que estão indicados como pré-requisitos desse treinamento. Dessa forma, você já terá construído uma base sólida e poderá mergulhar nesses estudos.

Após finalizar o curso, você conseguirá aplicar os conhecimentos adquiridos de Flexbox e Grid para posicionar os elementos na página, e praticar em diversos outros projetos que vão expandir o seu portfólio.

Luan: Vamos lá, que temos muito trabalho pela frente!

Luan: Que bom que você decidiu aprender Flexbox e Grid conosco! Esse conhecimento certamente será de muita importância na sua carreira como pessoa desenvolvedora em Front-end. Começaremos abrindo o projeto no VS Code, o editor de código que utilizaremos no decorrer desse curso.

Vou abrir o projeto inicial no VS Code que será o editor de código utilizado neste curso, mas você pode utilizar o editor que preferir. O projeto inicial deste curso está disponível na atividade “Preparando o ambiente”. Nessa mesma atividade também se encontra o link para acessar o layout do projeto pronto no Figma, caso queira ir conferindo por conta própria.

No editor de código, clicaremos com o botão direito na pasta "style", localizada no menu à esquerda, e então em "New File". Criaremos um arquivo flex.css, dentro do qual vamos inserir todo o código do Flexbox ao decorrer do curso.

Na linha 14 do arquivo index.html, usaremos a tag <link> para linkar o arquivo que acabamos de criar, acessado pelo endereço ./assets/style/flex.css.

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Culturama</title>
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&family=Work+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="shortcut icon" href="./assets/img/Favicon2.png" type="image/x-icon">
<link rel="stylesheet" href="./assets/style/grid.css">
<link rel="stylesheet" href="./assets/style/flex.css">
<link rel="stylesheet" href="./assets/style/style.css">
//código omitido...

Note que estamos utilizando a extensão Live Server, que também ficará disponível na atividade "Preparando o Ambiente" caso você queira utilizá-la.

Feito isso, vamos abrir o projeto no navegador. Primeiramente, precisamos organizar o cabeçalho do projeto Culturama. Ele consiste em uma logo e três botões ("Programação", "Categorias" e "Seu local"), além de um campo de pesquisa logo abaixo.

Para organizar esses elementos com o Flexbox, precisamos localizá-los no arquivo HTML. Acessando o index.html, percebemos que nosso <header> (cabeçalho) é composto por uma tag <nav> e uma tag <ul>, dentro da qual temos diversas <li> com os itens em seu interior.

<header>
    <nav>
        <ul class="menu">
            <li class="menu__item">
                <h1 class="menu__titulo"></h1>
            </li>
            <li class="menu__item"><a href="#" class="">Programação</a></li>
            <li class="menu__item"> <a href="#">Categorias</a></li>
            <li class="menu__item"><a href="#">Seu local</a></li>

        &lt;li class&#61;&#34;menu__item menu__pesquisar&#34;&gt;
            &lt;label class&#61;&#34;menu__label&#34; for&#61;&#34;pesquisar&#34;&gt;&lt;input class&#61;&#34;menu__input&#34; type&#61;&#34;search&#34; name&#61;&#34;&#34; placeholder&#61;&#34;O que você procura?&#34;
                id&#61;&#34;pesquisar&#34;&gt;&lt;/label&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;


</header>

O elemento-pai de todos esses itens é a <ul> com a classe menu, e é ela que utilizaremos para essa organização. No arquivo flex.css, chamaremos a classe .menu e aplicaremos a ela, dentro de chaves, a propriedade display: flex.

.menu {
    display: flex;
}

Agora todos os elementos dentro da lista ficaram um ao lado do outro, o comportamento padrão desse display. Quando aplicamos o display: flex a um elemento, nós o transformamos em um flex container, e os elementos em seu interior se tornam flex items. A partir daí, podemos manipular esses elementos com diversas propriedades do Flexbox.

Uma delas é a justify-content, por exemplo com o valor space-evenly. Após atualizar, vemos que foi aplicado um espaçamento horizontal entre todos os elementos, que é aumentado conforme o tamanho da tela também aumenta.

.menu {
    display: flex;
    justify-content: space-evenly;
}

Essa é uma das características do Flexbox: ele ajuda a organizar os elementos de forma automática e responsiva, se ajustando à largura do layout.

Percebemos que os elementos do cabeçalho estão muito próximos do topo da tela. Para centralizá-los na vertical - ou seja, fora do eixo principal -, utilizaremos a propriedade align-items com o valor center. Dessa forma, teremos os elementos centralizados na vertical.

.menu {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

Inspecionando a página (algo que fazemos usando o botão F12), vemos que na largura do layout para mobile, 360 pixels, os itens do cabeçalho ficaram muito muito próximos e na mesma linha, dificultando a visualização.

Queremos ter uma quebra de linha, o que conseguiremos aplicando a propriedade flex-wrap com valor wrap. Agora, quando um elemento não tiver mais espaço pra ficar na mesma linha que os outros, ele será movido ("quebrado") para a linha de baixo.

.menu {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}

Ainda falta movermos a logo para o topo, deixando os três botões um ao lado do outro com o campo de pesquisa abaixo. Para isso, aplicaremos um espaçamento entre um item e outro com a propriedade column-gap recebendo o valor 33px.

.menu {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 33px;
}

Comparando com o projeto no Figma, é possível concluir que finalizamos o layout para celulares. Ao longo desse processo, já aprendemos um conjunto de propriedades muito recorrentes do Flexbox!

Luan: Agora que já finalizamos o cabeçalho para celulares do projeto Culturama, vamos organizar os elementos para telas de tablets. Conferindo o projeto finalizado no Figma, vemos que é necessário apenas alinhar a logo e o botão "Seu local" com as margens da página. As imagens abaixo ainda não estão prontas, mas as margens sim (no arquivo styles.css), portanto podemos utilizá-las como referência.

Abrindo o arquivo flex.css, começaremos aplicando a instrução @media, que nos permitirá aplicar os estilos apenas para telas de pelo menos 720 pixels de largura. Dentro dos parênteses, passaremos o parâmetro min-width: 720px, abrindo e fechando chaves em seguida.

@media (min-width: 720px) {
} 

Vamos utilizar o "Inspecionar" do navegador, que nos auxiliará a construir esse layout. Conferindo o código que escrevemos, percebemos que já existe um column-gap de 33px aplicado. Na versão para tablets, podemos aumentar esse column-gap para expandir o espaçamento entre os itens, movendo a logo para a esquerda e o botão "Seu local" para a direita.

Fazendo alguns testes ainda no "Inspecionar", vemos que 75px é um valor adequado para alinhar os nossos elementos.

Não se esqueça de manter a janela do navegador em 720 pixels, medida de referência para telas de tablets!

No @media (), chamaremos a classe .menu e aplicaremos a propriedade column-gap, agora com 75 pixels.

@media (min-width: 720px) {

.menu {
    column-gap: 75px;
}


} 

Comparando com o layout do Figma, é possível concluir que finalizamos o cabeçalho para telas de tablets. Além disso, aprendemos a utilizar o @media em conjunto com o Flexbox pra construir layouts responsivos.