CSS: posicionando elementos com Flexbox

Planejando o cabeçalho - Apresentação

Olá, estudante! Boas-vindas a este curso de Flexbox. Eu sou Monica Hillman, e serei a instrutora que guiará você durante esta jornada de aprendizado.

Audiodescrição: Monica se identifica como uma mulher branca. Possui cabelos castanhos com mechas loiras, longos e ondulados. No rosto usa óculos de armação fina e prateada. Em seu septo, há um piercing. Ao fundo, uma parede com uma prateleira é iluminada em tons de azul e rosa. A prateleira ocupa toda a largura da tela e sobre ela, repousam figuras de ação e livros. Nos cantos inferiores direito e esquerdo, há mais livros.

Conhecendo o projeto

Durante o curso, desenvolveremos a aplicação Luz e Cena, o site de um cinema. Nela, teremos um cabeçalho, um banner, uma lista de filmes em cartaz, uma seção de combo de pipoca, um campo para newsletter e também um footer (rodapé).

Se inspecionarmos os elementos da tela da aplicação e diminuirmos o seu tamanho, notaremos que ela também é responsiva.

O que aprenderemos?

Para desenvolver essa aplicação, nos aprofundaremos na questão do display: flex, do Flexbox, e das propriedades relacionadas a isso, como justify-content, align-items, flex-shrink, flex-grow, order, e muito mais.

Na rotina de uma pessoa desenvolvedora front-end, é comum lidar com o posicionamento dos elementos na tela, e o Flexbox pode ser um grande aliado nisso.

Pré-requisitos

Antes de se matricular neste curso, é necessário ter noção de HTML e CSS, pois os outros conceitos, que não são de Flexbox, serão abordados de forma mais rápida durante o desenvolvimento do projeto.

Próximos passos

Se você se interessou pelo tema do curso e deseja aprender mais sobre o Flexbox, nos veremos no próximo vídeo!

Planejando o cabeçalho - Elementos do cabeçalho

Vamos iniciar o desenvolvimento da aplicação Luz e Cena pelo seu cabeçalho.

Acessando o Figma do projeto, na camada "Home" comum, notaremos que o cabeçalho do site possui uma estrutura com vários elementos em seu interior, posicionados lado a lado. Antes de ir ao HTML, entenderemos como construir a estrutura desse HTML por meio do rascunho abaixo.

Primeiramente, faremos um contêiner que terá todos os elementos do cabeçalho em seu interior. Ele não tocará as extremidades da tela — configuraremos esse aspecto por meio de espaçamentos e posicionamentos com CSS.

Dentro desse contêiner, podemos visualizar colunas que fazem cada elemento do cabeçalho ficar lado a lado. Na última coluna, à direita, temos o ícone de carrinho e o ícone de perfil. Colocaremos ambos dentro do mesmo elemento pai, que será filho do elemento principal, o contêiner do cabeçalho.

Tomamos essa decisão porque o espaçamento entre ambos os ícones é menor que o espaçamento entre os elementos dentro do contêiner, que futuramente será flexível.

Antes construir o HTML, visualizaremos na versão responsiva do site para identificar se há algum elemento a mais a ser colocado. Para isso, acessaremos a camada "Home" responsiva.

Em seu interior, há o menu hambúrguer no canto superior esquerdo. Já construiremos o cabeçalho pensando nessa estrutura, que não aparecerá no desktop, mas aparecerá no celular.

Conhecendo o código do projeto

Acessando o código do projeto no Visual Studio Code, abriremos o arquivo index.html. Este projeto foi disponibilizado na atividade "Preparando o Ambiente" e possui:

Todas as imagens que serão utilizadas;
Os arquivos de estilos;
O index.html com a estrutura padrão e
O styles.css, com variáveis a serem utilizadas.

Construindo o cabeçalho

Vamos começar o cabeçalho. Entre as tags de abertura e fechamento do body, na linha 23, iniciaremos acrescentando a tag header, que terá a classe header.

Entre as tags de abertura e fechamento do header, começaremos nosso menu de navegação, que ficará dentro da tag nav, com a classe nav e um aria-label="navegação principal". Entre as tags de abertura e fechamento dessa nav, faremos a lista ul com a classe nav__list.

index.html:

<body>
    <header class="header">
        <nav class="nav" aria-label="navegação principal">
            <ul class="nav__list">
            </ul>
        </nav>
    </header>
</body>

Entre as tags de abertura e fechamento dessa ul, construiremos cada elemento dentro do contêiner com tags li.

Criando os elementos do contêiner

Primeiramente, faremos o li do menu hambúrguer:

<li class="menu__toggle">
</li>

Quando falamos de toggle, referimo-nos a algo que pode ser ativado e desativado. Por exemplo, o menu hambúrguer inicia fechado e, com um clique, ele abre. Ao clicar novamente, ele fecha. É isso que queremos referenciar quando utilizamos o toggle.

Entre as tags de abertura e fechamento dessa li, construiremos um botão, que terá a classe menu__toggle__icon, de ícone e uma aria-label="menu hamburguer". Entre as tags de abertura e fechamento do botão, por sua vez, adicionaremos a imagem do menu hambúrguer, que estará dentro de .images/menu.svg, com o texto alternativo "menu hamburguer".

<body>
    <header class="header">
        <nav class="nav" aria-label="navegação principal">
            <ul class="nav__list">
                <li class="menu__toggle">
                    <button class="menu__toggle__icon" aria-label="menu hamburguer">
                        <img src="./images/menu.svg" alt="menu hamburguer" />
                    </button>
                </li>
            </ul>
        </nav>
    </header>
</body>

Abaixo dessa li, começaremos a construir os itens que aparecerão no desktop. Adicionaremos um nova li com a classe nav__item e, entre as tags de abertura e fechamento, o link href="index.html".

Entre as tags de abertura e fechamento do link, adicionaremos uma imagem cuja origem será .images/Logo.svg, com o texto alternativo "logo do luz e cena".

<body>
    <header class="header">
        <nav class="nav" aria-label="navegação principal">
            <ul class="nav__list">
                <li class="menu__toggle">
                    <button class="menu__toggle__icon" aria-label="menu hamburguer">
                        <img src="./images/menu.svg" alt="menu hamburguer" />
                    </button>
                </li>
                <li class="nav__item">
                    <a href="index.html">
                        <img src="./images/Logo.svg" alt="logo do luz e cena" />
                    </a>
                </li>
            </ul>
        </nav>
    </header>
</body>

Já fizemos o primeiro elemento, o logo. Os próximos três lis serão dos links textuais "Eventos", "Club Fidelidade" e "Sobre nós". Todos terão a classe nav__item, um href="#", pois suas páginas ainda não existem, e uma classe nav__link.

Entre as tags de abertura e fechamento de cada link, adicionaremos os textos correspondentes a cada menu: Eventos, Club Fidelidade e Sobre nós.

<body>
    <header class="header">
        <nav class="nav" aria-label="navegação principal">
            <ul class="nav__list">
                <li class="menu__toggle">
                    <button class="menu__toggle__icon" aria-label="menu hamburguer">
                        <img src="./images/menu.svg" alt="menu hamburguer" />
                    </button>
                </li>
                
                <li class="nav__item">
                    <a href="index.html">
                        <img src="./images/Logo.svg" alt="logo do luz e cena" />
                    </a>
                </li>
                
                <li class="nav__item">
                    <a href="#" class="nav__link">Eventos</a>
                </li>
                
                <li class="nav__item">
                    <a href="#" class="nav__link">Club fidelidade</a>
                </li>
                
                <li class="nav__item">
                    <a href="#" class="nav__link">Sobre nós</a>
                </li>
                
            </ul>
        </nav>
    </header>
</body>

Para construir o campo de digitação da localização, também adicionaremos uma li com a classe nav__item. Ele será um li porque precisamos que os itens de localização estejam dentro de uma lista.

Além de nav__item, ele também terá a classe nav__item_form. Entre as tags de abertura e fechamento, ele terá a tag form com a classe nav__form para criar um formulário.

Entre as tags de abertura e fechamento desse formulário, teremos um input do tipo search, com um id="localizacao" e a classe nav__input.

<!--- Código omitido --->

<li class="nav__item">
    <a href="#" class="nav__link">Club fidelidade</a>
</li>

<li class="nav__item">
    <a href="#" class="nav__link">Sobre nós</a>
</li>

<li class="nav__item nav__item_form">
    <form class="nav__form">
        <input type="search" id="localizacao" class="nav__input" />
    </form>
</li>

<!--- Código omitido --->

Podemos criar outro li logo abaixo para construir o último campo, referente aos dois ícones. Como queremos que eles fiquem posicionados lado a lado, mas com o espaçamento diferente dos outros, construiremos os dois dentro do mesmo item da lista.

Esse li terá as classes nav__item e nav__icons. Entre as tags de abertura e fechamento, adicionaremos o primeiro ícone, com um link que terá um href=# (pois os ícones não possuirão textos) e um aria-label igual a "carrinho de compras".

Entre as tags de abertura e fechamento do link, adicionaremos a imagem do ícone, com a origem .images/Carrinho.svg e o texto alternativo "carrinho".

Faremos o mesmo para o próximo, substituindo os conteúdos do aria-label para "perfil", da origem para ./images/Perfil.svg e do texto alternativo para "meu perfil":

<!--- Código omitido --->

<li class="nav__item">
    <a href="#" class="nav__link">Club fidelidade</a>
</li>

<li class="nav__item">
    <a href="#" class="nav__link">Sobre nós</a>
</li>

<li class="nav__item nav__item_form">
    <form class="nav__form">
        <input type="search" id="localizacao" class="nav__input" />
    </form>
</li>

<li class="nav__item nav__icons">
    <a href="#" aria-label="carrinho de compras">
        <img src="./images/Carrinho.svg" alt="carrinho" />
    </a>
    <a href="#" aria-label="perfil">
        <img src="./images/Perfil.svg" alt="meu perfil" />
    </a>
</li>

<!--- Código omitido --->

O código completo do cabeçalho pode ser consultado abaixo.

<body>
    <header class="header">
        <nav class="nav" aria-label="navegação principal">
            <ul class="nav__list">
                <li class="menu__toggle">
                    <button class="menu__toggle__icon" aria-label="menu hamburguer">
                        <img src="./images/menu.svg" alt="menu hamburguer" />
                    </button>
                </li>
                
                <li class="nav__item">
                    <a href="index.html">
                        <img src="./images/Logo.svg" alt="logo do luz e cena" />
                    </a>
                </li>
                
                <li class="nav__item">
                    <a href="#" class="nav__link">Eventos</a>
                </li>
                
                <li class="nav__item">
                    <a href="#" class="nav__link">Club fidelidade</a>
                </li>
                
                <li class="nav__item">
                    <a href="#" class="nav__link">Sobre nós</a>
                </li>
                
                <li class="nav__item nav__item_form">
                    <form class="nav__form">
                        <input type="search" id="localizacao" class="nav__input" />
                    </form>
                </li>
                
                <li class="nav__item nav__icons">
                    <a href="#" aria-label="carrinho de compras">
                        <img src="./images/Carrinho.svg" alt="carrinho" />
                    </a>
                    <a href="#" aria-label="perfil">
                        <img src="./images/Perfil.svg" alt="meu perfil" />
                    </a>
                </li>
            </ul>
        </nav>
    </header>
</body>

Conclusão

Após salvar o código, construímos a estrutura do menu de navegação. Podemos até ativar o servidor local clicando em "Go Live" na barra inferior do VS Code para visualizar esses elementos na tela pelo navegador.

Apesar dos elementos estarem sendo construídos e planejados para futuras estilizações, eles não se estilizam sozinhos. Todos os elementos estão no canto superior direito da página, um abaixo do outro e com um tamanho pequeno.

Próximos passos

A seguir, aplicaremos técnicas de Flexbox para tornar esse cabeçalho mais atraente.

Planejando o cabeçalho - Flex container

Já desenvolvemos a estrutura do HTML desse cabeçalho e podemos dar sequência à estilização.

Estilizando o cabeçalho

Vamos abrir o Visual Studio Code, selecionar o arquivo header.css dentro da pasta "styles" pelo explorador lateral esquerdo e começar as estilizações. Dividiremos a tela entre a janela do navegador, em cima, e a janela do VS Code, na parte de baixo, para visualizar o resultado das alterações em tempo real.

O primeiro estilo a aplicar é no seletor do header, onde colocaremos um max-width de var(--max-width-block), que limitará o espaço que esse cabeçalho pode ocupar, permitindo o uso de margin: 0 auto, que centralizará o cabeçalho.

header.css

.header {
    margin: 0 auto;
    max-width: var(--max-width-block);
}

O resultado é um espaço nas laterais do cabeçalho, que ainda não é o esperado.

Abaixo do seletor header, adicionaremos o seletor de nav__list com os seguintes atributos:

Um display: flex, posicionando os itens da lista lado a lado;
Um gap: var(--gap-xl), espaçando os itens entre si (a variável foi retirada do Figma);
Um justify-content: space-between, definindo que os itens serão posicionados na largura definida no cabeçalho, tendo o mesmo espaço entre si;
Um align-items: center para alinhas todos os itens dentro do flex-container ao centro;
Um padding de var(--padding-s) 0 para implementar o espaçamento na parte superior e inferior do cabeçalho, mas não nas laterais.
Um list-style-type: none para remover o círculo à direita dos itens da lista e
Um flex-wrap: wrap, propriedade do Flexbox que permite a quebra de linha dentro do elemento, fazendo com que todos caibam na janela do navegador.

Em alguns atributos, poderíamos utilizar outros valores. A documentação do MDN possui vários exemplos de aplicação do justify-content e do align-items em outras situações, por exemplo.

.nav__list {
    display: flex;
    gap: var(--gap-xl);
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-s) 0;
    list-style-type: none;
    flex-wrap: wrap;
}

Abaixo desse bloco, faremos estilos mais específicos. O seletor de nav__link receberá os seguintes atributos:

Um text-decoration: none;
Um color: var(--cor-texto);
Um font-family: var(--fonte-texto);
Um font-size: var(--font-size-m) e
Um font-weight: 400.

São vários estilos de texto, com os quais removemos a decoração padrão dos links (a linha abaixo do texto), definimos uma cor específica (preta) e ajustamos a fonte para seguir o padrão da aplicação, além de definir o tamanho e o peso da fonte.

.nav__link {
    text-decoration: none;
    color: var(--cor-texto);
    font-family: var(--fonte-texto);
    font-size: var(--font-size-m);
    font-weight: 400;
}

Já teremos o resultado na tela da aplicação e poderemos continuar a estilização. Abaixo do último bloco, adicionaremos o seletor do nav__input para a lista de localização, que terá:

Um width: 100% para ocupar 100% do espaço disponível no contêiner;
Um border-radius: 0.5rem para arredondar as bordas;
Um border: none para remover as bordas;
Um background-color: var(--cor-de-fundo-input) para adicionar a cor cinza-claro ao fundo, tornando-o mais discreto;
Um padding: var(--padding-s) para aumentar o espaço interno do campo e facilitar a visualização;
Um background-image: url("../images/location_on.svg") para adicionar o ícone de localização dentro do campo;
Um background-repeat: no-repeat para que o ícone só apareça uma vez e
Um background-position: 95% center posicionando o ícone próximo ao final do campo, à direita, e centralizado na vertical.

.nav__input {
    width: 100%;
    border-radius: 0.5rem;
    border: none;
    background-color: var(--cor-de-fundo-input);
    padding: var(--padding-s);
    background-image: url("../images/location_on.svg");
    background-repeat: no-repeat;
    background-position: 95% center;
}

No Figma, o input ocupa um espaço maior e o menu hambúrguer não aparece no desktop. Adicionando o seletor do menu__toggle, removeremos o menu hambúrguer com display: none.

.menu__toggle {
    display: none;
}

Abaixo deste, adicionaremos o seletor do nav__item_form, dentro do qual aumentaremos o espaço do campo de digitação. Como o item da lista é um filho direto do flex-container, podemos usar a propriedade flex para indicar quantos espaços ele deve ocupar.

Adicionaremos a ele o valor 2, que é suficiente para aumentar a largura do espaço do campo de digitação.

.nav__item_form {
    flex: 2;
}

Já sabemos que o display: flex define um valor fixo para a propriedade flex. No código acima, apenas dobramos esse valor para aumentar o espaço que queremos ocupar.

Para aprimorar o resultado, realizaremos o espaçamento entre os ícones do carrinho e do perfil. Adicionando o seletor do nav__icons, utilizaremos o display: flex mesmo com elementos lado a lado para possibilitar o uso da propriedade gap, que realiza o espaçamento entre os ícone.

Por fim, definiremos esse gap com a var(--gap-l).

.nav__icons {
    display: flex;
    gap: var(--gap-l);
}

No navegador, acessaremos a aba de inspeção dos elementos e clicaremos no ícone de visualização da página no formato de dispositivo móvel. O atalho no Chrome é "Ctrl + Shift + M".

Voltando à área principal da tela, arrastaremos a aba de redimensionamento nas laterais da página da aplicação na versão móvel e notaremos que a quebra ocorre sem problemas devido ao flex-wrap, mas não fica igual ao Figma.

Conclusão e próximos passos

No Figma, a ordem dos elementos é substituída e um menu do tipo toggle (hambúrguer) aparece. No momento, não há nada aparecendo na nossa aplicação, nem há uma mudança na prioridade do que está sendo impresso.

A seguir, trabalharemos na responsividade dessa aplicação.

Sobre o curso CSS: posicionando elementos com Flexbox

O curso CSS: posicionando elementos com Flexbox possui 112 minutos de vídeos, em um total de 44 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:

Planejando o cabeçalho
Centralizando e posicionando itens
Construindo uma lista de cards
Centralizando diferentes itens
Lidando com linhas e colunas

CSS: posicionando elementos com Flexbox

Planejando o cabeçalho - Apresentação

Conhecendo o projeto

O que aprenderemos?

Pré-requisitos

Próximos passos

Planejando o cabeçalho - Elementos do cabeçalho

Conhecendo o código do projeto

Construindo o cabeçalho

Criando os elementos do contêiner

Conclusão

Próximos passos

Planejando o cabeçalho - Flex container

Estilizando o cabeçalho

Conclusão e próximos passos

Sobre o curso CSS: posicionando elementos com Flexbox

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

Plus

Pro

Ultra

Cursos

Cursos universitários FIAP